/* ============================================================
   Hero-Slider — 1:1 übernommen aus dem Original-Joomla-Modul
   mod_slick_carousel (Codrops DA-Slider / cslider).
   Nur minimale Anpassungen: Pfeil-Icons als SVG, Höhe/Positionen.
   ============================================================ */
/* HOME SLIDER*/
/* line 3, sass/pages/_home.scss */
.da-slider {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--black);
}
.intro {
	height:50vh;
	min-height:360px;
	max-height:640px;
}
.arrows {
	position:absolute;
	bottom:22px;
	right: 3.2vw;
	z-index:11;
	display:flex;
	align-items:center;
}
.arrows::before { /* short yellow accent before the arrows */
	content:"";
	width:3px;
	height:34px;
	background:var(--yellow);
	margin-right:10px;
}
.arrows > div {
	border:2px solid rgba(255,255,255,0.9);
	width:48px;
	height:48px;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:all ease 0.35s;
}
.arrows > div:hover {
	background:var(--yellow);
	border-color:var(--yellow);
	cursor:pointer;
}
/* Touch devices keep :hover stuck on the last tapped arrow — only paint it
   where a real pointer exists. */
@media (hover: none) {
	.arrows > div:hover { background:none; border-color:rgba(255,255,255,0.9); }
	.arrows > div:hover svg { stroke:#fff; }
	.arrows > div:active { background:var(--yellow); border-color:var(--yellow); }
	.arrows > div:active svg { stroke:#000; }
}
.arrows > div + div {
	border-left:none;
}
.arrows svg {
	width:22px;
	height:22px;
	stroke:#fff;
	stroke-width:2.2;
	fill:none;
}
.arrows > div:hover svg { stroke:#000; }
/* line 10, sass/pages/_home.scss */
.da-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  -webkit-transform: translateX(100%) translateZ(0);
  transform: translateX(100%) translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* line 21, sass/pages/_home.scss */
.da-slide-current {
  z-index: 10;
}

/* line 25, sass/pages/_home.scss */
.da-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  will-change: transform;
}
/* The slide photo. Without an explicit height the img fell back to its natural
   aspect ratio and only covered the top strip of .da-img — the rest showed the
   old background-image underneath, which produced a hard seam across the hero
   on narrow screens. It has to fill the box for object-fit to do anything. */
.object-fit-img {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* line 33, sass/pages/_home.scss */
.da-img:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba($blue, 0.34);*/
  background: rgba(22, 47, 53, 0.25);
}

/* line 45, sass/pages/_home.scss */
.da-title {
  width: 100%;
  text-align: right;
  position: absolute;
  padding-right: 3.2vw;
  will-change: transform, opacity;
  bottom:85px;
}

/* line 65, sass/pages/_home.scss */
.da-title h2 {
  color: #fff;
  font-size: 2vw;
  line-height: 1.2;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  position: relative;
  padding-top: 25px;
  font-weight:300;
}
/* line 75, sass/pages/_home.scss */
.da-title h2:before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: 7vh;
  min-width: 58px;
  height: 3px;
  background: var(--yellow);
}

/* line 88, sass/pages/_home.scss */
.da-progress {
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  background: var(--yellow);
  z-index: 20;
  left: -100%;
  will-change: transform;
  -webkit-transition: -webkit-transform 0s;
  transition: -webkit-transform 0s;
  transition: transform 0s;
  transition: transform 0s, -webkit-transform 0s;
  -webkit-transform: translateX(0) translateZ(0);
  transform: translateX(0) translateZ(0);
}
/* line 103, sass/pages/_home.scss */
.da-progress.progressing {
  /* transition: transform 5.9s linear 0.1s;*/
  /* transform: translateX(100%) translateZ(0);*/
  -webkit-animation: daProgress 6s linear backwards infinite;
  animation: daProgress 6s linear backwards infinite;
}
/* line 109, sass/pages/_home.scss */
.da-progress.no-will-change {
  will-change: auto;
}

@-webkit-keyframes daProgress {
  0% {
    -webkit-transform: translateX(0) translateZ(0);
    transform: translateX(0) translateZ(0);
  }
  100% {
    -webkit-transform: translateX(100%) translateZ(0);
    transform: translateX(100%) translateZ(0);
  }
}
@keyframes daProgress {
  0% {
    -webkit-transform: translateX(0) translateZ(0);
    transform: translateX(0) translateZ(0);
  }
  100% {
    -webkit-transform: translateX(100%) translateZ(0);
    transform: translateX(100%) translateZ(0);
  }
}
/* line 124, sass/pages/_home.scss */
.da-slide-current {
  -webkit-transform: translateX(0%) translateZ(0);
  transform: translateX(0%) translateZ(0);
}

/* line 129, sass/pages/_home.scss */
.da-slide-current .da-title {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  opacity: 1;
}

/* line 134, sass/pages/_home.scss */
.da-slide-current .da-img {
  -webkit-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
}

/* line 138, sass/pages/_home.scss */
.da-slide-current .da-img img {
  -webkit-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
}

/* Animation classes and animations */
/* Slide in from the left*/
/* line 146, sass/pages/_home.scss */
.da-slide-fromleft {
  -webkit-animation: fromLeftAnim0 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s both;
  animation: fromLeftAnim0 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s both;
}

/* line 150, sass/pages/_home.scss */
.da-slide-fromleft .da-title {
  -webkit-animation: fromLeftAnim1 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
  animation: fromLeftAnim1 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

/* line 154, sass/pages/_home.scss */
.da-slide-fromleft .da-img {
  -webkit-animation: fromLeftAnim4 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
  animation: fromLeftAnim4 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
}

/* line 161, sass/pages/_home.scss */
.da-slide-fromleft .da-img img {
  -webkit-animation: fromLeftAnim5 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1.6s both;
  animation: fromLeftAnim5 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1.6s both;
}

@-webkit-keyframes fromLeftAnim0 {
  0% {
    -webkit-transform: translateX(-100%) translateZ(0);
    transform: translateX(-100%) translateZ(0);
  }
  100% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
  }
}
@keyframes fromLeftAnim0 {
  0% {
    -webkit-transform: translateX(-100%) translateZ(0);
    transform: translateX(-100%) translateZ(0);
  }
  100% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
  }
}
@-webkit-keyframes fromLeftAnim1 {
  0% {
    -webkit-transform: translateX(-100%) translateZ(0);
    transform: translateX(-100%) translateZ(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateX(-50%) translateZ(0);
    transform: translateX(-50%) translateZ(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
    opacity: 1;
  }
}
@keyframes fromLeftAnim1 {
  0% {
    -webkit-transform: translateX(-100%) translateZ(0);
    transform: translateX(-100%) translateZ(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateX(-50%) translateZ(0);
    transform: translateX(-50%) translateZ(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
    opacity: 1;
  }
}
@-webkit-keyframes fromLeftAnim4 {
  0% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(-100%);
    transform: scale(0.5) translateZ(0) translateX(-100%);
  }
  50% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(0%);
    transform: scale(0.5) translateZ(0) translateX(0%);
  }
  100% {
    -webkit-transform: scale(1) translateZ(0) translateX(0%);
    transform: scale(1) translateZ(0) translateX(0%);
  }
}
@keyframes fromLeftAnim4 {
  0% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(-100%);
    transform: scale(0.5) translateZ(0) translateX(-100%);
  }
  50% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(0%);
    transform: scale(0.5) translateZ(0) translateX(0%);
  }
  100% {
    -webkit-transform: scale(1) translateZ(0) translateX(0%);
    transform: scale(1) translateZ(0) translateX(0%);
  }
}
@-webkit-keyframes fromLeftAnim5 {
  0% {
    -webkit-transform: scale(1.25) translateZ(0);
    transform: scale(1.25) translateZ(0);
  }
  100% {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
  }
}
@keyframes fromLeftAnim5 {
  0% {
    -webkit-transform: scale(1.25) translateZ(0);
    transform: scale(1.25) translateZ(0);
  }
  100% {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
  }
}
/* Slide out to the right */
/* line 204, sass/pages/_home.scss */
.da-slide-toright {
  -webkit-animation: toRightAnim0 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.8s both;
  animation: toRightAnim0 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.8s both;
}

