/* ============================================================
   HOME V3 — new hero + "Recent work" grid, styled with the
   existing site theme (Antonio / Poppins, brand yellow, dark &
   light modes). Loaded after theme.css on index-v3.html only.
   ============================================================ */

/* ───────────────────────── HERO ───────────────────────── */
#hero.hero3 {
  height: auto;
  min-height: 100vh;
  overflow: hidden;
  background: var(--black);
  display: flex;
  align-items: center;
  padding: 140px 0 72px;
}

[data-theme="light"] #hero.hero3 {
  background: var(--white);
}

#hero.hero3 .hero-content {
  height: auto;
  width: 100%;
}

.hero3-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

.hero3-title {
  font-weight: 700;
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: 0.98;
  margin: 18px 0 24px;
  color: var(--white);
  max-width: none;
}

[data-theme="light"] .hero3-title {
  color: var(--black);
}

/* the word "move." sits on a yellow marker stroke, like a highlighter */
.hero3-move {
  position: relative;
  display: inline-block;
  padding: 0 0.1em;
  color: var(--black);
  z-index: 0;
  /* word + marker wipe in from the left; the hidden state lives only in the
     keyframes, so if animations never run the word is simply visible */
  animation: hero3Reveal 0.8s var(--transition-smooth) 0.9s both;
}

.hero3-move::before {
  content: "";
  position: absolute;
  inset: 0.14em -0.04em 0.04em -0.04em;
  background: var(--yellow);
  z-index: -1;
  transform: skewX(-6deg);
}

@keyframes hero3Reveal {
  from {
    clip-path: inset(-5% 100% -5% -6%);
  }
  to {
    clip-path: inset(-5% -6% -5% -6%);
  }
}

[data-theme="light"] #hero.hero3 .hero-label {
  color: var(--yellow-dark);
}

#hero.hero3 .hero-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  max-width: 54ch;
}

#hero.hero3 .hero-sub strong {
  font-weight: 600;
  color: var(--white);
}

[data-theme="light"] #hero.hero3 .hero-sub {
  color: var(--muted);
}

[data-theme="light"] #hero.hero3 .hero-sub strong {
  color: var(--black);
}

.hero3-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

#hero.hero3 .hero-cta {
  margin-top: 0;
}

/* outlined twin of .hero-cta */
.hero3-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 14px 38px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  color: var(--white);
  transition:
    border-color 0.25s var(--transition-smooth),
    background 0.25s var(--transition-smooth),
    color 0.25s var(--transition-smooth),
    transform 0.25s var(--transition-smooth);
}

.hero3-ghost:hover {
  border-color: var(--yellow-bright);
  background: var(--yellow-bright);
  color: var(--black);
  transform: translateY(-2px);
}

[data-theme="light"] .hero3-ghost {
  border-color: var(--black);
  color: var(--black);
}

[data-theme="light"] .hero3-ghost:hover {
  background: var(--black);
  border-color: var(--black);
  color: var(--yellow-bright);
}

/* where we work: Egypt ~~~ UAE */
.hero3-places {
  margin-top: 30px;
}

.hero3-places__label {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .hero3-places__label {
  color: var(--muted);
}

.hero3-places__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.hero3-place {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px 9px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .hero3-place {
  background: #ffffff;
  border-color: var(--border);
}

.hero3-flag {
  flex: none;
  width: 42px;
  height: 28px;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.hero3-place__text {
  display: grid;
  line-height: 1.15;
}

.hero3-place__name {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}

.hero3-place__sub {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
}

[data-theme="light"] .hero3-place__name {
  color: var(--black);
}

[data-theme="light"] .hero3-place__sub {
  color: var(--muted);
}

/* the two countries sit as equals, joined by an ampersand */
.hero3-amp {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--yellow-bright);
}

[data-theme="light"] .hero3-amp {
  color: var(--yellow-dark);
}

/* three straight cards, staggered like a gallery wall */
.hero3-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  padding-top: 20px;
}

.hero3-card {
  display: block;
  color: inherit;
  transform: translateY(var(--y, 0px));
  transition: transform 0.6s var(--transition-smooth);
  will-change: transform;
}

.hero3-card--1 {
  --y: 40px;
}

.hero3-card--2 {
  --y: -18px;
}

.hero3-card--3 {
  --y: 58px;
}

.hero3-card__img {
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.8);
}

[data-theme="light"] .hero3-card__img {
  border-color: var(--border);
  box-shadow: 0 24px 48px -30px rgba(28, 24, 20, 0.4);
}

.hero3-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--transition-smooth) !important;
}

.hero3-card:hover {
  transform: translateY(calc(var(--y, 0px) - 8px));
}

.hero3-card:hover .hero3-card__img img,
.hero3-card:focus-visible .hero3-card__img img {
  transform: scale(1.06);
}

.hero3-card:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}

.hero3-card__cap {
  display: grid;
  gap: 2px;
  margin-top: 12px;
  padding-left: 10px;
  border-left: 2px solid var(--yellow);
  line-height: 1.2;
}

.hero3-card__cap b {
  font-weight: 600;
  font-size: 14px;
  color: var(--white);
}

.hero3-card__cap small {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

[data-theme="light"] .hero3-card__cap b {
  color: var(--black);
}

[data-theme="light"] .hero3-card__cap small {
  color: var(--muted);
}

.hero3-card:hover .hero3-card__cap b {
  color: var(--yellow-bright);
}

[data-theme="light"] .hero3-card:hover .hero3-card__cap b {
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* nav sits over a plain background now, so in light mode it must
   read dark before the user scrolls */
[data-theme="light"] body.home-v3 #mainNav:not(.navbar--scrolled) .nav-link,
[data-theme="light"] body.home-v3 #mainNav:not(.navbar--scrolled) #langToggle,
[data-theme="light"] body.home-v3 #mainNav:not(.navbar--scrolled) #themeToggle {
  color: var(--black) !important;
}

[data-theme="light"] body.home-v3 #mainNav:not(.navbar--scrolled) .nav-logo img {
  filter: brightness(0) !important;
}

[data-theme="light"] body.home-v3 #mainNav:not(.navbar--scrolled) .nav-toggle {
  border-color: rgba(28, 24, 20, 0.3) !important;
}

[data-theme="light"] body.home-v3 #mainNav:not(.navbar--scrolled) .nav-toggle span {
  background: var(--black) !important;
}

/* ───────────────────────── NAV: PORTFOLIO DOWNLOAD ───────────────────────── */
/* A pill next to the round nav buttons; opens a menu with the two decks. */
.pf3 {
  position: relative;
  --pf-ink: rgba(255, 255, 255, 0.95);
  --pf-line: rgba(255, 255, 255, 0.35);
  --pf-fill: rgba(0, 0, 0, 0.18);
}

[data-theme="light"] body.home-v3 #mainNav .pf3 {
  --pf-ink: var(--black);
  --pf-line: rgba(28, 24, 20, 0.3);
  --pf-fill: rgba(28, 24, 20, 0.04);
}

[data-theme="dark"] body.home-v3 #mainNav.navbar--scrolled .pf3 {
  --pf-fill: rgba(255, 255, 255, 0.07);
}

/* project detail: the nav sits on the cover picture until scrolled */
[data-theme="light"] body.home-v3.page-project-detail #mainNav:not(.navbar--scrolled) .pf3 {
  --pf-ink: #fff;
  --pf-line: rgba(255, 255, 255, 0.45);
  --pf-fill: rgba(0, 0, 0, 0.18);
}

.pf3-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px;
  border: 1.5px solid var(--pf-line);
  border-radius: 999px;
  background: var(--pf-fill);
  color: var(--pf-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.pf3-btn .fa-download {
  font-size: 13px;
}

.pf3-btn__caret {
  font-size: 10px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.pf3-btn:hover,
.pf3-btn[aria-expanded="true"] {
  border-color: var(--yellow-bright);
}

[data-theme="light"] body.home-v3 #mainNav .pf3-btn:hover,
[data-theme="light"] body.home-v3 #mainNav .pf3-btn[aria-expanded="true"] {
  border-color: var(--yellow-dark);
}

.pf3-btn[aria-expanded="true"] .pf3-btn__caret {
  transform: rotate(180deg);
}

.pf3-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 10;
  width: 340px;
  padding: 8px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.pf3-menu[hidden] {
  display: none;
}

[data-theme="light"] .pf3-menu {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 18px 50px rgba(28, 24, 20, 0.14);
}

.pf3-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  color: var(--white);
  text-decoration: none;
}

.pf3-item + .pf3-item {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .pf3-item {
  color: var(--black);
}

[data-theme="light"] .pf3-item + .pf3-item {
  border-top-color: var(--border);
}

.pf3-item__flag {
  display: block;
  width: 28px;
  height: 19px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

[data-theme="light"] .pf3-item__flag {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.pf3-item__text {
  flex: 1;
  min-width: 0;
}

.pf3-item__text b,
.pf3-item__text small {
  display: block;
  font-family: inherit;
}

.pf3-item__text b {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.pf3-item__text small {
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

[data-theme="light"] .pf3-item__text small {
  color: var(--muted);
}

.pf3-item__dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .pf3-item__dl {
  border-color: var(--border-strong);
  color: var(--muted);
}

.pf3-item:hover,
.pf3-item:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  outline: none;
}

[data-theme="light"] .pf3-item:hover,
[data-theme="light"] .pf3-item:focus-visible {
  background: var(--surface);
  color: var(--black);
}

.pf3-item:hover .pf3-item__dl,
.pf3-item:focus-visible .pf3-item__dl {
  border-color: var(--yellow-bright);
  background: var(--yellow-bright);
  color: var(--black);
}

/* phones: the pill shrinks to a round icon, the menu spans the screen */
@media (max-width: 575.98px) {
  .pf3-btn {
    width: 40px;
    padding: 0;
    justify-content: center;
  }

  .pf3-btn__label,
  .pf3-btn__caret {
    display: none;
  }

  .pf3-menu {
    position: fixed;
    top: 80px;
    left: 16px;
    right: 16px;
    width: auto;
  }
}

/* ───────────────────────── RECENT WORK ───────────────────────── */
#latest-work .section-head .section-sub {
  margin-top: 8px;
}

.wg-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px;
  gap: 14px;
  margin-top: 44px;
}

.wg-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: #111;
}

.wg-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--transition-smooth) !important;
}

.wg-tile:hover img {
  transform: scale(1.05);
}

.wg-tile .work-card__tag {
  top: 16px;
  right: 16px;
}

.wg-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 48px 18px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  z-index: 3;
}

.wg-cap .work-card__title {
  font-size: 20px;
  color: var(--white);
}

.wg-cap .work-card__desc {
  margin-top: 2px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}

