/* The agency website example is isolated from the main site's hero and navigation styles. */
.white-label.agency-showcase {
  padding: 94px 7vw 70px;
  background: #0b0f14;
  color: #fff;
  scroll-margin-top: 170px;
}
.agency-showcase > * { max-width: 1440px; margin-left: auto; margin-right: auto; }
.agency-showcase .agency-showcase-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: 64px;
  margin-bottom: 42px;
}
.agency-showcase .agency-showcase-heading h2 {
  margin: 0;
  font-size: clamp(42px, 4.5vw, 68px);
  font-weight: 400;
  letter-spacing: -.035em;
}
.agency-showcase .agency-showcase-description > p {
  margin: 0 0 24px;
  color: #bac3cb;
  font-size: 17px;
  line-height: 1.75;
}
.agency-showcase .agency-showcase-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.agency-showcase .agency-showcase-actions .primary { font-size: 14px; }
.agency-showcase .agency-showcase-link {
  color: #d4b481;
  font-size: 14px;
  line-height: 1.5;
  text-underline-offset: 6px;
}
.agency-showcase .agency-site-demo {
  overflow: hidden;
  border: 1px solid rgba(212, 180, 129, .4);
  border-radius: 8px;
  background: #12191e;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .24);
}
.agency-showcase .demo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 26px 40px;
  background: #0b1116;
}
.agency-showcase .demo-brand {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #fff;
}
.agency-showcase .demo-brand strong {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .15em;
}
.agency-showcase .demo-brand span {
  color: #d4b481;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .23em;
}
.agency-showcase .demo-navigation { display: flex; align-items: center; gap: 28px; }
.agency-showcase .demo-navigation a {
  color: #e4e9ec;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
}
.agency-showcase .demo-navigation .demo-nav-cta {
  padding: 12px 18px;
  border: 1px solid rgba(212, 180, 129, .7);
  color: #e6cca3;
}
.agency-showcase .demo-navigation a:hover { color: #d4b481; }
.agency-showcase .demo-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 510px;
  padding: 62px 6% 106px;
  overflow: hidden;
}
.agency-showcase .demo-hero > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.agency-showcase .demo-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 12, 18, .78), rgba(3, 12, 18, .29) 57%, rgba(3, 12, 18, .08)), linear-gradient(0deg, rgba(3, 12, 18, .65), transparent 48%);
}
.agency-showcase .demo-hero-copy { max-width: 660px; }
.agency-showcase .demo-hero-kicker {
  margin: 0 0 20px;
  color: #ebd2a8;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .19em;
}
.agency-showcase .demo-hero h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 400;
  line-height: 1.02 !important;
  letter-spacing: -.035em;
}
.agency-showcase .demo-hero h3 em { color: #ead1a7; font-weight: 400; }
.agency-showcase .demo-hero-description {
  max-width: 440px;
  margin: 24px 0 0;
  color: #f0f3f5;
  font-size: 17px;
  line-height: 1.7;
}
.agency-showcase .demo-location {
  position: absolute;
  right: 36px;
  bottom: 76px;
  padding-left: 17px;
  border-left: 1px solid #d4b481;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}
.agency-showcase .demo-search {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) auto;
  align-items: stretch;
  gap: 0;
  width: calc(100% - 72px);
  max-width: 1040px;
  margin: -42px auto 0;
  padding: 0;
  border: 1px solid #455059;
  background: #151f26;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .18);
}
.agency-showcase .demo-search label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 17px 24px;
  border-right: 1px solid #3a444c;
  color: #c7af89;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.agency-showcase .demo-search select {
  width: 100%;
  max-width: 100%;
  margin-top: 7px;
  padding: 4px 18px 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  color-scheme: dark;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.agency-showcase .demo-search select option { background: #151f26; color: #fff; }
.agency-showcase .demo-search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 12px;
  padding: 16px 24px;
  border: 0;
  background: #d4b481;
  color: #0b1116;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}
.agency-showcase .demo-search-submit:hover { background: #e5c99f; }
.agency-showcase .demo-collections { padding: 38px 36px 30px; }
.agency-showcase .demo-collection-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 22px;
}
.agency-showcase .demo-collection-heading h4 {
  margin: 0;
  color: #fff;
  font-family: var(--serif);
  font-size: 31px;
  font-weight: 400;
  line-height: 1.2;
}
.agency-showcase .demo-collection-heading a {
  color: #d4b481;
  font-size: 14px;
  line-height: 1.5;
  text-underline-offset: 5px;
}
.agency-showcase .demo-destination-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.agency-showcase .demo-destination {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  min-height: 226px;
  padding: 24px;
  overflow: hidden;
  text-decoration: none;
  background: #182830;
}
.agency-showcase .demo-destination > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.agency-showcase .demo-destination::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(0deg, rgba(3, 12, 18, .88), rgba(3, 12, 18, .16) 66%);
}
.agency-showcase .demo-destination:hover > img { transform: scale(1.035); }
.agency-showcase .demo-destination span { display: flex; flex-direction: column; gap: 7px; }
.agency-showcase .demo-destination small { color: #f0d8b2; font-size: 12px; line-height: 1.4; letter-spacing: .16em; }
.agency-showcase .demo-destination strong { color: #fff; font-family: var(--serif); font-size: 33px; font-weight: 400; line-height: 1.1; }
.agency-showcase .demo-credits {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 36px;
  border-top: 1px solid #303a42;
  color: #b3bec6;
  font-size: 13px;
  line-height: 1.6;
}
.agency-showcase .agency-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 42px;
}
.agency-showcase .agency-benefits article {
  min-width: 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(212, 180, 129, .4);
}
.agency-showcase .agency-benefit-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.agency-showcase .agency-benefit-top img { display: block; width: 28px; height: 28px; }
.agency-showcase .agency-benefit-top span { color: #d4b481; font-size: 14px; line-height: 1.5; letter-spacing: .08em; }
.agency-showcase .agency-benefits h3 { margin: 0 0 12px; font-size: 26px; font-weight: 500; line-height: 1.16 !important; color: #fff; }
.agency-showcase .agency-benefits p { margin: 0; font-size: 16px; line-height: 1.65; color: #b8c2ca; }
.agency-showcase :is(a, button, select):focus-visible { outline: 2px solid #ebd1a5; outline-offset: 5px; }

@media (max-width: 1000px) {
  .agency-showcase .agency-showcase-heading { grid-template-columns: 1fr; gap: 25px; }
  .agency-showcase .agency-showcase-description { max-width: 700px; }
  .agency-showcase .agency-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .agency-showcase .demo-header { padding: 24px 28px; }
  .agency-showcase .demo-navigation { gap: 20px; }
  .agency-showcase .demo-navigation .demo-nav-cta { display: none; }
  .agency-showcase .demo-search label { padding: 15px 18px; }
  .agency-showcase .demo-search-submit { padding: 14px 18px; gap: 14px; }
  .agency-showcase .demo-destination { min-height: 205px; padding: 19px; }
  .agency-showcase .demo-destination strong { font-size: 29px; }
}
@media (max-width: 700px) {
  .white-label.agency-showcase { padding: 62px 5vw 48px; scroll-margin-top: 135px; }
  .agency-showcase .agency-showcase-heading h2 { font-size: 43px; }
  .agency-showcase .demo-header { flex-wrap: wrap; gap: 20px; padding: 22px; }
  .agency-showcase .demo-brand strong { font-size: 30px; }
  .agency-showcase .demo-navigation { width: 100%; justify-content: space-between; }
  .agency-showcase .demo-hero { min-height: 465px; padding: 45px 24px 104px; align-items: center; }
  .agency-showcase .demo-hero > img { object-position: 60% center; }
  .agency-showcase .demo-hero::after { background: linear-gradient(90deg, rgba(3, 12, 18, .78), rgba(3, 12, 18, .35)), linear-gradient(0deg, rgba(3, 12, 18, .8), transparent 70%); }
  .agency-showcase .demo-hero h3 { font-size: clamp(43px, 8.7vw, 60px); }
  .agency-showcase .demo-hero-kicker { font-size: 12px; letter-spacing: .12em; }
  .agency-showcase .demo-hero-description { font-size: 16px; margin-top: 22px; }
  .agency-showcase .demo-location { left: 24px; right: auto; bottom: 62px; }
  .agency-showcase .demo-search { width: calc(100% - 32px); grid-template-columns: 1fr; margin-top: -30px; }
  .agency-showcase .demo-search label { border-right: 0; border-bottom: 1px solid #3a444c; padding: 15px 20px; }
  .agency-showcase .demo-search-submit { min-height: 54px; margin: 12px; }
  .agency-showcase .demo-collections { padding: 30px 16px 24px; }
  .agency-showcase .demo-collection-heading { align-items: flex-start; flex-direction: column; gap: 12px; padding: 0 4px; }
  .agency-showcase .demo-collection-heading h4 { font-size: 29px; }
  .agency-showcase .demo-destination-grid { grid-template-columns: 1fr; gap: 14px; }
  .agency-showcase .demo-destination { min-height: 225px; padding: 24px; }
  .agency-showcase .demo-destination strong { font-size: 34px; }
  .agency-showcase .demo-credits { flex-direction: column; gap: 5px; padding: 18px 22px; }
}
@media (max-width: 480px) {
  .agency-showcase .agency-benefits { grid-template-columns: 1fr; gap: 25px; }
  .agency-showcase .agency-benefits article { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 15px; padding-top: 24px; }
  .agency-showcase .agency-benefit-top { grid-row: 1 / 3; flex-direction: column; gap: 10px; margin: 0; }
  .agency-showcase .agency-benefits h3 { font-size: 25px; }
  .agency-showcase .agency-showcase-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .agency-showcase .demo-destination > img { transition: none; }
  .agency-showcase .demo-destination:hover > img { transform: none; }
}