/* Dark hero with the supplied facade photo. The homepage alone loads this file. */
.intro {
  background:#202629;
  color:#f6f5f1;
  padding-block:72px 30px;
  /* Width of the red 24/7 panel */
  --intro-side:210px;
}
.intro-heading {
  display:grid;
  justify-items:start;
  gap:26px;
  margin-bottom:56px;
}
.intro h1 {
  font-size:clamp(46px,6.2vw,96px);
  font-weight:600;
  letter-spacing:-.067em;
  line-height:1.03;
}
.intro h1>span {
  color:#adb9ba;
  font-weight:400;
}
.intro-lead {
  max-width:34ch;
  color:#c3cdce;
  font-size:18px;
  line-height:1.6;
}
.intro-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 26px;
  margin-top:6px;
}
.intro-cta {
  display:inline-flex;
  align-items:center;
  gap:16px;
  min-height:60px;
  padding:0 22px 0 28px;
  border-radius:3px;
  background:#e3000f;
  color:#fff;
  font-size:17px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 12px 30px rgb(227 0 15 / .28);
  transition:background .2s;
}
.intro-cta:hover {
  background:#c9000d;
}
.intro-cta svg {
  flex-shrink:0;
  transition:transform .2s;
}
.intro-cta:hover svg {
  transform:translateY(3px);
}
.intro-call {
  font-size:14px;
  color:#b7c2c4;
}
.intro-call>span {
  color:#f6f5f1;
  text-decoration:underline;
  text-underline-offset:3px;
}
.intro-scene {
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--intro-side);
  min-height:300px;
  height:clamp(300px,23vw,345px);
}
.intro-photo {
  position:relative;
  min-width:0;
  overflow:hidden;
  background:#303a40;
}
.intro-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 10%;
}
.intro-photo figcaption {
  position:absolute;
  left:0;
  bottom:0;
  background:#202629;
  padding:13px 22px 0 0;
  font-size:12px;
  font-weight:600;
}
.intro-photo figcaption a {
  display:flex;
  align-items:center;
  gap:11px;
}
.intro-photo figcaption a:hover {
  text-decoration:underline;
  text-underline-offset:3px;
}
.intro-location-mark {
  color:#ff5148;
  font-size:20px;
  line-height:1;
}
.intro-access {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  padding:30px 27px;
  color:#fff;
  background:#e3000f;
  overflow:hidden;
}
.intro-access::before {
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 13px,#fff 13px 14px);
  opacity:.07;
  pointer-events:none;
}
.intro-access-caption {
  position:relative;
  font-size:15px;
  font-weight:600;
  line-height:1.6;
}
.intro-access>div {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.intro-access strong {
  font-size:67px;
  line-height:1;
  letter-spacing:-.075em;
  font-weight:600;
}
.intro-access>div>span {
  font-size:15px;
  font-weight:600;
}
.intro-facts {
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding-top:28px;
}
.intro-facts>p {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 10px;
  font-size:12px;
  color:#b7c2c4;
}
.intro-facts strong {
  color:#f6f5f1;
  font-size:12px;
  font-weight:600;
}
@media(min-width:1600px) {
  .intro h1 { font-size:100px; }
}
@media(max-width:1100px) {
  .intro { --intro-side:200px; }
  .intro-access { padding:24px 20px; }
  .intro-access strong { font-size:57px; }
  .intro-facts>p { flex-direction:column; }
}
@media(max-width:800px) {
  .intro { padding-block:44px 24px; }
  .intro-heading { gap:20px; margin-bottom:36px; }
  .intro h1 { font-size:clamp(40px,10.6vw,78px); }
  .intro-scene {
    height:auto;
    min-height:0;
    grid-template-columns:1fr;
  }
  .intro-photo { aspect-ratio:2 / 1; }
  .intro-photo img { object-position:center; }
  .intro-access {
    flex-direction:row;
    align-items:center;
    gap:20px;
    padding:18px 22px;
  }
  .intro-access-caption { font-size:13px; }
  .intro-access>div { flex-direction:row; align-items:center; gap:14px; }
  .intro-access strong { font-size:44px; }
  .intro-facts { gap:18px; }
  .intro-facts>p { flex:1; font-size:11px; }
}
@media(max-width:520px) {
  .intro-scene {
    position:relative;
    height:auto;
  }
  .intro-photo { height:100%; }
  .intro-photo figcaption { padding:10px 12px 0 0; font-size:10px; }
  .intro-lead { font-size:16px; }
  .intro-actions { margin-top:0; }
  .intro-cta { justify-content:space-between; width:100%; min-height:56px; }
  .intro-access {
    padding:15px;
  }
  .intro-access-caption { font-size:12px; }
  .intro-access>div { flex-direction:column; align-items:flex-start; gap:5px; }
  .intro-access strong { font-size:39px; }
  .intro-access>div>span { font-size:12px; }
  .intro-facts {
    display:grid;
    grid-template-columns:1fr;
    gap:13px;
    padding-top:23px;
  }
  .intro-facts>p {
    flex-direction:row;
    justify-content:space-between;
    gap:4px 12px;
    padding-bottom:10px;
    border-bottom:1px solid #465155;
  }
}
@media(prefers-reduced-motion:reduce) {
  .intro-cta,.intro-cta svg { transition:none; }
}

/* <picture> ümbris ei tohi paigutust mõjutada */
.intro-photo picture {
  display:contents;
}