.wg-t1 {
  grid-column: span 4;
  grid-row: span 4;
}

.wg-t2 {
  grid-column: span 5;
  grid-row: span 2;
}

.wg-t3 {
  grid-column: span 3;
  grid-row: span 2;
}

.wg-t4 {
  grid-column: span 3;
  grid-row: span 2;
}

.wg-t5 {
  grid-column: span 5;
  grid-row: span 2;
}

.wg-t6 {
  grid-column: span 4;
  grid-row: span 3;
}

.wg-t7 {
  grid-column: span 8;
  grid-row: span 3;
}

/* ───────────────────────── RESPONSIVE ───────────────────────── */
@media (max-width: 1199.98px) {
  .hero3-title {
    font-size: clamp(42px, 6.2vw, 76px);
  }
}

@media (max-width: 991.98px) {
  #hero.hero3 {
    padding: 120px 0 56px;
  }

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

  .hero3-stack {
    max-width: 680px;
    margin-top: 8px;
  }

  .wg-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 100px;
  }

  .wg-t1 {
    grid-column: span 3;
    grid-row: span 4;
  }

  .wg-t2,
  .wg-t3 {
    grid-column: span 3;
    grid-row: span 2;
  }

  .wg-t4,
  .wg-t5,
  .wg-t6,
  .wg-t7 {
    grid-column: span 3;
    grid-row: span 3;
  }

}

@media (max-width: 575.98px) {
  .hero3-title {
    font-size: clamp(40px, 13vw, 60px);
  }

  .hero3-cta .hero-cta,
  .hero3-ghost {
    padding-left: 26px;
    padding-right: 26px;
  }

  .hero3-stack {
    gap: 10px;
    padding-top: 10px;
  }

  .hero3-card--1 {
    --y: 14px;
  }

  .hero3-card--3 {
    --y: 22px;
  }

  .hero3-card__cap small {
    display: none;
  }
  .hero3-amp {
    display: none;
  }

  .hero3-places__row {
    gap: 10px;
  }

  .hero3-place {
    flex: 1 1 calc(50% - 5px);
    padding-right: 12px;
  }

  .wg-grid {
    grid-auto-rows: 80px;
    gap: 10px;
  }

  .wg-cap {
    padding: 36px 12px 12px;
  }

  .wg-cap .work-card__title {
    font-size: 16px;
  }

  .wg-cap .work-card__desc {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero3-move {
    animation: none;
  }
}

/* mirror of the hero marker: black stroke, yellow word */
/* direct contact card */
@media (max-width: 991.98px) {
}

@media (max-width: 575.98px) {
}

/* ───────────────────────── TWO OFFICES: flags, footer ───────────────────────── */
.flag {
  width: 22px;
  height: 15px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  flex: none;
}

.flag--sm {
  width: 18px;
  height: 12px;
}

/* footer: one block per office */
.footer-office {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-office__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 12px;
}

.footer-col--offices .footer-contact-item {
  margin-bottom: 10px;
}

.footer-col--offices .footer-contact-val {
  margin-top: 0;
}

.footer-contact-item--email {
  margin-top: 2px;
}

/* footer: social icons grouped per office */
.footer-social-group {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.footer-social-group:first-of-type {
  margin-top: 22px;
}

.footer-social-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 68px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.footer-social--sm {
  margin-top: 0;
  gap: 6px;
}

.footer-social--sm a {
  width: 32px;
  height: 32px;
}

.footer-social--sm a i {
  font-size: 12px;
}

@media (max-width: 575.98px) {
  .footer-social-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* same marker as the hero: yellow stroke, black word */
/* light mode: soft surface, dark card */

/* ───────────────────────── CTA — LET'S TALK (centered, two offices) ───────────────────────── */
.cta4 {
  background: var(--black);
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .cta4 {
  background: var(--surface);
  color: var(--black);
  border-top: 0;
}

.cta4-inner {
  padding-top: clamp(64px, 8vw, 104px);
  padding-bottom: clamp(64px, 8vw, 104px);
  text-align: center;
}

.cta4-eyebrow {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--yellow-bright);
}

[data-theme="light"] .cta4-eyebrow {
  color: var(--yellow-dark);
}

.cta4-title {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4.8vw, 68px);
  line-height: 1.02;
  max-width: 16ch;
  margin: 14px auto 16px;
  color: var(--white);
}

.cta4-title em {
  font-style: normal;
  color: var(--yellow-bright);
}

[data-theme="light"] .cta4-title {
  color: var(--black);
}

[data-theme="light"] .cta4-title em {
  color: var(--yellow-dark);
}

.cta4-sub {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 52ch;
  margin: 0 auto 28px;
}

[data-theme="light"] .cta4-sub {
  color: var(--muted);
}

.cta4-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--yellow-bright);
  color: var(--black);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 18px 36px;
  transition:
    transform 0.25s var(--transition-smooth),
    box-shadow 0.25s var(--transition-smooth) !important;
}

.cta4-btn i {
  transition: transform 0.25s var(--transition-smooth);
}

.cta4-btn:hover {
  color: var(--black);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(245, 208, 0, 0.28);
}

.cta4-btn:hover i {
  transform: translateX(4px);
}

[data-theme="light"] .cta4-btn {
  background: #131313;
  color: var(--yellow-bright);
}

[data-theme="light"] .cta4-btn:hover {
  color: var(--yellow-bright);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

.cta4-note {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

[data-theme="light"] .cta4-note {
  color: var(--muted);
}

/* the two offices, side by side in a thin-ruled strip */
.cta4-offices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(44px, 6vw, 72px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-align: left;
}

[data-theme="light"] .cta4-offices {
  border-color: var(--border);
  background: var(--white);
}

.cta4-office {
  padding: 28px 32px 22px;
  min-width: 0;
}

.cta4-office + .cta4-office {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .cta4-office + .cta4-office {
  border-left-color: var(--border);
}

.cta4-office__name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
}

[data-theme="light"] .cta4-office__name {
  color: var(--black);
}

.cta4-office__addr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}

.cta4-office__addr i {
  color: var(--yellow-bright);
  font-size: 12px;
}

.cta4-office__addr:hover {
  color: var(--yellow-bright);
}

[data-theme="light"] .cta4-office__addr {
  color: var(--muted);
}

[data-theme="light"] .cta4-office__addr i {
  color: var(--yellow-dark);
}

[data-theme="light"] .cta4-office__addr:hover {
  color: var(--black);
}

.cta4-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 15.5px;
}

[data-theme="light"] .cta4-line {
  border-top-color: var(--border);
}

.cta4-line i {
  width: 18px;
  text-align: center;
  color: var(--yellow-bright);
  font-size: 15px;
  flex: none;
}

[data-theme="light"] .cta4-line i {
  color: var(--yellow-dark);
}

.cta4-line a {
  color: var(--white);
  font-weight: 600;
  transition: color 0.2s ease;
}

.cta4-line a:hover {
  color: var(--yellow-bright);
}

[data-theme="light"] .cta4-line a {
  color: var(--black);
}

[data-theme="light"] .cta4-line a:hover {
  color: var(--yellow-dark);
}

.cta4-line small {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

[data-theme="light"] .cta4-line small {
  color: var(--muted);
}

.cta4-email {
  margin: 22px 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
}

.cta4-email i {
  color: var(--yellow-bright);
  margin-right: 8px;
}

.cta4-email a {
  color: var(--white);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.cta4-email a:hover {
  color: var(--yellow-bright);
  border-bottom-color: var(--yellow-bright);
}

.cta4-email span {
  margin-left: 8px;
}

[data-theme="light"] .cta4-email {
  color: var(--muted);
}

[data-theme="light"] .cta4-email i {
  color: var(--yellow-dark);
}

[data-theme="light"] .cta4-email a {
  color: var(--black);
  border-bottom-color: rgba(28, 24, 20, 0.3);
}

[data-theme="light"] .cta4-email a:hover {
  color: var(--black);
  border-bottom-color: var(--yellow);
}

@media (max-width: 767.98px) {
  .cta4-offices {
    grid-template-columns: 1fr;
  }

  .cta4-office + .cta4-office {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  [data-theme="light"] .cta4-office + .cta4-office {
    border-top-color: var(--border);
  }
}

@media (max-width: 575.98px) {
  .cta4-btn {
    width: 100%;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
  }

  .cta4-office {
    padding: 22px 18px 16px;
  }

  .cta4-line {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .cta4-email span {
    display: block;
    margin: 4px 0 0;
  }
}

/* ───────────────────────── NUMBERS — one row of facts ───────────────────────── */
.facts {
  background: var(--black);
  color: var(--white);
  padding: clamp(48px, 6vw, 72px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .facts {
  background: var(--surface);
  color: var(--black);
  border-top: 0;
}

.facts-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.facts .label-eyebrow {
  color: var(--yellow-bright);
}

[data-theme="light"] .facts .label-eyebrow {
  color: var(--yellow-dark);
}

.facts-title {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  margin: 10px 0 0;
  color: var(--white);
}

[data-theme="light"] .facts-title {
  color: var(--black);
}

.facts-sub {
  margin: 0;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .facts-sub {
  color: var(--muted);
}

/* the strip */
.facts-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .facts-row {
  border-color: var(--border-strong);
  background: var(--white);
}

.fact {
  min-width: 0;
  padding: 22px 22px 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.3s ease !important;
}

.fact:first-child {
  border-left: 0;
}

[data-theme="light"] .fact {
  border-left-color: var(--border-strong);
}

.fact:hover {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .fact:hover {
  background: var(--surface);
}

.fact-q {
  display: block;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow-bright);
}

[data-theme="light"] .fact-q {
  color: var(--yellow-dark);
}

.fact-n {
  display: block;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 4vw, 60px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--white);
  white-space: nowrap;
}

[data-theme="light"] .fact-n {
  color: var(--black);
}

.fact-n .stat-number {
  font: inherit;
  color: inherit !important;
  display: inline;
  margin: 0;
}

.fact-a {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}

[data-theme="light"] .fact-a {
  color: var(--muted);
}

/* tablet: three on top, two below */
@media (max-width: 991.98px) {
  .facts-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .fact:nth-child(4) {
    border-left: 0;
  }

  .fact:nth-child(n + 4) {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  [data-theme="light"] .fact:nth-child(n + 4) {
    border-top-color: var(--border-strong);
  }
}

/* phone: stays one row, scrolls sideways */
@media (max-width: 767.98px) {
  .facts-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

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

  .fact {
    flex: 0 0 min(66vw, 240px);
    scroll-snap-align: start;
    border-top: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.14) !important;
  }

  .fact:first-child {
    border-left: 0 !important;
  }

  [data-theme="light"] .fact {
    border-left-color: var(--border-strong) !important;
  }
}

/* ───────────────────────── WHO WE ARE — statement + four facts ───────────────────────── */
.who3-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.who3-title {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4.2vw, 62px);
  line-height: 1;
  margin: 12px 0 18px;
  color: var(--white);
}

[data-theme="light"] .who3-title {
  color: var(--black);
}

.who3-text {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7) !important;
  max-width: 44ch;
  margin: 0 0 26px;
}

[data-theme="light"] .who3-text {
  color: var(--muted) !important;
}

.who3 .btn-outline-brand {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}

.who3 .btn-outline-brand:hover {
  background: var(--yellow-bright);
  border-color: var(--yellow-bright);
  color: var(--black);
}

[data-theme="light"] .who3 .btn-outline-brand {
  border-color: var(--black);
  color: var(--black);
}

[data-theme="light"] .who3 .btn-outline-brand:hover {
  background: var(--black);
  color: var(--yellow-bright);
}

.who3-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.who3-facts li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 22px 20px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.35s var(--transition-smooth), border-color 0.25s ease !important;
}

[data-theme="light"] .who3-facts li {
  background: var(--surface);
  border-color: var(--border);
}

.who3-facts li:hover {
  transform: translateY(-4px);
  border-color: var(--yellow-bright);
}

[data-theme="light"] .who3-facts li:hover {
  border-color: var(--yellow-dark);
}

.who3-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 42px;
  height: 42px;
  background: var(--yellow);
  color: var(--black);
  font-size: 16px;
  margin-bottom: 6px;
}

.who3-icon--flags {
  width: auto;
  padding: 0 10px;
}

.who3-facts b {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.02em;
  color: var(--white);
}

[data-theme="light"] .who3-facts b {
  color: var(--black);
}

.who3-facts span:last-child {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

[data-theme="light"] .who3-facts span:last-child {
  color: var(--muted);
}

@media (max-width: 991.98px) {
  .who3-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 575.98px) {
  .who3-facts {
    grid-template-columns: 1fr;
  }
}

/* ───────────────────────── WHAT WE DO — six picture tiles ───────────────────────── */
.svc4-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.svc4-title {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1;
  margin: 10px 0 0;
  color: var(--white);
}

[data-theme="light"] .svc4-title {
  color: var(--black);
}

.svc4 .btn-outline-brand {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}

.svc4 .btn-outline-brand:hover {
  background: var(--yellow-bright);
  border-color: var(--yellow-bright);
  color: var(--black);
}

[data-theme="light"] .svc4 .btn-outline-brand {
  border-color: var(--black);
  color: var(--black);
}

[data-theme="light"] .svc4 .btn-outline-brand:hover {
  background: var(--black);
  color: var(--yellow-bright);
}

.svc4-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.svc4-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #111;
  color: var(--white);
}

.svc4-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.9);
  transition: transform 0.9s var(--transition-smooth), filter 0.4s ease !important;
}