/* line 208, sass/pages/_home.scss */
.da-slide-toright .da-title {
  -webkit-animation: toRightAnim1 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation: toRightAnim1 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* line 212, sass/pages/_home.scss */
.da-slide-toright .da-img {
  -webkit-animation: toRightAnim4 1.6s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation: toRightAnim4 1.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* line 217, sass/pages/_home.scss */
.da-slide-toright .da-img img {
  -webkit-animation: toRightAnim5 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation: toRightAnim5 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@-webkit-keyframes toRightAnim0 {
  0% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
  }
  100% {
    -webkit-transform: translateX(100%) translateZ(0);
    transform: translateX(100%) translateZ(0);
  }
}
@keyframes toRightAnim0 {
  0% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
  }
  100% {
    -webkit-transform: translateX(100%) translateZ(0);
    transform: translateX(100%) translateZ(0);
  }
}
@-webkit-keyframes toRightAnim1 {
  0% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(50%) translateZ(0);
    transform: translateX(50%) translateZ(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(100%) translateZ(0);
    transform: translateX(100%) translateZ(0);
    opacity: 0;
  }
}
@keyframes toRightAnim1 {
  0% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(50%) translateZ(0);
    transform: translateX(50%) translateZ(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(100%) translateZ(0);
    transform: translateX(100%) translateZ(0);
    opacity: 0;
  }
}
@-webkit-keyframes toRightAnim4 {
  0% {
    -webkit-transform: scale(1) translateZ(0) translateX(0%);
    transform: scale(1) translateZ(0) translateX(0%);
  }
  50% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(0%);
    transform: scale(0.5) translateZ(0) translateX(0%);
  }
  100% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(100%);
    transform: scale(0.5) translateZ(0) translateX(100%);
  }
}
@keyframes toRightAnim4 {
  0% {
    -webkit-transform: scale(1) translateZ(0) translateX(0%);
    transform: scale(1) translateZ(0) translateX(0%);
  }
  50% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(0%);
    transform: scale(0.5) translateZ(0) translateX(0%);
  }
  100% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(100%);
    transform: scale(0.5) translateZ(0) translateX(100%);
  }
}
@-webkit-keyframes toRightAnim5 {
  0% {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
  }
  100% {
    -webkit-transform: scale(1.25) translateZ(0);
    transform: scale(1.25) translateZ(0);
  }
}
@keyframes toRightAnim5 {
  0% {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
  }
  100% {
    -webkit-transform: scale(1.25) translateZ(0);
    transform: scale(1.25) translateZ(0);
  }
}
/* Slide in from the right*/
/* line 261, sass/pages/_home.scss */
.da-slide-fromright {
  -webkit-animation: fromRightAnim0 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s both;
  animation: fromRightAnim0 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s both;
}

