/**
 * Bridge Detailing.
 */

.ai-bridge-overview {
  align-items: stretch;
  display: grid;
  gap: 72px;
  grid-template-columns: 1.08fr .92fr;
}

.ai-bridge-scope {
  background: var(--ai-navy);
  border-radius: 22px;
  color: var(--ai-color-white);
  display: flex;
  flex-direction: column;
  margin-top: 0;
  padding: 32px 30px;
}

.ai-bridge-scope > p {
  color: var(--ai-color-accent-inverse);
  font-size: var(--ai-type-body-size);
  font-weight: 600;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.ai-bridge-scope ol {
  display: grid;
  flex: 1;
  grid-template-rows: repeat(4,1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ai-bridge-scope li {
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid;
  gap: 14px;
  grid-template-columns: 28px 1fr;
  padding: 17px 0;
}

.ai-bridge-scope li:last-child {
  padding-bottom: 0;
}

.ai-bridge-scope li > span {
  color: var(--ai-color-accent-inverse);
  font-family: var(--ai-data);
  font-size: var(--ai-type-body-size);
  padding-top: 2px;
}

.ai-bridge-scope strong, .ai-bridge-scope small {
  display: block;
}

.ai-bridge-scope strong {
  font-size: 14px;
  margin-bottom: 5px;
}

.ai-bridge-scope small {
  color: #aeb7c8;
  font-size: var(--ai-type-small-size);
  line-height: 1.5;
}

.ai-bridge-categories {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3,1fr);
  margin-top: 42px;
}

.ai-bridge-categories article {
  background: var(--ai-color-white);
  border: 1px solid var(--ai-line);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(31,40,86,.05);
  padding: 26px;
}

.ai-bridge-categories code {
  color: var(--ai-blue);
  display: block;
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 8px;
}

.ai-bridge-categories span {
  color: var(--ai-muted);
  display: block;
  font-size: var(--ai-type-label-size);
  line-height: 1.4;
  min-height: 26px;
  text-transform: uppercase;
}

.ai-bridge-categories h3 {
  font-size: 18px;
  margin: 19px 0 9px;
}

.ai-bridge-categories p {
  color: var(--ai-muted);
  font-size: var(--ai-type-body-size);
  line-height: 1.55;
  margin: 0;
}

.ai-bridge-standard-note {
  border-left: 3px solid var(--ai-blue);
  color: var(--ai-muted);
  font-size: var(--ai-type-label-size);
  line-height: 1.6;
  margin: 24px 0 0;
  max-width: 900px;
  padding: 4px 0 4px 16px;
}

.ai-bridge-projects {
  background: var(--ai-color-white);
}

.ai-bridge-case {
  background: var(--ai-color-white);
  border: 1px solid var(--ai-line);
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(31,40,86,.06);
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  margin-top: 46px;
  overflow: hidden;
}

.ai-bridge-case figure, .ai-bridge-project figure {
  background: var(--ai-color-white);
  margin: 0;
  position: relative;
}

.ai-bridge-case figure img {
  aspect-ratio: 16/10;
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.ai-bridge-case figcaption, .ai-bridge-project figcaption {
  background: rgba(17,20,61,.92);
  bottom: 18px;
  color: var(--ai-color-white);
  left: 18px;
  padding: 10px 14px;
  position: absolute;
}

.ai-bridge-case figcaption span, .ai-bridge-case figcaption strong {
  display: block;
}

.ai-bridge-case figcaption span, .ai-bridge-project figcaption {
  color: #b8c0ff;
  font-size: var(--ai-type-small-size);
}

.ai-bridge-case figcaption strong {
  font-size: var(--ai-type-small-size);
  margin-top: 3px;
}

.ai-bridge-facts {
  background: var(--ai-navy);
  color: var(--ai-color-white);
  padding: 34px;
}

.ai-bridge-facts > p {
  color: var(--ai-color-accent-inverse);
  font-size: var(--ai-type-body-size);
  font-weight: 600;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.ai-bridge-facts h3 {
  font-size: 23px;
  line-height: 1.25;
  margin: 0 0 22px;
}

.ai-bridge-facts dl {
  margin: 0;
}

.ai-bridge-facts dl div {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 13px 0;
}

.ai-bridge-facts dt {
  color: #aeb7c8;
  font-size: var(--ai-type-label-size);
  margin-bottom: 5px;
}

.ai-bridge-facts dd {
  font-size: var(--ai-type-small-size);
  line-height: 1.45;
  margin: 0;
}

.ai-bridge-facts code, .ai-bridge-project code {
  color: inherit;
  font-size: inherit;
}

.ai-bridge-project-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
}

.ai-bridge-project {
  background: var(--ai-color-white);
  border: 1px solid var(--ai-line);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(31,40,86,.05);
  overflow: hidden;
}

.ai-bridge-project figure img {
  aspect-ratio: 16/9;
  display: block;
  object-fit: contain;
  width: 100%;
}

.ai-bridge-project > div {
  padding: 26px;
}

.ai-bridge-project > div > span {
  color: var(--ai-blue);
  font-size: var(--ai-type-label-size);
  font-weight: 600;
  text-transform: uppercase;
}

.ai-bridge-project h3 {
  font-size: 21px;
  margin: 8px 0 20px;
}

.ai-bridge-project dl {
  display: grid;
  gap: 0 20px;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}

.ai-bridge-project dl div {
  border-top: 1px solid var(--ai-line);
  padding: 12px 0;
}

.ai-bridge-project dt {
  color: var(--ai-muted);
  font-size: var(--ai-type-label-size);
  margin-bottom: 5px;
}

.ai-bridge-project dd {
  font-size: var(--ai-type-small-size);
  line-height: 1.45;
  margin: 0;
}

.ai-bridge-logistics {
  align-items: stretch;
  display: grid;
  gap: 22px;
  grid-template-columns: .82fr 1.18fr;
  margin-top: 46px;
}

.ai-bridge-sequence {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  list-style: none;
  margin: 0;
  padding: 14px 26px;
}

.ai-bridge-sequence li {
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid;
  gap: 14px;
  grid-template-columns: 34px 1fr;
  padding: 20px 0;
}

.ai-bridge-sequence li:first-child {
  border-top: 0;
}

.ai-bridge-sequence code {
  color: var(--ai-color-accent-inverse);
  font-size: var(--ai-type-label-size);
  padding-top: 2px;
}

.ai-bridge-sequence strong {
  color: var(--ai-color-white);
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
}

.ai-bridge-sequence p {
  color: #aeb7c8;
  font-size: var(--ai-type-body-size);
  line-height: 1.55;
  margin: 0;
}

.ai-bridge-connection {
  border-radius: 20px;
  margin: 0;
  min-height: 500px;
  overflow: hidden;
  position: relative;
}

.ai-bridge-connection img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.ai-bridge-connection figcaption {
  background: linear-gradient(transparent,rgba(8,14,37,.94));
  bottom: 0;
  color: var(--ai-color-white);
  left: 0;
  padding: 80px 26px 24px;
  position: absolute;
  right: 0;
}

.ai-bridge-connection figcaption span, .ai-bridge-connection figcaption strong {
  display: block;
}

.ai-bridge-connection figcaption span {
  color: var(--ai-color-accent-inverse);
  font-size: var(--ai-type-small-size);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.ai-bridge-connection figcaption strong {
  font-size: var(--ai-type-small-size);
  line-height: 1.5;
  max-width: 620px;
}

.ai-bridge-deliverables {
  margin-top: 22px;
}

.ai-wide-model {
  border-radius: var(--ai-radius);
  margin: 48px 0 0;
  max-height: 520px;
  min-height: 420px;
  overflow: hidden;
  position: relative;
}

.ai-wide-model img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.ai-wide-model figcaption {
  background: linear-gradient(transparent,rgba(8,14,37,.92));
  bottom: 0;
  color: var(--ai-color-white);
  left: 0;
  padding: 70px 30px 26px;
  position: absolute;
  right: 0;
}

.ai-wide-model figcaption strong, .ai-wide-model figcaption span {
  display: block;
}

.ai-wide-model figcaption strong {
  font-size: 20px;
}

.ai-wide-model figcaption span {
  color: #c9d0df;
  font-size: var(--ai-type-small-size);
  margin-top: 7px;
}