.svc4-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.1) 100%);
  transition: opacity 0.3s ease;
}

.svc4-tile:hover img,
.svc4-tile:focus-visible img {
  transform: scale(1.06);
  filter: none;
}

.svc4-num {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--yellow-bright);
}

.svc4-name {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--white);
  padding-bottom: 8px;
}

.svc4-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 3px;
  background: var(--yellow);
  transition: width 0.4s var(--transition-smooth);
}

.svc4-tile:hover .svc4-name::after,
.svc4-tile:focus-visible .svc4-name::after {
  width: 100%;
}

.svc4-tile:focus-visible {
  outline: 2px solid var(--yellow-bright);
  outline-offset: 3px;
}

@media (max-width: 991.98px) {
  .svc4-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* phone: one row that scrolls sideways */
@media (max-width: 575.98px) {
  .svc4-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-right: calc(-1 * var(--pad-mobile));
    padding-right: var(--pad-mobile);
  }

  .svc4-grid::-webkit-scrollbar {
    display: none;
  }

  .svc4-grid li {
    flex: 0 0 min(58vw, 220px);
    scroll-snap-align: start;
  }

  .svc4-head .btn-outline-brand {
    width: 100%;
    justify-content: center;
  }
}

/* ───────────────────────── TRUSTED BY — logo wall ───────────────────────── */
/* The client plates are white logos on black, so the wall is black in both
   themes and the plates sit flush, separated only by thin grid lines. */
.wall {
  background: #000;
  color: var(--white);
  padding: clamp(48px, 6vw, 72px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wall-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.wall .label-eyebrow {
  color: var(--yellow-bright) !important;
}

.wall-title {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  margin: 10px 0 0;
  color: var(--white) !important;
}

.wall .btn-outline-brand {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}

.wall .btn-outline-brand:hover {
  background: var(--yellow-bright);
  border-color: var(--yellow-bright);
  color: var(--black);
}

.wall-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.wall-grid li {
  background: #000;
  overflow: hidden;
}

.wall-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.6s var(--transition-smooth) !important;
}

.wall-grid li:hover img {
  opacity: 1;
  transform: scale(1.06);
}

@media (max-width: 991.98px) {
  .wall-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 575.98px) {
  .wall-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wall-head .btn-outline-brand {
    width: 100%;
    justify-content: center;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   VERSION 3 — INNER PAGES
   Shared page hero, then one block per page. Same rules as the home page:
   Antonio + Poppins, yellow as an accent only, black / cream backgrounds.
   ═════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── PAGE HERO ───────────────────────── */
.ph3 {
  background: var(--black);
  color: var(--white);
  padding: 150px 0 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .ph3 {
  background: var(--white);
  color: var(--black);
  border-bottom-color: var(--border);
}

.ph3-inner {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 24px 40px;
  align-items: end;
}

.ph3-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--yellow-bright);
}

.ph3-crumb a {
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
}

.ph3-crumb a:hover {
  color: var(--white);
}

.ph3-crumb .sep {
  color: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .ph3-crumb {
  color: var(--yellow-dark);
}

[data-theme="light"] .ph3-crumb a {
  color: var(--muted);
}

[data-theme="light"] .ph3-crumb a:hover {
  color: var(--black);
}

[data-theme="light"] .ph3-crumb .sep {
  color: var(--border-strong);
}

.ph3-title {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(42px, 6vw, 86px);
  line-height: 0.96;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
  max-width: 16ch;
  color: var(--white);
}

[data-theme="light"] .ph3-title {
  color: var(--black);
}

.ph3-sub {
  margin: 18px 0 0;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.68) !important;
}

[data-theme="light"] .ph3-sub {
  color: var(--muted) !important;
}

.ph3-aside {
  justify-self: end;
  padding-bottom: 6px;
}

/* generic dark-section outline button (same override the home sections use) */
.sd3-work .btn-outline-brand,
.cr3-why .btn-outline-brand {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}

.sd3-work .btn-outline-brand:hover,
.cr3-why .btn-outline-brand:hover {
  background: var(--yellow-bright);
  border-color: var(--yellow-bright);
  color: var(--black);
}

[data-theme="light"] .sd3-work .btn-outline-brand,
[data-theme="light"] .cr3-why .btn-outline-brand {
  border-color: var(--black);
  color: var(--black);
}

[data-theme="light"] .sd3-work .btn-outline-brand:hover,
[data-theme="light"] .cr3-why .btn-outline-brand:hover {
  background: var(--black);
  color: var(--yellow-bright);
}

/* theme.css paints every dark-mode section.section-py and #backToTop #1a1916 !important,
   a warm brown that does not belong to the V3 palette. Put the V3 blacks back:
   sections black, alternate sections #0a0a0a, small panels #141414. */
[data-theme="dark"] body.home-v3 section.section-py {
  background: var(--black) !important;
}

[data-theme="dark"] body.home-v3 section.svc4,
[data-theme="dark"] body.home-v3 section.sd3-work,
[data-theme="dark"] body.home-v3 section.cr3-roles-sec {
  background: #0a0a0a !important;
}

[data-theme="dark"] body.home-v3 #backToTop {
  background: #141414 !important;
}

/* the light-theme sheet paints every section.section-py; give the V3 pages a plain base */
.pg3,
.sd3,
.sd3-work,
.sd3-others,
.pd3,
.cr3-why,
.cr3-roles-sec,
.ct3 {
  background: var(--black);
  color: var(--white);
}

.sd3-work,
.cr3-roles-sec {
  background: #0a0a0a;
}

[data-theme="light"] .pg3,
[data-theme="light"] .sd3,
[data-theme="light"] .sd3-others,
[data-theme="light"] .pd3,
[data-theme="light"] .cr3-why,
[data-theme="light"] .ct3 {
  background: var(--white) !important;
  color: var(--black);
}

[data-theme="light"] .sd3-work,
[data-theme="light"] .cr3-roles-sec {
  background: var(--surface) !important;
  color: var(--black);
}

/* shared: a row of four fact tiles (careers) */
.who3-facts--four {
  grid-template-columns: repeat(4, 1fr);
}

/* ───────────────────────── ABOUT ───────────────────────── */
/* Editorial and image-led: one oversized line with real work set into the
   words, a slow reel of client work, a paragraph that lights up as it is read,
   a big index, a drawn timeline and four portrait strips. Every section
   carries .ab4. Behaviour lives in the ABOUT block of v3.js. */
.ab4 {
  background: var(--black);
  color: var(--white);
}

.ab4-story,
.ab4-steps {
  background: #0a0a0a;
}

[data-theme="light"] .ab4 {
  background: var(--white);
  color: var(--black);
}

[data-theme="light"] .ab4-story,
[data-theme="light"] .ab4-steps {
  background: var(--surface);
}

.ab4 .label-eyebrow {
  color: var(--yellow-bright);
}

[data-theme="light"] .ab4 .label-eyebrow {
  color: var(--yellow-dark);
}

/* chapter marker: 01 —— WHO WE ARE */
.ab4-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.ab4-eyebrow span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Antonio", sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.ab4-eyebrow span::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.ab4 .btn-outline-brand {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}

.ab4 .btn-outline-brand:hover {
  background: var(--yellow-bright);
  border-color: var(--yellow-bright);
  color: var(--black);
}

[data-theme="light"] .ab4 .btn-outline-brand {
  border-color: var(--black);
  color: var(--black);
}

[data-theme="light"] .ab4 .btn-outline-brand:hover {
  background: var(--black);
  color: var(--yellow-bright);
}

/* hero */
.ab4-hero {
  padding-top: 150px;
  overflow: hidden;
}

.ab4-title {
  margin: 0;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 9vw, 148px);
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
}

[data-theme="light"] .ab4-title {
  color: var(--black);
}

.ab4-title span {
  font-family: inherit;
  letter-spacing: inherit;
}

.ab4-line {
  display: block;
  white-space: nowrap;
}