/* line 265, sass/pages/_home.scss */
.da-slide-fromright .da-title {
  -webkit-animation: fromRightAnim1 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
  animation: fromRightAnim1 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

/* line 269, sass/pages/_home.scss */
.da-slide-fromright .da-img {
  -webkit-animation: fromRightAnim4 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
  animation: fromRightAnim4 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
}

/* line 274, sass/pages/_home.scss */
.da-slide-fromright .da-img img {
  -webkit-animation: fromRightAnim5 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1.6s both;
  animation: fromRightAnim5 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1.6s both;
}

@-webkit-keyframes fromRightAnim0 {
  0% {
    -webkit-transform: translateX(100%) translateZ(0);
    transform: translateX(100%) translateZ(0);
  }
  100% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
  }
}
@keyframes fromRightAnim0 {
  0% {
    -webkit-transform: translateX(100%) translateZ(0);
    transform: translateX(100%) translateZ(0);
  }
  100% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
  }
}
@-webkit-keyframes fromRightAnim1 {
  0% {
    -webkit-transform: translateX(100%) translateZ(0);
    transform: translateX(100%) translateZ(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateX(50%) translateZ(0);
    transform: translateX(50%) translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
    opacity: 1;
  }
}
@keyframes fromRightAnim1 {
  0% {
    -webkit-transform: translateX(100%) translateZ(0);
    transform: translateX(100%) translateZ(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateX(50%) translateZ(0);
    transform: translateX(50%) translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
    opacity: 1;
  }
}
@-webkit-keyframes fromRightAnim4 {
  0% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(100%);
    transform: scale(0.5) translateZ(0) translateX(100%);
  }
  50% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(0%);
    transform: scale(0.5) translateZ(0) translateX(0%);
  }
  100% {
    -webkit-transform: scale(1) translateZ(0) translateX(0%);
    transform: scale(1) translateZ(0) translateX(0%);
  }
}
@keyframes fromRightAnim4 {
  0% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(100%);
    transform: scale(0.5) translateZ(0) translateX(100%);
  }
  50% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(0%);
    transform: scale(0.5) translateZ(0) translateX(0%);
  }
  100% {
    -webkit-transform: scale(1) translateZ(0) translateX(0%);
    transform: scale(1) translateZ(0) translateX(0%);
  }
}
@-webkit-keyframes fromRightAnim5 {
  0% {
    -webkit-transform: scale(1.25) translateZ(0);
    transform: scale(1.25) translateZ(0);
  }
  100% {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
  }
}
@keyframes fromRightAnim5 {
  0% {
    -webkit-transform: scale(1.25) translateZ(0);
    transform: scale(1.25) translateZ(0);
  }
  100% {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
  }
}
/* Slide out to the left*/
/* line 318, sass/pages/_home.scss */
.da-slide-toleft {
  -webkit-animation: toLeftAnim0 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.8s both;
  animation: toLeftAnim0 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.8s both;
}

