/* Architectural imagery belongs to the After hours direction only. */
[data-variant=dusk] .connections-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 72px;
  padding: 76px 0 64px;
  color: #17201a;
  background: #e5e9e6;
  border-block: 1px solid #f4f7f0;
}
[data-variant=dusk] .connections-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('assets/workflow-daylight-supported.webp') center 64% / cover no-repeat;
}
[data-variant=dusk] .connections-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #eff2eee8 0%, #f1f4efb3 26%, #edf1e738 53%, #e6ebe4c7 100%);
}
[data-variant=dusk] .connections-section .eyebrow { color: #3f6548; }
[data-variant=dusk] .connections-section h2 { color: #18211b; }
[data-variant=dusk] .connections-section h2 em { color: #5b6e5c; }
[data-variant=dusk] .connections-section .section-heading > p { color: #445449; font-size: 13px; }
[data-variant=dusk] .connection-map { margin-top: 37px; }
[data-variant=dusk] .connection-origin > span { color: #3c573e; font-weight: 600; }
[data-variant=dusk] .connection-origin img { filter: drop-shadow(0 5px 14px #263d181c); }
[data-variant=dusk] .connection-trunk { background: linear-gradient(#6b9859, #54724999); height: 31px; }
[data-variant=dusk] .connection-branches { border-color: #54724988; }
[data-variant=dusk] .connection-branches span { background: #54724988; }
[data-variant=dusk] .connection-columns { gap: 18px; }
[data-variant=dusk] .connection-columns article {
  padding: 25px 25px 24px;
  background: linear-gradient(140deg, #fafcf4eb, #f5f8f0d1);
  border: 1px solid #ffffffb8;
  border-radius: 5px;
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 35px #142a1814, inset 0 1px #ffffffb3;
}
[data-variant=dusk] .lane-number { color: #5c7257; margin-bottom: 20px; }
[data-variant=dusk] .lane-symbol { color: #34592f; background: #e8eedec9; border-color: #6f925947; margin-bottom: 18px; }
[data-variant=dusk] .connection-columns h3 { color: #223021; }
[data-variant=dusk] .connection-columns p { color: #52644e; font-size: 13px; }
[data-variant=dusk] .destinations { border-color: #63845433; margin-top: 25px; }
[data-variant=dusk] .destinations > span { color: #687d5f; }
[data-variant=dusk] .destination-name { color: #2d4529; }
[data-variant=dusk] .destination-name i { background: #6e8a5766; }
[data-variant=dusk] .connection-end { margin-top: 32px; }
[data-variant=dusk] .connection-end span:first-child,
[data-variant=dusk] .connection-end span:last-child { background: linear-gradient(90deg, transparent, #41613877); }
[data-variant=dusk] .connection-end span:nth-child(2) { color: #364c30; }
[data-variant=dusk] .availability { color: #4c6044; margin-top: 17px; }

[data-variant=dusk] .founder-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 92px 0 180px;
  background: #131713;
  border-color: #c9dfd926;
}
[data-variant=dusk] .founder-section::before {
  content: '';
  position: absolute;
  inset: 0;
  top: auto;
  width: 100%;
  aspect-ratio: 1672 / 941;
  z-index: -2;
  background: url('assets/founder-midnight-supported.webp') center / cover no-repeat;
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000);
}
[data-variant=dusk] .founder-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #090e10c4 0%, #090e1080 34%, #090e1026 66%, #090e1033 100%),
    linear-gradient(90deg, #070d0959 0%, transparent 46%);
}
[data-variant=dusk] .founder-layout { align-items: start; }
[data-variant=dusk] .founder-note { padding-top: 24px; }
[data-variant=dusk] .founder-note .eyebrow { color: #b5c5a5; }
[data-variant=dusk] .founder-note h2 { color: #f1f3eb; }
[data-variant=dusk] .founder-note h2 em { color: #c2d2b4; }
[data-variant=dusk] .founder-note p { color: #c6d0be; text-shadow: 0 1px 12px #0007; }
[data-variant=dusk] .founder-name { color: #c5d5b5; }
[data-variant=dusk] .founder-name > span:last-child { color: #a8bd96; }
[data-variant=dusk] .founder-offer {
  background: linear-gradient(130deg, #223024e8, #0d1712eb);
  backdrop-filter: blur(20px);
  border-color: #b7d29f4d;
  box-shadow: 0 25px 70px #0005;
}

@media (max-width: 1100px) and (min-width: 761px) {
  [data-variant=dusk] .connection-columns { gap: 12px; }
  [data-variant=dusk] .connection-columns article { padding-inline: 16px; }
  [data-variant=dusk] .founder-section { padding-bottom: 200px; }
}

@media (max-width: 760px) {
  [data-variant=dusk] .connections-section { margin-top: 35px; padding: 43px 0 37px; }
  [data-variant=dusk] .connections-section::before { background-position: 42% bottom; background-size: cover; }
  [data-variant=dusk] .connections-section::after { background: linear-gradient(180deg, #f0f3eee8, #edf1e8b3 30%, #e9eee446 68%, #e7ede3c7); }
  [data-variant=dusk] .connections-section .section-heading > p { font-size: 12px; }
  [data-variant=dusk] .connection-map { margin-top: 27px; }
  [data-variant=dusk] .connection-origin img { width: 32px; height: 41px; }
  [data-variant=dusk] .connection-origin > span { font-size: 7px; }
  [data-variant=dusk] .connection-trunk { height: 27px; }
  [data-variant=dusk] .connection-branches { display: none; }
  [data-variant=dusk] .connection-columns { grid-template-columns: 1fr; gap: 12px; }
  [data-variant=dusk] .connection-columns article {
    display: grid;
    grid-template-columns: 47px 1fr;
    grid-template-areas: 'icon number' 'icon title' 'icon description' 'destinations destinations';
    text-align: left;
    column-gap: 15px;
    padding: 20px;
    border: 1px solid #ffffffc4;
    background: linear-gradient(140deg, #fafcf4ee, #f5f8f0d6);
  }
  [data-variant=dusk] .lane-number { grid-area: number; margin: 0 0 7px; font-size: 6px; letter-spacing: 1.4px; }
  [data-variant=dusk] .lane-symbol { grid-area: icon; width: 46px; height: 46px; margin: 0; align-self: center; }
  [data-variant=dusk] .connection-columns h3 { grid-area: title; display: block; min-height: 0; font-size: 21px; letter-spacing: -.5px; }
  [data-variant=dusk] .connection-columns p { grid-area: description; min-height: 0; font-size: 11px; margin-top: 7px; }
  [data-variant=dusk] .destinations { grid-area: destinations; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; padding-top: 12px; }
  [data-variant=dusk] .destinations > span { font-size: 5px; min-height: 0; letter-spacing: .7px; }
  [data-variant=dusk] .destination-name { font-size: 9px; margin: 0; min-height: 0; gap: 11px; }
  [data-variant=dusk] .destination-name b { font-size: 12px; }
  [data-variant=dusk] .connection-end { margin: 25px 4% 0; }
  [data-variant=dusk] .connection-end span:nth-child(2) { font-size: 6px; }
  [data-variant=dusk] .availability { font-size: 8px; }
  [data-variant=dusk] .founder-section { padding: 44px 0 45px; background: #101510; }
  [data-variant=dusk] .founder-section::before { display: none; }
  [data-variant=dusk] .founder-section::after { background: linear-gradient(180deg, #131713, #0c120d); }
  [data-variant=dusk] .founder-layout { align-items: stretch; gap: 25px; }
  [data-variant=dusk] .founder-note { position: relative; padding-top: 0; padding-bottom: calc(56.25vw + 36px); }
  [data-variant=dusk] .founder-note::after {
    content: '';
    position: absolute;
    height: 56.25vw;
    left: -18px;
    right: -18px;
    bottom: 0;
    background: linear-gradient(180deg, #10151077, transparent 27%, transparent 87%, #101510aa), url('assets/founder-midnight-supported.webp') center / cover no-repeat;
    mask-image: linear-gradient(180deg, transparent, #000 20%, #000 85%, transparent);
  }
  [data-variant=dusk] .founder-note p { color: #c0cbb7; }
}