/* the middle line steps in, like a magazine cover */
.ab4-line--in {
  padding-left: 1.3em;
}

/* real work set into the line, cap height tall */
.ab4-pic {
  display: inline-block;
  width: 1.5em;
  height: 0.72em;
  margin: 0 0.16em;
  overflow: hidden;
  background: #111;
}

.ab4-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ab4-flags {
  display: inline-flex;
  gap: 0.1em;
  margin-left: 0.22em;
}

.ab4-flags .flag {
  width: 0.66em;
  height: 0.44em;
  border-radius: 0.05em;
}

/* same yellow marker as the home hero */
.ab4-move {
  position: relative;
  display: inline-block;
  padding: 0 0.08em;
  color: var(--black);
  z-index: 0;
}

.ab4-move::before {
  content: "";
  position: absolute;
  inset: 0.12em -0.04em 0.02em -0.04em;
  background: var(--yellow);
  z-index: -1;
  transform: skewX(-6deg);
}

/* entrance: v3.js holds it until the preloader has gone */
.ab4-hero.is-waiting .ab4-pic img,
.ab4-hero.is-waiting .ab4-move {
  clip-path: inset(-5% 100% -5% -6%);
}

.ab4-hero.is-on .ab4-pic img {
  animation: ab4Pic 1.1s var(--transition-smooth) both;
}

.ab4-hero.is-on .ab4-pic--1 img {
  animation-delay: 0.15s;
}

.ab4-hero.is-on .ab4-pic--2 img {
  animation-delay: 0.35s;
}

.ab4-hero.is-on .ab4-move {
  animation: hero3Reveal 0.8s var(--transition-smooth) 0.55s both;
}

@keyframes ab4Pic {
  from {
    clip-path: inset(0 100% 0 0);
    transform: scale(1.3);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
}

.ab4-hero-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px 48px;
  align-items: end;
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

[data-theme="light"] .ab4-hero-foot {
  border-top-color: var(--border);
}

.ab4-lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68) !important;
}

[data-theme="light"] .ab4-lede {
  color: var(--muted) !important;
}

/* two live office clocks */
.ab4-clocks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.ab4-clocks li {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 6px 22px;
  padding: 0 0 0 28px;
  margin-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.ab4-clocks li:first-child {
  padding-left: 0;
  margin-left: 0;
  border-left: 0;
}

[data-theme="light"] .ab4-clocks li {
  border-left-color: var(--border);
}

.ab4-clock__city {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ab4-clock__time {
  justify-self: end;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

[data-theme="light"] .ab4-clock__time {
  color: var(--black);
}

.ab4-clock__time:empty {
  display: none;
}

.ab4-clock__state {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .ab4-clock__state {
  color: var(--muted);
}

.ab4-clock__state[data-state]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid currentColor;
}

.ab4-clock__state[data-state="open"]::before {
  background: var(--yellow);
  border-color: var(--yellow);
  box-shadow: 0 0 0 4px rgba(253, 243, 0, 0.16);
}

[data-theme="light"] .ab4-clock__state[data-state="open"]::before {
  background: var(--yellow-dark);
  border-color: var(--yellow-dark);
}

/* the reel: one row, full bleed; v3.js clones it and sets it moving */
.ab4-reel {
  margin-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(56px, 6vw, 88px);
  overflow-x: auto;
  scrollbar-width: none;
}

.ab4-reel::-webkit-scrollbar {
  display: none;
}

.ab4-reel.is-looping {
  overflow: hidden;
}

.ab4-reel__track {
  display: flex;
  width: max-content;
}

.ab4-reel__item {
  position: relative;
  flex: none;
  height: clamp(220px, 25vw, 360px);
  margin-right: 14px;
  overflow: hidden;
  background: #111;
}

.ab4-reel__item img {
  display: block;
  width: auto;
  height: 100%;
  transition: transform 1s var(--transition-smooth) !important;
}

.ab4-reel__item:hover img {
  transform: scale(1.05);
}

.ab4-reel__item:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: -2px;
}

.ab4-reel__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 2px;
  padding: 44px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s var(--transition-smooth);
}

.ab4-reel__item:hover .ab4-reel__cap,
.ab4-reel__item:focus-visible .ab4-reel__cap {
  opacity: 1;
  transform: none;
}

.ab4-reel__cap b {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: #fff;
}

.ab4-reel__cap small {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

@media (prefers-reduced-motion: no-preference) {
  .ab4-reel.is-looping .ab4-reel__track {
    animation: ab4Reel var(--reel-dur, 70s) linear infinite;
  }

  .ab4-reel.is-looping:hover .ab4-reel__track,
  .ab4-reel.is-looping:focus-within .ab4-reel__track {
    animation-play-state: paused;
  }
}

@keyframes ab4Reel {
  to {
    transform: translateX(-50%);
  }
}

/* 01 who we are */
.ab4-story {
  padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 7vw, 104px);
}

.ab4-story-grid {
  display: grid;
  grid-template-columns: minmax(200px, 0.28fr) 1fr;
  gap: 24px 48px;
  align-items: start;
}

.ab4-story-grid .ab4-eyebrow {
  padding-top: 0.9em;
}

.ab4-say {
  margin: 0;
  max-width: 30em;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: clamp(23px, 2.6vw, 40px);
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: var(--white) !important;
}

[data-theme="light"] .ab4-say {
  color: var(--black) !important;
}

.ab4-say b {
  font-weight: 600;
  color: var(--yellow-bright);
}

[data-theme="light"] .ab4-say b {
  color: var(--black);
  background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 92%, transparent 92%);
}

.ab4-say .flag {
  width: 0.86em;
  height: 0.58em;
  vertical-align: 0.04em;
}

/* v3.js wraps each word; a word stays dim until the reader reaches it */
.ab4-say.is-split .ab4-w {
  opacity: 0.2;
  transition: opacity 0.45s ease;
}

.ab4-say.is-split .ab4-w.is-lit {
  opacity: 1;
}

/* numbers, as a ledger */
.ab4-ledger {
  list-style: none;
  margin: clamp(56px, 6vw, 88px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .ab4-ledger {
  border-top-color: var(--border-strong);
}

.ab4-ledger li {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 28px 20px 0 0;
}

.ab4-ledger li + li {
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .ab4-ledger li + li {
  border-left-color: var(--border);
}

/* a short yellow tick sits on the rule above each number */
.ab4-ledger li::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 32px;
  height: 3px;
  background: var(--yellow);
}

.ab4-ledger li + li::before {
  left: 22px;
}

.ab4-ledger__n {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 5.4vw, 84px);
  line-height: 0.9;
  color: var(--white);
}

[data-theme="light"] .ab4-ledger__n {
  color: var(--black);
}

.ab4-ledger__n .stat-number {
  font: inherit;
  letter-spacing: inherit;
  color: inherit !important;
  display: inline;
}

.ab4-ledger__l {
  max-width: 19ch;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .ab4-ledger__l {
  color: var(--muted);
}

/* 02 what we stand for: a big index */
.ab4-rules,
.ab4-steps,
.ab4-sectors {
  padding: clamp(72px, 8vw, 112px) 0;
}

.ab4-list {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.ab4-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 10px 40px;
  align-items: center;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .ab4-list,
[data-theme="light"] .ab4-row {
  border-color: var(--border-strong);
}

.ab4-row__n {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--yellow-bright);
}

[data-theme="light"] .ab4-row__n {
  color: var(--yellow-dark);
}

.ab4-row__t {
  margin: 0;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 72px);
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--white);
  transition: transform 0.5s var(--transition-smooth);
}

[data-theme="light"] .ab4-row__t {
  color: var(--black) !important;
}

/* yellow underline that draws in on hover */
.ab4-row__t span {
  font-family: inherit;
  letter-spacing: inherit;
  background: linear-gradient(var(--yellow), var(--yellow)) left 92% / 0% 0.12em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.55s var(--transition-smooth);
}

.ab4-row:hover .ab4-row__t {
  transform: translateX(12px);
}

.ab4-row:hover .ab4-row__t span {
  background-size: 100% 0.12em;
}

.ab4-row__d {
  justify-self: end;
  max-width: 34ch;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="light"] .ab4-row__d {
  color: var(--muted) !important;
}

/* the picture that follows the pointer over the index (desktop only) */
.ab4-float {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 0;
  height: 0;
  pointer-events: none;
}

.ab4-float__in {
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #111;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.3s ease, transform 0.5s var(--transition-smooth);
}

.ab4-float.is-on .ab4-float__in {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ab4-float img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease !important;
}

.ab4-float img.is-on {
  opacity: 1;
}

/* 03 how a project goes: one line, three stops */
.ab4-track {
  position: relative;
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
}

.ab4-track::before,
.ab4-track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.ab4-track::after {
  top: 43px;
  height: 3px;
  background: var(--yellow);
  transform-origin: left center;
  transition: transform 1.6s var(--transition-smooth);
}

[data-theme="light"] .ab4-track::before {
  background: var(--border-strong);
}

.ab4-track.is-waiting::after {
  transform: scaleX(0);
}

.ab4-track li {
  position: relative;
  padding-right: 12px;
}

.ab4-track__when {
  display: block;
  height: 28px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .ab4-track__when {
  color: var(--muted);
}

.ab4-track__dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 15px;
  height: 15px;
  margin: 9px 0 30px;
  background: var(--yellow);
  border: 2px solid var(--yellow);
  transition: background-color 0.4s ease;
}

.ab4-track.is-waiting .ab4-track__dot {
  background: #0a0a0a;
}

[data-theme="light"] .ab4-track.is-waiting .ab4-track__dot {
  background: var(--surface);
}

.ab4-track li:nth-child(2) .ab4-track__dot {
  transition-delay: 0.7s;
}

.ab4-track li:nth-child(3) .ab4-track__dot {
  transition-delay: 1.35s;
}

/* outlined numeral behind each stop */
.ab4-track__n {
  position: absolute;
  right: 12px;
  top: 66px;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(72px, 7vw, 110px);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

[data-theme="light"] .ab4-track__n {
  -webkit-text-stroke-color: rgba(28, 24, 20, 0.16);
}

.ab4-track h3 {
  position: relative;
  margin: 0 0 10px;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 36px);
  letter-spacing: 0.01em;
  color: var(--white);
}

[data-theme="light"] .ab4-track h3 {
  color: var(--black) !important;
}

.ab4-track p {
  position: relative;
  max-width: min(32ch, calc(100% - 1.3em - 0.9 * clamp(72px, 7vw, 110px)));
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62) !important;
}

[data-theme="light"] .ab4-track p {
  color: var(--muted) !important;
}

/* 05 who we work with: four tall strips; the one under the pointer opens up */
.ab4-strips {
  display: flex;
  gap: 12px;
  height: clamp(380px, 36vw, 520px);
}