/* line 322, sass/pages/_home.scss */
.da-slide-toleft .da-title {
  -webkit-animation: toLeftAnim1 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation: toLeftAnim1 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* line 326, sass/pages/_home.scss */
.da-slide-toleft .da-img {
  -webkit-animation: toLeftAnim4 1.6s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation: toLeftAnim4 1.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* line 331, sass/pages/_home.scss */
.da-slide-toleft .da-img img {
  -webkit-animation: toLeftAnim5 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation: toLeftAnim5 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@-webkit-keyframes toLeftAnim0 {
  0% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
  }
  100% {
    -webkit-transform: translateX(-100%) translateZ(0);
    transform: translateX(-100%) translateZ(0);
  }
}
@keyframes toLeftAnim0 {
  0% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
  }
  100% {
    -webkit-transform: translateX(-100%) translateZ(0);
    transform: translateX(-100%) translateZ(0);
  }
}
@-webkit-keyframes toLeftAnim1 {
  0% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(-50%) translateZ(0);
    transform: translateX(-50%) translateZ(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-100%) translateZ(0);
    transform: translateX(-100%) translateZ(0);
    opacity: 0;
  }
}
@keyframes toLeftAnim1 {
  0% {
    -webkit-transform: translateX(0%) translateZ(0);
    transform: translateX(0%) translateZ(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(-50%) translateZ(0);
    transform: translateX(-50%) translateZ(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-100%) translateZ(0);
    transform: translateX(-100%) translateZ(0);
    opacity: 0;
  }
}
@-webkit-keyframes toLeftAnim4 {
  0% {
    -webkit-transform: scale(1) translateZ(0) translateX(0%);
    transform: scale(1) translateZ(0) translateX(0%);
  }
  50% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(0%);
    transform: scale(0.5) translateZ(0) translateX(0%);
  }
  100% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(-100%);
    transform: scale(0.5) translateZ(0) translateX(-100%);
  }
}
@keyframes toLeftAnim4 {
  0% {
    -webkit-transform: scale(1) translateZ(0) translateX(0%);
    transform: scale(1) translateZ(0) translateX(0%);
  }
  50% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(0%);
    transform: scale(0.5) translateZ(0) translateX(0%);
  }
  100% {
    -webkit-transform: scale(0.5) translateZ(0) translateX(-100%);
    transform: scale(0.5) translateZ(0) translateX(-100%);
  }
}
@-webkit-keyframes toLeftAnim5 {
  0% {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
  }
  100% {
    -webkit-transform: scale(1.25) translateZ(0);
    transform: scale(1.25) translateZ(0);
  }
}
@keyframes toLeftAnim5 {
  0% {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
  }
  100% {
    -webkit-transform: scale(1.25) translateZ(0);
    transform: scale(1.25) translateZ(0);
  }
}
/* ---- Responsive (Original hatte keine Media-Queries) ---- */
@media (min-width: 1500px) {
	.da-title h2 { font-size: 30px; }
}
@media (max-width: 900px) {
	.intro { height: 44vh; min-height: 300px; }
	/* Caption clears the arrow row instead of running behind it. */
	.da-title { bottom: 78px; padding-right: 24px; padding-left: 24px; }
	.da-title h2 {
		font-size: 1.35rem;
		text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
	}
	/* The tighter the crop, the more often the caption lands on sky or pale
	   bodywork — the flat 25% wash isn't enough, so weight it to the bottom. */
	.da-img:after {
		background: linear-gradient(to bottom,
			rgba(22, 47, 53, 0.10) 28%,
			rgba(22, 47, 53, 0.52) 62%,
			rgba(22, 47, 53, 0.80) 100%);
	}
	.arrows { right: 16px; bottom: 14px; }
	.arrows::before { display: none; }
}

/* Phones. The slide art is a 2200x750 panorama; a vh-driven band ends up
   roughly square here and crops away two thirds of the picture, so the band
   gets an aspect ratio instead. */
@media (max-width: 600px) {
	.intro {
		height: auto;
		aspect-ratio: 4 / 3;
		min-height: 240px;
		max-height: 68vh;
	}
	.da-title {
		bottom: 72px;
		padding-left: 16px;
		padding-right: 16px;
	}
	.da-title h2 {
		font-size: 1.15rem;
		padding-top: 16px;
	}
	.da-title h2:before { width: 44px; min-width: 0; }
	.arrows { right: 12px; bottom: 12px; }
	.arrows > div { width: 44px; height: 44px; }
	.arrows svg { width: 20px; height: 20px; }
}

/* Landscape phones: 44vh of a ~400px-tall viewport hits min-height and the
   hero swallows the whole screen. Cap it and pull the caption in tight. */
@media (max-height: 500px) and (orientation: landscape) {
	.intro {
		height: 82vh;
		aspect-ratio: auto;
		min-height: 0;
		max-height: none;
	}
	.da-title { bottom: 64px; }
	.da-title h2 { font-size: 1.1rem; padding-top: 14px; }
}