/* Shared portfolio cards: no background photography or competing metric blocks. */
.alfa-site .legacy-case-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.alfa-site .legacy-case-meta > span { padding: 9px 16px; background: #f5f5f7; border-radius: 30px; color: #48474d; }
.alfa-site .legacy-case-body { max-width: 1000px; margin-inline: auto; color: #48474d; font-size: 18px; line-height: 1.65; overflow-wrap: anywhere; }
.alfa-site .legacy-case-body h2 { font-size: clamp(25px, 3vw, 38px); line-height: 1.2; margin: 48px 0 22px; color: #48474d; }
.alfa-site .legacy-case-body h3 { font-size: clamp(22px, 2.5vw, 29px); line-height: 1.3; margin: 32px 0 16px; color: #48474d; }
.alfa-site .legacy-case-body p { margin: 0 0 20px; }
.alfa-site .legacy-case-body ul, .alfa-site .legacy-case-body ol { padding-left: 24px; margin: 20px 0; }
.alfa-site .legacy-case-body li { margin-bottom: 10px; }
.alfa-site .legacy-case-body img { display: block; max-width: 100%; width: auto; height: auto; margin: 24px auto; border-radius: 12px; }
.alfa-site .legacy-case-gallery figure { margin: 0 0 32px; }
.alfa-site .legacy-case-gallery img { width: 100%; }
.alfa-site .legacy-case-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 48px; }
@media (max-width: 760px) { .alfa-site .legacy-case-body { font-size: 16px; } .alfa-site .legacy-case-meta { margin-bottom: 28px; } }
.alfa-site .client-logo-strip span { display: flex; flex: 0 0 160px; width: 160px; height: 76px; align-items: center; justify-content: center; margin-inline: 22px; }
.alfa-site .client-logo-strip img { display: block; width: 140px; height: 60px; object-fit: contain; opacity: 1; filter: none; }
.alfa-site .client-logo-strip:hover > div { animation-play-state: paused; }
.alfa-site .client-logo-strip > div { animation-duration: 65s; }
@media (prefers-reduced-motion: reduce) {
  .alfa-site .client-logo-strip { overflow-x: auto; }
  .alfa-site .client-logo-strip > div { animation: none; }
  .alfa-site .client-logo-strip .client-logo-copy { display: none; }
}
.alfa-site .alfa-brand-case,
.alfa-site a.alfa-brand-case:hover,
.alfa-site a.alfa-brand-case:focus-visible {
  color: #fff;
  background-image: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 28px;
  border-radius: 22px;
  text-decoration: none;
  min-width: 0;
  isolation: isolate;
}
.alfa-site .catalog-case-card.alfa-brand-case { display: inline-flex; }
.alfa-site .alfa-brand-case::before,
.alfa-site .alfa-brand-case::after { content: none; }
.alfa-site .alfa-brand-case.is-card-only:hover { transform: none; box-shadow: none; }
.alfa-site a.alfa-brand-case:focus-visible { outline: 3px solid #45454d; outline-offset: 4px; }
.alfa-site .brand-case-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 52px; }
.alfa-site .brand-case-logo { display: flex; flex: 0 1 140px; min-width: 70px; width: 140px; height: 48px; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 9px; }
.alfa-site .brand-case-logo.on-light { background: #fff; }
.alfa-site .brand-case-logo.on-dark { background: #252830; }
.alfa-site .brand-case-logo img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 1; filter: none; transform: none; }
.alfa-site .brand-case-name { color: #fff; font-size: 21px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.alfa-site .brand-case-domain { flex: 0 1 45%; min-width: 0; text-align: right; font-size: 12px; line-height: 1.45; color: #fff; overflow-wrap: anywhere; padding-top: 3px; }
.alfa-site .alfa-brand-case .brand-case-title { color: #fff; font-size: clamp(24px, 2.15vw, 32px); font-weight: 750; line-height: 1.14; letter-spacing: -.025em; text-transform: none; margin: 30px 0 16px; max-width: 100%; overflow-wrap: break-word; }
.alfa-site .alfa-brand-case .brand-case-description { color: #fff; font-size: 15px; font-weight: 400; line-height: 1.55; margin: 0 0 30px; opacity: 1; }
.alfa-site .brand-case-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding: 0; }
.alfa-site .brand-case-tags span { border: 0; box-shadow: none; background: rgba(0,0,0,.12); color: #fff; border-radius: 100px; padding: 7px 12px; font-size: 12px; line-height: 1.35; max-width: 100%; overflow-wrap: anywhere; }
.alfa-site .brand-case-link { display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 13px; font-weight: 600; margin-top: 22px; }
@media (max-width: 767px) {
  .alfa-site .alfa-brand-case { padding: 24px; border-radius: 20px; }
  .alfa-site .alfa-brand-case .brand-case-title { font-size: 26px; margin-top: 26px; }
  .alfa-site .brand-case-logo { flex-basis: 120px; width: 120px; height: 44px; }
  .alfa-site .brand-case-domain { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .alfa-site .alfa-brand-case, .alfa-site .brand-case-link { transition: none; }
  .alfa-site a.alfa-brand-case:hover { transform: none; }
}

/* Only complete cases have this link. No layout jump on reveal. */
.alfa-site .brand-case-link { transition: opacity 180ms ease, transform 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .alfa-site .brand-case-link { opacity: 0; transform: translateY(7px); }
  .alfa-site .alfa-brand-case:hover .brand-case-link,
  .alfa-site .alfa-brand-case:focus-visible .brand-case-link { opacity: 1; transform: none; }
}

/* Inner mastheads share the original Alfa arrow, not polygon decorations. */
/* One layout contract for every inner-page template; never vertically center copy. */
.alfa-site .inner-page > .inner-hero {
  display: block; width: calc(100% - 40px); max-width: var(--wide);
  margin: 0 auto; padding: 80px 120px; min-height: 368px;
}
.alfa-site .inner-page .inner-hero-copy {
  width: 100%; max-width: none; min-height: 0; margin: 0; padding: 0;
  justify-content: flex-start; align-items: flex-start; gap: 0;
}
.alfa-site .inner-page .inner-hero-copy > p {
  margin: 0 0 20px; padding: 0; font-size: 16px; line-height: 24px;
  height: 24px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alfa-site .inner-page .inner-hero-copy h1 {
  margin: 0; padding: 0; max-width: 100%; font-size: clamp(46px, 4.5vw, 72px); line-height: 1.1;
  overflow-wrap: anywhere; hyphens: auto;
}
.alfa-site .inner-page .inner-hero-copy > span { margin-top: 20px; }
@media (max-width: 1060px) {
  .alfa-site .inner-page > .inner-hero { padding: 64px 72px; }
}
@media (max-width: 760px) {
  .alfa-site .inner-page > .inner-hero { width: calc(100% - 28px); padding: 40px 20px; min-height: 246px; }
  .alfa-site .inner-page .inner-hero-copy > p { font-size: 14px; line-height: 20px; height: 20px; margin-bottom: 16px; }
  .alfa-site .inner-page .inner-hero-copy h1 { font-size: clamp(28px, 8vw, 35px); line-height: 1.1; }
  .alfa-site .inner-page .inner-hero-copy > span { margin-top: 16px; }
}
.alfa-site .inner-hero { color: var(--hero-ink, #fff); overflow: visible; --plane-overhang: 164px; --plane-top: 24px; }
.alfa-site .inner-hero::before,
.alfa-site .inner-hero::after {
  content: ""; position: absolute; inset: var(--plane-top) 24px auto auto;
  width: min(47%, 672px); height: calc(100% + var(--plane-overhang) - var(--plane-top));
  background: url('../images/hero-plane.svg') right bottom / contain no-repeat;
  transform: none; pointer-events: none; z-index: 0;
}
.alfa-site .inner-hero::before { clip-path: inset(0 0 var(--plane-overhang) 0); }
.alfa-site .inner-hero::after {
  background-image: url('../images/hero-plane-tail.svg');
  clip-path: inset(calc(100% - var(--plane-overhang)) 0 0 0);
}
/* The two layers use the same contain box, so the SVG stays square at any
   banner height. Following content must paint above the decorative tail. */
.alfa-site .inner-hero + * { position: relative; z-index: 1; }
.alfa-site .inner-hero .inner-hero-copy :is(h1, h2, h3, p),
.alfa-site .inner-hero .inner-hero-copy > span,
.alfa-site .inner-hero .service-hero-extra,
.alfa-site .inner-hero .service-hero-extra strong { color: inherit; }
.alfa-site .inner-hero .dark-button,
.alfa-site .inner-hero .dark-button:hover,
.alfa-site .inner-hero .dark-button:focus-visible { color: #fff; }
.alfa-site .section-dark :is(h1, h2, h3, h4) { color: #fff; }
@media (max-width: 767px) {
  .alfa-site .inner-hero { --plane-overhang: 72px; --plane-top: 16px; }
  .alfa-site .inner-hero::before,
  .alfa-site .inner-hero::after { width: 68%; right: 12px; }
}