.ab4-strip {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  background: #000;
  transition: flex-grow 0.7s var(--transition-smooth);
}

.ab4-strips:hover .ab4-strip {
  flex-grow: 0.75;
}

.ab4-strips .ab4-strip:hover,
.ab4-strips .ab4-strip:focus-visible {
  flex-grow: 2.2;
}

.ab4-strip:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.ab4-strip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transform: scale(1.02);
  transition: filter 0.5s ease, transform 1s var(--transition-smooth) !important;
}

.ab4-strip:hover img,
.ab4-strip:focus-visible img {
  filter: none;
  transform: scale(1.06);
}

.ab4-strip__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 2px;
  padding: 60px 16px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

.ab4-strip__cap b {
  padding-left: 10px;
  border-left: 2px solid var(--yellow);
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.75vw, 26px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #fff;
}

.ab4-strip__cap small {
  padding-left: 12px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 991.98px) {
  .ab4-hero {
    padding-top: 120px;
  }

  .ab4-hero-foot,
  .ab4-story-grid {
    grid-template-columns: 1fr;
  }

  .ab4-story-grid .ab4-eyebrow {
    padding-top: 0;
  }

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

  .ab4-ledger li:nth-child(4) {
    padding-left: 0;
    border-left: 0;
  }

  .ab4-ledger li:nth-child(4)::before {
    left: 0;
  }

  .ab4-ledger li:nth-child(n + 4) {
    margin-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  [data-theme="light"] .ab4-ledger li:nth-child(n + 4) {
    border-top-color: var(--border-strong);
  }

  .ab4-row {
    grid-template-columns: 56px 1fr;
  }

  .ab4-row__d {
    grid-column: 2;
    justify-self: start;
  }

  /* the line turns vertical */
  .ab4-track {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-left: 38px;
  }

  .ab4-track::before,
  .ab4-track::after {
    left: 7px;
    right: auto;
    top: 6px;
    bottom: 6px;
    width: 1px;
    height: auto;
  }

  .ab4-track::after {
    left: 6px;
    width: 3px;
    transform-origin: center top;
  }

  .ab4-track.is-waiting::after {
    transform: scaleY(0);
  }

  .ab4-track__when {
    height: auto;
    margin-bottom: 10px;
  }

  .ab4-track__dot {
    position: absolute;
    left: -38px;
    top: 0;
    margin: 0;
  }

  .ab4-track__n {
    top: 0;
    right: 0;
    font-size: 84px;
  }

  .ab4-track p {
    max-width: calc(100% - 70px);
  }

  /* touch: the strips become a sideways row */
  .ab4-strips {
    height: 440px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .ab4-strips::-webkit-scrollbar {
    display: none;
  }

  .ab4-strips .ab4-strip,
  .ab4-strips:hover .ab4-strip,
  .ab4-strips .ab4-strip:hover {
    flex: 0 0 44%;
    scroll-snap-align: start;
  }
}

@media (max-width: 575.98px) {
  .ab4-title {
    font-size: clamp(44px, 13.5vw, 64px);
    line-height: 1;
  }

  .ab4-line {
    white-space: normal;
  }

  .ab4-line--in {
    padding-left: 0;
  }

  .ab4-clocks li {
    gap: 4px 14px;
    padding-left: 18px;
    margin-left: 18px;
  }

  .ab4-clock__city {
    font-size: 16px;
  }

  .ab4-clock__time {
    font-size: 28px;
  }

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

  .ab4-ledger li,
  .ab4-ledger li:nth-child(4) {
    padding: 24px 12px 0 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }

  .ab4-ledger li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .ab4-ledger li::before,
  .ab4-ledger li + li::before {
    left: 16px;
  }

  .ab4-ledger li:nth-child(odd)::before {
    left: 0;
  }

  .ab4-ledger li:nth-child(n + 3) {
    margin-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .ab4-ledger li:last-child {
    grid-column: 1 / -1;
  }

  [data-theme="light"] .ab4-ledger li,
  [data-theme="light"] .ab4-ledger li:nth-child(n + 3) {
    border-color: var(--border);
  }

  .ab4-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ab4-row__d {
    grid-column: 1;
  }

  .ab4-strips {
    height: 400px;
  }

  .ab4-strips .ab4-strip,
  .ab4-strips:hover .ab4-strip,
  .ab4-strips .ab4-strip:hover {
    flex-basis: 74%;
  }
}

/* ───────────────────────── SERVICES ───────────────────────── */
/* Shares the About blocks (.ab4 sections, hero, eyebrows, the drawn
   timeline). Its own parts:
   - .sv4-x, the six services. Base (phones, or no JS): a swipe row of cards.
     Desktop with JS (.is-pin): the stage pins while the section scrolls past,
     each stretch of scrolling brings in the next service, the picture drifts
     (parallax) and the index on the left fills up.
   - .sv4-needs, four situations with a real picture and a numbered path.
   Behaviour: SERVICES block of v3.js. */
.sv4-hero {
  padding-bottom: clamp(56px, 6vw, 88px);
}

.sv4-hero .btn-outline-brand i {
  margin-left: 10px;
}

.sv4 {
  padding: clamp(72px, 8vw, 112px) 0;
  background: #0a0a0a;
}

[data-theme="light"] .sv4 {
  background: var(--surface);
}

.sv4-stage {
  margin-top: 18px;
}

/* ---------- base: a swipe row of six cards ---------- */
.sv4-nav,
.sv4-hint {
  display: none;
}

.sv4-panels {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.sv4-panels::-webkit-scrollbar {
  display: none;
}

.sv4-panel {
  flex: 0 0 min(86%, 520px);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .sv4-panel {
  background: #ffffff;
  border-color: var(--border);
}

.sv4-swipe {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

[data-theme="light"] .sv4-swipe {
  color: var(--muted);
}

.sv4-swipe i {
  color: var(--yellow-bright);
}

[data-theme="light"] .sv4-swipe i {
  color: var(--yellow-dark);
}

.sv4-media {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #111;
}

.sv4-media img {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0);
}

.sv4-media:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.sv4-media__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 48px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.sv4-media__cap i {
  color: var(--yellow-bright);
  transition: transform 0.3s var(--transition-smooth);
}

a.sv4-media:hover .sv4-media__cap i {
  transform: translateX(4px);
}

.sv4-body {
  padding: 20px 20px 24px;
}

.sv4-count {
  display: block;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--yellow-bright);
}

.sv4-count em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .sv4-count {
  color: var(--yellow-dark);
}

[data-theme="light"] .sv4-count em {
  color: var(--muted);
}

.sv4-title {
  margin: 6px 0 12px;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.4vw, 54px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--white);
}

[data-theme="light"] .sv4-title {
  color: var(--black) !important;
}

.sv4-short {
  margin: 0 0 14px;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--white) !important;
}

[data-theme="light"] .sv4-short {
  color: var(--black) !important;
}

.sv4-fit {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="light"] .sv4-fit {
  color: var(--muted) !important;
}

.sv4-fit b {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow-bright);
}

[data-theme="light"] .sv4-fit b {
  color: var(--yellow-dark);
}

.sv4-inc {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sv4-inc li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

.sv4-inc li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--yellow);
  transform: translateY(-1px);
}

[data-theme="light"] .sv4-inc,
[data-theme="light"] .sv4-inc li {
  border-color: var(--border);
}

[data-theme="light"] .sv4-inc li {
  color: var(--black);
}

.sv4 .sv4-cta {
  margin-top: 0;
  gap: 12px;
}

/* ---------- desktop with JS: the stage pins, scrolling walks through the six ---------- */
@media (min-width: 992px) {
  .sv4-x.is-pin {
    --stage-h: min(620px, calc(100vh - 150px));
    --seg: 70vh;
    height: calc(var(--stage-h) + 5 * var(--seg));
  }

  .sv4-x.is-pin .sv4-stage {
    position: sticky;
    top: calc(50vh - var(--stage-h) / 2 + 40px);
    height: var(--stage-h);
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
    gap: clamp(36px, 4.5vw, 72px);
  }

  .sv4-x.is-pin .sv4-swipe {
    display: none;
  }

  /* the index on the left */
  .sv4-x.is-pin .sv4-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .sv4-nav ol {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  [data-theme="light"] .sv4-nav ol {
    border-color: var(--border-strong);
  }

  .sv4-nav a {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    padding: clamp(10px, 1.4vh, 16px) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-family: "Antonio", sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 2.1vw, 32px);
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.34);
    transition: color 0.3s ease, padding 0.45s var(--transition-smooth);
  }

  [data-theme="light"] .sv4-nav a {
    border-color: var(--border-strong);
    color: rgba(28, 24, 20, 0.34);
  }

  .sv4-nav a span {
    font-family: inherit;
  }

  .sv4-nav .sv4-n {
    font-size: 13px;
    letter-spacing: 0.12em;
  }

  .sv4-nav a:hover {
    color: rgba(255, 255, 255, 0.82);
  }

  .sv4-nav a.is-on {
    padding-left: 12px;
    color: var(--white);
  }

  [data-theme="light"] .sv4-nav a:hover,
  [data-theme="light"] .sv4-nav a.is-on {
    color: var(--black);
  }

  .sv4-nav a.is-on .sv4-n {
    color: var(--yellow-bright);
  }

  [data-theme="light"] .sv4-nav a.is-on .sv4-n {
    color: var(--yellow-dark);
  }

  .sv4-nav a:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
  }

  /* how far through each service you are */
  .sv4-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
  }

  .sv4-bar i {
    display: block;
    height: 100%;
    background: var(--yellow);
    transform-origin: left center;
    transform: scaleX(var(--fill, 0));
  }

  .sv4-x.is-pin .sv4-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    transition: opacity 0.4s ease;
  }

  [data-theme="light"] .sv4-x.is-pin .sv4-hint {
    color: var(--muted);
  }

  .sv4-x.is-moved .sv4-hint {
    opacity: 0;
  }

  .sv4-mouse {
    position: relative;
    flex: none;
    width: 18px;
    height: 28px;
    border: 2px solid currentColor;
    border-radius: 10px;
  }

  .sv4-mouse::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 5px;
    width: 3px;
    height: 6px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--yellow);
  }

  /* the six panels sit on top of each other; the current one shows */
  .sv4-x.is-pin .sv4-panels {
    position: relative;
    display: block;
    height: 100%;
    overflow: visible;
  }

  .sv4-x.is-pin .sv4-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(24px, 2.6vw, 40px);
    background: none;
    border: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(28px);
    transition: opacity 0.22s ease, transform 0.5s var(--transition-smooth), visibility 0s linear 0.5s;
  }

  .sv4-x.is-pin .sv4-panel.is-past {
    transform: translateY(-28px);
  }

  .sv4-x.is-pin .sv4-panel.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.45s ease 0.18s, transform 0.7s var(--transition-smooth) 0.18s;
  }

  .sv4-x.is-pin .sv4-media {
    height: 100%;
    aspect-ratio: auto;
  }

  .sv4-x.is-pin .sv4-body {
    align-self: center;
    padding: 0;
  }
}

@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .sv4-mouse::after {
    animation: sv4Wheel 1.6s ease-in-out infinite;
  }
}

@keyframes sv4Wheel {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(9px);
  }
}

/* ---------- 02 where to start: four situations, each with a picture and a path ---------- */
.sv4-start {
  padding: clamp(72px, 8vw, 112px) 0;
}

.sv4-needs {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}

.sv4-need {
  display: flex;
  flex-direction: column;
}

.sv4-need__img {
  position: relative;
  margin: 0 0 18px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #111;
}

.sv4-need__img img {
  position: absolute;
  left: 0;
  top: -9%;
  width: 100%;
  height: 118%;
  object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0);
}

.sv4-need__img figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 14px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.sv4-need__q {
  margin: 0 0 16px;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2vw, 31px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  min-height: 2.16em; /* two lines, so the paths below line up */
  color: var(--white);
}

[data-theme="light"] .sv4-need__q {
  color: var(--black) !important;
}

.sv4-need__lead {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow-bright) !important;
}

[data-theme="light"] .sv4-need__lead {
  color: var(--yellow-dark) !important;
}

.sv4-path {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sv4-path a {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--white);
  transition: color 0.2s ease;
}

.sv4-path a span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--yellow);
  font-family: "Antonio", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
}

.sv4-path a i {
  font-size: 11px;
  color: var(--yellow-bright);
  transition: transform 0.25s var(--transition-smooth);
}

.sv4-path a:hover {
  color: var(--yellow-bright);
}

.sv4-path a:hover i {
  transform: translateX(4px);
}

[data-theme="light"] .sv4-path,
[data-theme="light"] .sv4-path a {
  border-color: var(--border-strong);
}

[data-theme="light"] .sv4-path a,
[data-theme="light"] .sv4-path a:hover {
  color: var(--black);
}

[data-theme="light"] .sv4-path a i {
  color: var(--black);
}

/* light mode: the timeline and the closing section share the surface colour */
[data-theme="light"] .ab4-steps + .cta4 {
  border-top: 1px solid var(--border);
}

@media (max-width: 991.98px) {
  .sv4-needs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }
}

@media (max-width: 575.98px) {
  /* "Six services." fills a phone line; keep only the second picture */
  .sv4-hero .ab4-pic--1 {
    display: none;
  }

  .sv4-needs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .sv4-needs::-webkit-scrollbar {
    display: none;
  }

  .sv4-need {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}

/* careers: the "Apply" link on each role */
.cr3-role a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow-bright);
}

.cr3-role a i {
  transition: transform 0.25s var(--transition-smooth);
}

.cr3-role a:hover {
  color: var(--yellow-bright);
}

.cr3-role a:hover i {
  transform: translateX(4px);
}

[data-theme="light"] .cr3-role a {
  color: var(--black);
}

/* ───────────────────────── PROJECTS ───────────────────────── */
.pg3-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.pg3-filters .filter-btn {
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
}

.pg3-filters .filter-btn:hover,
.pg3-filters .filter-btn.is-active {
  border-color: var(--yellow-bright);
  background: var(--yellow-bright);
  color: var(--black);
}

[data-theme="light"] .pg3-filters .filter-btn {
  border-color: var(--border-strong);
  color: var(--muted);
}

[data-theme="light"] .pg3-filters .filter-btn:hover,
[data-theme="light"] .pg3-filters .filter-btn.is-active {
  border-color: var(--black);
  background: var(--black);
  color: var(--yellow-bright);
}

/* the filter row: project types on the left, the two countries on the right */
.pg3-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 32px;
  margin-bottom: 28px;
}

.pg3-bar .pg3-filters {
  margin-bottom: 0;
}

.pg3-countries {
  flex-shrink: 0;
  flex-wrap: nowrap;
}

/* same square chip as the type filter, with the flag in front of the name */
.pg3-filters .pg3-country {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pg3-country img {
  display: block;
  width: 20px;
  height: 14px;
  object-fit: cover;
  flex-shrink: 0;
}

.pg3-grid .is-off-country {
  display: none !important;
}

@media (max-width: 991.98px) {
  .pg3-bar {
    flex-direction: column;
  }
}

.pg3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.pg3-grid .wg-tile {
  aspect-ratio: 4 / 3;
}

.pg3-grid .wg-tile img {
  height: 100%;
}

/* ───────────────────────── SERVICE DETAIL ───────────────────────── */
.sd3-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.sd3-intro p {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.75;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.72) !important;
}

[data-theme="light"] .sd3-intro p {
  color: var(--muted) !important;
}

.sd3-fit {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 22px !important;
  font-size: 15px !important;
  max-width: 52ch;
}

.sd3-fit i {
  color: var(--yellow-bright);
  margin-top: 4px;
}

[data-theme="light"] .sd3-fit i {
  color: var(--yellow-dark);
}

.sd3-fit b {
  color: var(--white);
  font-weight: 600;
}

[data-theme="light"] .sd3-fit b {
  color: var(--black);
}

.sd3-cta {
  margin-top: 28px;
}

.sd3-box {
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 26px 28px 10px;
}

[data-theme="light"] .sd3-box {
  border-color: var(--border-strong);
  background: var(--surface);
}

.sd3-box h3 {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  color: var(--white);
}

[data-theme="light"] .sd3-box h3 {
  color: var(--black) !important;
}

.sd3-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sd3-box li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .sd3-box li {
  border-top-color: var(--border);
  color: var(--black);
}

.sd3-box li i {
  color: var(--yellow-bright);
  margin-top: 4px;
  font-size: 13px;
}

[data-theme="light"] .sd3-box li i {
  color: var(--yellow-dark);
}

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

/* ───────────────────────── PROJECT DETAIL ───────────────────────── */
/* Hero: one full-width picture (or video) under the nav, the brand plate
   lifted onto its lower edge beside the title, then one ruled row of facts
   (client, type, where with the flag, what we did). No boxes. */
/* .ph3.ph3--project: beats the tablet rule that gives every .ph3 a 120px top */
.ph3.ph3--project {
  padding-top: 0;
}

/* the nav sits on the picture here, so it stays white in light mode too until scrolled */
[data-theme="light"] body.home-v3.page-project-detail #mainNav:not(.navbar--scrolled) .nav-link,
[data-theme="light"] body.home-v3.page-project-detail #mainNav:not(.navbar--scrolled) #langToggle,
[data-theme="light"] body.home-v3.page-project-detail #mainNav:not(.navbar--scrolled) #themeToggle {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

[data-theme="light"] body.home-v3.page-project-detail #mainNav:not(.navbar--scrolled) .nav-logo img {
  filter: none !important;
}

[data-theme="light"] body.home-v3.page-project-detail #mainNav:not(.navbar--scrolled) .nav-toggle {
  border-color: rgba(255, 255, 255, 0.45) !important;
}

[data-theme="light"] body.home-v3.page-project-detail #mainNav:not(.navbar--scrolled) .nav-toggle span {
  background: #fff !important;
}

.pd3-hero__media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: min(72vh, 720px);
  min-height: 320px;
  overflow: hidden;
  background: #000;
}

.pd3-hero__media img,
.pd3-hero__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* projects that only have a logo plate: show it whole, not blown up */
.pd3-hero__media.is-plate img {
  object-fit: contain;
}

/* keeps the white nav readable over a bright picture */
.pd3-hero__media::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 180px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

.pd3-hero__band {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr) auto;
  gap: 20px 40px;
  align-items: start;
}

/* no plate, or the hero already is the plate: the title takes the first column */
.pd3-hero__band.is-nobrand {
  grid-template-columns: minmax(0, 1fr) auto;
}

.pd3-hero__brand[hidden] {
  display: none;
}

/* the plate sits half on the picture, half on the page */
.pd3-hero__brand {
  position: relative;
  z-index: 2;
  margin-top: -64px;
}

.pd3-hero__brand img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 6px var(--black);
}

[data-theme="light"] .pd3-hero__brand img {
  box-shadow: 0 0 0 6px var(--white);
}

.pd3-hero__text {
  padding-top: 26px;
}

.pd3-hero__text .ph3-crumb {
  margin-bottom: 14px;
}

.ph3--project .ph3-title {
  font-size: clamp(36px, 4.8vw, 68px);
  max-width: 20ch;
}

/* one or two lines, never more */
.ph3--project .ph3-sub {
  margin-top: 14px;
  max-width: 60ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.pd3-hero__cta {
  align-self: end;
  padding: 26px 0 4px;
}

.pd3-hero__cta .hero-cta {
  margin-top: 0;
  white-space: nowrap;
}

/* facts row: every cell has its own rule on top, so wrapped rows stay tidy */
.pd3-meta {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 20px 32px;
}

.pd3-chip {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.pd3-chip[hidden] {
  display: none;
}

.pd3-chip--did {
  grid-column: span 2;
}

[data-theme="light"] .pd3-chip {
  border-top-color: var(--border-strong);
}

.pd3-chip small {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow-bright);
}

[data-theme="light"] .pd3-chip small {
  color: var(--yellow-dark);
}

.pd3-chip b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0.03em;
  color: var(--white);
}

[data-theme="light"] .pd3-chip b {
  color: var(--black);
}

/* the country flag comes from flagcdn.com */
.pd3-flag {
  flex: none;
  width: 24px;
  height: 18px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.pd3-flag[hidden] {
  display: none;
}

[data-theme="light"] .pd3-flag {
  border-color: var(--border-strong);
}

.pd3-gallery {
  columns: 2;
  column-gap: 14px;
}

.pd3-gallery img {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  break-inside: avoid;
  background: #111;
  cursor: zoom-in;
  transition: opacity 0.2s ease !important;
}

.pd3-gallery img:hover,
.pd3-gallery img:focus-visible {
  opacity: 0.88;
  outline: none;
}

.pd3-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .pd3-nav {
  border-top-color: var(--border-strong);
}

.pd3-nav a {
  display: grid;
  gap: 6px;
  padding: 24px 0;
  color: inherit;
}

.pd3-nav__next {
  text-align: right;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  padding-left: 24px;
}

[data-theme="light"] .pd3-nav__next {
  border-left-color: var(--border-strong);
}

.pd3-nav small {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow-bright);
}

[data-theme="light"] .pd3-nav small {
  color: var(--yellow-dark);
}

.pd3-nav b {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: 0.02em;
  color: var(--white);
  transition: color 0.2s ease;
}

.pd3-nav a:hover b {
  color: var(--yellow-bright);
}

[data-theme="light"] .pd3-nav b {
  color: var(--black);
}

[data-theme="light"] .pd3-nav a:hover b {
  color: var(--yellow-dark);
}

/* ───────────────────────── CAREERS ───────────────────────── */
.cr3-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .cr3-roles {
  border-top-color: var(--border-strong);
}

.cr3-role {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 16px 28px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .cr3-role {
  border-bottom-color: var(--border-strong);
}

.cr3-role b {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.02em;
  color: var(--white);
}

[data-theme="light"] .cr3-role b {
  color: var(--black);
}

.cr3-role span {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .cr3-role span {
  color: var(--muted);
}

.cr3-apply {
  background: #0a0a0a;
  padding: clamp(56px, 7vw, 96px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .cr3-apply {
  background: var(--surface) !important;
  border-top-color: var(--border);
}

.cr3-apply-grid,
.ct3-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.cr3-apply-alt {
  margin-top: 18px !important;
  font-size: 15px;
}

.cr3-apply-alt a,
.ct3-email a {
  color: var(--yellow-bright);
  font-weight: 600;
}

[data-theme="light"] .cr3-apply-alt a {
  color: var(--black);
  border-bottom: 1.5px solid var(--yellow);
}

.cr3-apply .form-wrapper,
.ct3-form {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: clamp(22px, 3vw, 36px);
  background: var(--black);
}

[data-theme="light"] .cr3-apply .form-wrapper,
[data-theme="light"] .ct3-form {
  border-color: var(--border);
  background: #ffffff;
}

.cr3-apply .contact-success,
.ct3-form .contact-success {
  display: none;
  text-align: center;
  padding: 24px 0;
}

.cr3-apply .contact-success.is-visible,
.ct3-form .contact-success.is-visible {
  display: block;
}

.career-input.is-invalid {
  border-color: #ff6b6b !important;
}

/* ───────────────────────── CONTACT ───────────────────────── */
.ct3-hours {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
}

.ct3-hours i {
  color: var(--yellow-bright);
}

[data-theme="light"] .ct3-hours {
  border-color: var(--border-strong);
  color: var(--muted);
}

[data-theme="light"] .ct3-hours i {
  color: var(--yellow-dark);
}

.ct3-offices .cta4-offices {
  grid-template-columns: 1fr;
  margin-top: 16px;
}

.ct3-offices .cta4-office + .cta4-office {
  border-left: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .ct3-offices .cta4-office + .cta4-office {
  border-top-color: var(--border);
}

.ct3-email {
  text-align: left;
}

.ct3-form-title {
  margin-bottom: 6px !important;
}

.ct3 .facts-sub {
  margin-bottom: 22px;
}

.ct3 .required {
  color: var(--yellow-bright);
}

[data-theme="light"] .ct3 .required {
  color: var(--yellow-dark);
}

/* theme.css decorates the old contact section with a pseudo-element; not here */
#contact-main.ct3::before {
  display: none !important;
}

/* ───────────────────────── RESPONSIVE ───────────────────────── */
@media (max-width: 991.98px) {
  .ph3 {
    padding-top: 120px;
  }

  .ph3-inner,
  .sd3-grid,
  .cr3-apply-grid,
  .ct3-grid {
    grid-template-columns: 1fr;
  }

  .ph3-aside {
    justify-self: start;
  }

  .pd3-meta {
    justify-content: flex-start;
  }

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

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

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

@media (max-width: 575.98px) {
  .ph3-title {
    font-size: clamp(38px, 11vw, 56px);
  }

  .who3-facts--four,
  .pg3-grid {
    grid-template-columns: 1fr;
  }

  .pd3-gallery {
    columns: 1;
  }

  .pd3-nav {
    grid-template-columns: 1fr;
  }

  .pd3-nav__next {
    border-left: 0;
    padding-left: 0;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .cr3-role {
    grid-template-columns: 1fr;
    gap: 6px;
  }

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

  .form-group.full-width {
    grid-column: span 1;
  }

  .ct3-hours {
    font-size: 12.5px;
  }
}

/* style.css gives every <span> the Poppins face; headline wrappers on the detail pages must keep Antonio */
.ph3-title span,
.facts-title span,
.pd3-chip b span {
  font-family: inherit;
  letter-spacing: inherit;
}

/* stacked intros above the two forms */
.cr3-apply-copy .facts-sub,
.ct3-form .facts-sub {
  margin-top: 10px;
}

/* ═════════════════════════════════════════════════════════════════════
   PORTFOLIO CONTENT — blocks fed by the two portfolio decks
   (_build/portfolio/). Home logo wall, wide project tiles, the project
   detail extras (numbers, click-to-play videos, links), About's
   vision and mission and sectors, Services' capability list.
   ═════════════════════════════════════════════════════════════════════ */

/* home: the client logos are black 16:9 plates; show them whole */
.wall-grid--logos {
  grid-template-columns: repeat(6, 1fr);
}

.wall-grid--logos img {
  object-fit: contain;
  opacity: 0.9;
}

@media (max-width: 991.98px) {
  .wall-grid--logos {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 575.98px) {
  .wall-grid--logos {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* projects: a few wide tiles break the rhythm of the grid */
.pg3-grid {
  grid-auto-flow: dense;
}

.pg3-grid .projects-grid-item.is-wide {
  grid-column: span 2;
}

/* a wide tile takes its height from the normal tile beside it */
.pg3-grid .projects-grid-item.is-wide {
  position: relative;
  min-height: 220px;
}

.pg3-grid .is-wide .wg-tile {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

.pg3-grid.is-filtered .projects-grid-item.is-wide {
  grid-column: auto;
}

.pg3-grid.is-filtered .is-wide .wg-tile {
  position: relative;
  aspect-ratio: 4 / 3;
}

.pg3-play {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.72);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

.pg3-play i {
  font-size: 9px;
  color: var(--yellow-bright);
}

@media (max-width: 575.98px) {
  .pg3-grid .projects-grid-item.is-wide {
    grid-column: auto;
  }

  .pg3-grid .is-wide .wg-tile {
    position: relative;
    aspect-ratio: 4 / 3;
  }
}

/* project detail: numbers, videos, links */
.pd3-extra {
  display: grid;
  gap: 48px;
  margin: 0 0 48px;
}

.pd3-block > .label-eyebrow {
  margin-bottom: 16px;
  color: var(--yellow-bright);
}

[data-theme="light"] .pd3-block > .label-eyebrow {
  color: var(--yellow-dark);
}

.pd3-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pd3-stats li {
  display: grid;
  gap: 6px;
  padding: 22px 20px 0 0;
}

.pd3-stats li + li {
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .pd3-stats,
[data-theme="light"] .pd3-stats li + li {
  border-color: var(--border-strong);
}

.pd3-stats b {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 0.95;
  color: var(--white);
}

.pd3-stats span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}

[data-theme="light"] .pd3-stats b {
  color: var(--black);
}

[data-theme="light"] .pd3-stats span {
  color: var(--muted);
}

.pd3 .pd3-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="light"] .pd3 .pd3-note {
  color: var(--muted) !important;
}

/* click-to-play videos: a poster picture with a play button; nothing loads until the card is pressed.
   Drive videos use the Drive thumbnail, Instagram reels use the project pictures (Instagram has no public thumbnail). */
.pd3-media {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.pd3-video {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pd3-video--wide,
.pd3-video--doc {
  grid-column: span 2;
}

.pd3-video__play,
.pd3-video__frame {
  display: block;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #141414;
}

.pd3-video__play {
  position: relative;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  color: var(--white);
  font-family: inherit;
  text-align: left;
  transition: border-color 0.25s ease;
}

.pd3-video--ig .pd3-video__play {
  aspect-ratio: 4 / 5;
}

.pd3-video--ig .pd3-video__frame {
  height: 600px;
}

.pd3-video--wide .pd3-video__frame {
  aspect-ratio: 16 / 9;
  height: auto;
}

.pd3-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--transition-smooth) !important;
}

/* shade so the caption reads on any picture */
.pd3-video__play::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0.1));
  pointer-events: none;
}

.pd3-video__play:hover,
.pd3-video__play:focus-visible {
  border-color: var(--yellow-bright);
  outline: none;
}

.pd3-video__play:hover .pd3-video__poster {
  transform: scale(1.04);
}

.pd3-video__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--yellow-bright);
  color: var(--black);
  font-size: 20px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--transition-smooth);
}

.pd3-video__icon i {
  margin-left: 3px;
}

.pd3-video__play:hover .pd3-video__icon {
  transform: translate(-50%, -50%) scale(1.08);
}

.pd3-video__cap {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  display: grid;
  gap: 4px;
}

.pd3-video__play b {
  font-family: "Antonio", sans-serif;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--white);
}

.pd3-video__play small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .pd3-video__play,
[data-theme="light"] .pd3-video__frame {
  border-color: var(--border);
}

/* theme.css inverts and dims every iframe in dark mode (meant for maps); the videos must show as they are */
[data-theme="dark"] body.home-v3 section.section-py iframe,
[data-theme="dark"] body.home-v3 .pd3-video__frame {
  filter: none !important;
  opacity: 1 !important;
}

.pd3-video__out {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.pd3-video__out:hover {
  color: var(--yellow-bright);
}

[data-theme="light"] .pd3-video__out {
  color: var(--muted);
}

[data-theme="light"] .pd3-video__out:hover {
  color: var(--black);
}

.pd3-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.pd3-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.pd3-links a i {
  font-size: 15px;
  color: var(--yellow-bright);
}

.pd3-links a:hover {
  border-color: var(--yellow-bright);
  color: var(--yellow-bright);
}

[data-theme="light"] .pd3-links a {
  border-color: var(--border-strong);
  color: var(--black);
}

[data-theme="light"] .pd3-links a i {
  color: var(--black);
}

@media (max-width: 575.98px) {
  .pd3-video--wide,
  .pd3-video--doc {
    grid-column: auto;
  }

  .pd3-stats li,
  .pd3-stats li + li {
    padding: 18px 0 0;
    border-left: 0;
  }
}

/* about: vision and mission, quoted */
.ab4-vm {
  padding: clamp(64px, 7vw, 100px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .ab4-vm {
  border-top-color: var(--border);
}

.ab4-vm-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(28px, 4vw, 64px);
  margin-top: 28px;
}

.ab4-vm-item {
  margin: 0;
  padding-top: 20px;
  border-top: 3px solid var(--yellow);
}

.ab4-vm-item figcaption {
  margin-bottom: 14px;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow-bright);
}

[data-theme="light"] .ab4-vm-item figcaption {
  color: var(--yellow-dark);
}

.ab4-vm-item blockquote {
  margin: 0;
}

.ab4 .ab4-vm-item p {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--white) !important;
}

[data-theme="light"] .ab4 .ab4-vm-item p {
  color: var(--black) !important;
}

/* about: the sectors we work in */
.ab4-tags {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .ab4-tags {
  border-top-color: var(--border-strong);
}

.ab4 .ab4-tags__lead {
  margin: 0 0 18px;
  max-width: 60ch;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.62) !important;
}

[data-theme="light"] .ab4 .ab4-tags__lead {
  color: var(--muted) !important;
}

.ab4-tags__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}

.ab4-tags__list li {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.2;
  color: var(--white);
}

.ab4-tags__list li:not(:last-child)::after {
  content: "/";
  margin: 0 14px;
  color: var(--yellow-bright);
}

[data-theme="light"] .ab4-tags__list li {
  color: var(--black);
}

[data-theme="light"] .ab4-tags__list li:not(:last-child)::after {
  color: var(--yellow-dark);
}

/* services: the capability list from the decks */
.sv4-all {
  padding: clamp(72px, 8vw, 112px) 0;
}

.sv4-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .sv4-cols {
  border-top-color: var(--border-strong);
}

.sv4-col {
  padding: 28px 24px 8px 0;
}

.sv4-col + .sv4-col {
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .sv4-col + .sv4-col {
  border-left-color: var(--border);
}

.sv4-col__n {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--yellow-bright);
}

[data-theme="light"] .sv4-col__n {
  color: var(--yellow-dark);
}

.sv4-col h3 {
  margin: 6px 0 16px;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 2.4vw, 34px);
  color: var(--white);
}

[data-theme="light"] .sv4-col h3 {
  color: var(--black) !important;
}

.sv4-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sv4-col li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.78);
}

[data-theme="light"] .sv4-col li {
  border-bottom-color: var(--border);
  color: var(--black);
}

@media (max-width: 991.98px) {
  .ab4-vm-grid {
    grid-template-columns: 1fr;
  }

  .sv4-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sv4-col:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 575.98px) {
  .sv4-cols {
    grid-template-columns: 1fr;
  }

  .sv4-col,
  .sv4-col + .sv4-col {
    padding: 24px 0 8px;
    border-left: 0;
  }
}

/* neighbouring sections that share a background get a thin rule between them */
.ab4-vm + .ab4-rules,
.sv4-start + .sv4-all {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .ab4-vm + .ab4-rules,
[data-theme="light"] .sv4-start + .sv4-all {
  border-top-color: var(--border);
}

/* ───────────────────────── PROJECT DETAIL: lightbox ───────────────────────── */
/* v3.js builds this once; the gallery pictures open in it, arrows / keys / swipe move between them */
.pd3-lb {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 72px 84px;
  background: rgba(0, 0, 0, 0.94);
}

.pd3-lb[hidden] {
  display: none;
}

.pd3-lb__stage {
  margin: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.pd3-lb__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  user-select: none;
  -webkit-user-drag: none;
}

.pd3-lb__btn {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pd3-lb__btn:hover,
.pd3-lb__btn:focus-visible {
  background: var(--yellow-bright);
  border-color: var(--yellow-bright);
  color: var(--black);
  outline: none;
}

.pd3-lb__close {
  top: 20px;
  right: 20px;
}

.pd3-lb__prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.pd3-lb__next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.pd3-lb__count {
  position: absolute;
  left: 24px;
  bottom: 22px;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.7);
}

.pd3-lb.is-single .pd3-lb__prev,
.pd3-lb.is-single .pd3-lb__next,
.pd3-lb.is-single .pd3-lb__count {
  display: none;
}

body.pd3-lb-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .pd3-lb {
    animation: pd3-lb-in 0.25s ease;
  }

  .pd3-lb__stage img {
    animation: pd3-lb-img 0.3s ease;
  }

  @keyframes pd3-lb-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes pd3-lb-img {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: none; }
  }
}

/* ───────────────────────── PROJECT DETAIL: responsive ───────────────────────── */
@media (max-width: 991.98px) {
  .pd3-hero__band,
  .pd3-hero__band.is-nobrand {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .pd3-hero__brand {
    width: 180px;
    margin-top: -52px;
  }

  .pd3-hero__text {
    padding-top: 22px;
  }

  .pd3-hero__cta {
    justify-self: start;
    padding: 22px 0 0;
  }
}

@media (max-width: 767.98px) {
  .pd3-hero__media {
    aspect-ratio: 4 / 3;
    min-height: 0;
    max-height: 60vh;
  }

  .pd3-lb {
    padding: 72px 16px 84px;
  }

  .pd3-lb__prev,
  .pd3-lb__next {
    top: auto;
    bottom: 16px;
    transform: none;
  }

  .pd3-lb__prev {
    left: 16px;
  }

  .pd3-lb__next {
    right: 16px;
  }

  .pd3-lb__count {
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
  }
}

@media (max-width: 575.98px) {
  .pd3-hero__brand {
    width: 150px;
    margin-top: -44px;
  }

  .pd3-meta {
    grid-template-columns: 1fr 1fr;
    gap: 20px 20px;
  }

  .pd3-chip--did {
    grid-column: 1 / -1;
  }

  .pd3-video--ig .pd3-video__frame {
    height: 560px;
  }
}

/* ───────── home: Trusted by — one column per country, side by side ─────────
   v3.js counts the logos in each country and shares the columns out so the
   groups end at about the same height (see "Trusted by" in v3.js).
   Works for any number of logos and countries. */
.wall-split {
  --line: rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 36px);
  margin-top: 30px;
}

.wall-group {
  min-width: 0;
  container-type: inline-size;
}

.wall-country {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 0 16px;
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white) !important;
}

.wall-country .flag {
  width: 40px;
  height: 27px;
  border-radius: 4px;
}

/* big yellow number, small "brands" after it */
.wall-count {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 1.35em;
  color: var(--yellow-bright);
}

.wall-count::after {
  content: "brands";
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
}

@container (max-width: 260px) {
  .wall-count::after {
    display: none;
  }
}

/* flat grid, thin lines, and a soft yellow glow that follows the mouse */
.wall-grid--split {
  position: relative;
  isolation: isolate;
  grid-template-columns: repeat(var(--cols, 6), 1fr);
  gap: 0;
  background: #000;
  border: 0;
  border-left: 1px solid var(--line);
}

.wall-grid--split::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 247, 74, 0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.wall-grid--split:hover::before {
  opacity: 1;
}

.wall-grid--split li {
  position: relative;
  overflow: hidden;
  background: transparent;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: scale 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, background-color 0.2s ease;
}

/* the plates are logos on black: "screen" drops the black so the glow shows.
   Logos are fully visible all the time. */
.wall-grid--split img {
  mix-blend-mode: screen;
  opacity: 1;
}

/* hover: the tile grows out of the grid and lifts above its neighbours.
   Uses the "scale" property so it doesn't clash with the scroll-in transform. */
.wall-grid--split li:hover {
  z-index: 3;
  scale: 1.18;
  background: #000;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 28px rgba(255, 247, 74, 0.35);
}

.wall-grid--split li:hover img {
  opacity: 1;
  transform: none;
}

/* yellow frame on hover */
.wall-grid--split li::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px var(--yellow-bright);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.wall-grid--split li:hover::after {
  opacity: 1;
}

/* brand name slides up on hover (v3.js copies it from the image alt) */
.wall-grid--split li[data-name]::before {
  content: attr(data-name);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 6px 10px;
  background: var(--yellow-bright);
  color: #000;
  font: 700 11px/1.2 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
}

.wall-grid--split li:hover::before {
  opacity: 1;
  transform: none;
}

/* scroll-in: v3.js adds .is-ready, then .is-in when the section shows */
.wall-split.is-ready .wall-country {
  --bar: 0;
}

.wall-split.is-ready .wall-grid--split li {
  opacity: 0;
  transform: translateY(18px);
}

.wall-split.is-in .wall-country {
  --bar: 1;
}

.wall-split.is-in .wall-grid--split li {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    scale 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, background-color 0.2s ease;
  transition-delay: calc(var(--i, 0) * 35ms), calc(var(--i, 0) * 35ms), 0s, 0s, 0s;
}

/* tablet and phone: countries stack, fixed columns */
@media (max-width: 991.98px) {
  .wall-split {
    gap: 40px;
  }

  .wall-grid--split {
    --cols: 4 !important;
  }
}

@media (max-width: 420px) {
  .wall-grid--split {
    --cols: 3 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wall-split.is-ready .wall-country {
    --bar: 1;
  }

  .wall-split.is-ready .wall-grid--split li {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wall-grid--split li:hover img {
    transform: none;
  }

  .wall-grid--split li:hover {
    scale: none;
  }
}

/* ───────── home: "Two offices" card — stands apart from the other facts ─────────
   No yellow icon box (the flags got lost on it). Big flags with the city
   names and a faint glow of each flag's colour. */
.who3-facts li.who3-offices {
  position: relative;
  overflow: hidden;
  gap: 14px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(206, 17, 38, 0.16), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(0, 115, 47, 0.2), transparent 55%),
    #141414;
}

.who3-cities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.who3-city {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.who3-flag {
  flex: none;
  width: 42px;
  height: 28px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.35s ease;
}

.who3-city div {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}

.who3-city strong {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--white);
  white-space: nowrap;
}

.who3-city small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* no hover effect on this card */
.who3-facts li.who3-offices:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .who3-facts li.who3-offices:hover {
  border-color: var(--border);
}

[data-theme="light"] .who3-facts li.who3-offices {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(206, 17, 38, 0.1), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(0, 115, 47, 0.12), transparent 55%),
    var(--surface);
}

[data-theme="light"] .who3-city {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--border);
}

[data-theme="light"] .who3-city strong {
  color: var(--black);
}

[data-theme="light"] .who3-city small {
  color: var(--muted);
}
.ab4-say p {
    margin: 0;
    font: inherit;
}

.ab4-say span {
    font-size: inherit !important;
    font-family: inherit !important;
}
/* الصورة ياخدوا نفس استايل الـ svg (.flag / .flag--sm الأصليين) */
img.flag {
    display: inline-block;
    object-fit: cover;
    object-position: center;
    flex: none;
    vertical-align: middle;
    max-width: none;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.3);
}

    img.flag.flag--sm {
        width: 18px !important;
        height: 12px !important;
    }

.footer-social-tag img.flag {
    width: 18px;
    height: 12px;
}
.footer-social-tag {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .footer-social-tag img.flag {
        display: inline-block !important;
        margin: 0 !important;
    }