/* Editorial home page: hero, story, service row and footer. */
.srebro-hero {
  position: relative; display: flex; min-height: 510px; align-items: center; overflow: hidden;
  background: var(--srebro-color-hero) url('../image/hero-campaign-cross-v3.webp') center 56% / cover no-repeat;
  &::after { position: absolute; inset: 0 42% 0 0; background: linear-gradient(90deg, var(--srebro-overlay-hero-86), var(--srebro-overlay-hero-57) 62%, transparent); content: ''; pointer-events: none; }
  .srebro-hero__inner { position: relative; z-index: 1; }
  .srebro-hero__copy { max-width: 510px; padding: 72px 0; }
  .srebro-hero__lead { max-width: 390px; margin: 0 0 28px; color: var(--srebro-color-gray-800); font-size: var(--srebro-text-lg); }
  h1 { margin: 0 0 20px; letter-spacing: -.018em; }
  .srebro-hero__caption { position: absolute; z-index: 1; right: 26px; bottom: 19px; color: var(--srebro-color-white); font-size: var(--srebro-text-xs); letter-spacing: .1em; text-shadow: var(--srebro-shadow-hero-caption); }
}
.srebro-eyebrow { margin: 0 0 15px; color: var(--srebro-color-steel); font-size: var(--srebro-text-sm); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.srebro-button {
  display: inline-flex; min-height: 50px; align-items: center; gap: var(--srebro-space-5); padding: 0 23px; border-radius: var(--srebro-radius-control);
  background: var(--srebro-color-graphite); color: var(--srebro-color-white); font-size: 15px; letter-spacing: .02em;
  &:hover, &:focus { background: var(--srebro-color-steel); color: var(--srebro-color-white); }
}
.srebro-story {
  display: flex; min-height: 310px; align-items: center; justify-content: space-between; gap: var(--srebro-space-7); margin: 55px 0 45px; padding: 52px clamp(28px, 7vw, 100px);
  border-radius: var(--srebro-radius-surface); background: var(--srebro-color-porcelain);
  .srebro-story__copy { max-width: 470px; }
  h2 { margin: 0 0 15px; }
  p:not(.srebro-eyebrow) { max-width: 400px; color: var(--srebro-color-muted); }
  .srebro-story__mark {
    position: relative; display: flex; width: 170px; height: 170px; flex: 0 0 170px; align-items: center; justify-content: center; align-self: center;
    border: 1px solid var(--srebro-color-mark); border-radius: var(--srebro-radius-circle); color: var(--srebro-color-silver-deep);
    &::before, &::after { position: absolute; inset: 14px; border: 1px solid var(--srebro-color-mark-light); border-radius: var(--srebro-radius-circle); content: ''; }
    &::after { inset: 29px; }
    span { font: 80px var(--srebro-font-display); }
    i { position: absolute; top: 24px; right: 25px; width: 11px; height: 11px; border-radius: var(--srebro-radius-circle); background: var(--srebro-color-mark-accent); }
  }
}
.srebro-text-link { display: inline-flex; gap: var(--srebro-space-4); margin-top: var(--srebro-space-3); padding-bottom: var(--srebro-space-1); border-bottom: 1px solid var(--srebro-color-divider-strong); }
.srebro-service {
  display: flex; margin: 38px 0 65px; border-top: 1px solid var(--srebro-color-line); border-bottom: 1px solid var(--srebro-color-line);
  > div { display: flex; flex: 1 1 33.333%; align-items: center; justify-content: center; gap: 13px; padding: 20px; border-right: 1px solid var(--srebro-color-line); &:last-child { border: 0; } }
  span { color: var(--srebro-color-steel); font-size: 22px; }
  p { margin: 0; color: var(--srebro-color-ink); font-size: var(--srebro-text-md); }
}
#common-home .srebro-home > .container > h2, #common-home .srebro-home .content-bottom h2 { margin: 44px 0 24px; }
.srebro-footer {
  margin-top: 72px; padding: 54px 0 22px; border-top: 1px solid var(--srebro-color-line); border-radius: var(--srebro-radius-surface) var(--srebro-radius-surface) 0 0; background: var(--srebro-color-gray-200);
  .srebro-footer__brand { margin-bottom: 38px; img { width: 180px; } p { max-width: 320px; margin: 12px 0; color: var(--srebro-color-muted); font-size: var(--srebro-text-md); } }
  .srebro-footer__columns {
    display: flex; flex-wrap: wrap; gap: 30px; padding: 30px 0; border-top: 1px solid var(--srebro-color-border); border-bottom: 1px solid var(--srebro-color-border);
    > div { flex: 1 1 calc(25% - 30px); }
    h2 { margin: 0 0 14px; font: 600 var(--srebro-text-md) var(--srebro-font-body); }
    ul { margin: 0; padding: 0; list-style: none; }
    li { margin: 7px 0; font-size: var(--srebro-text-md); }
    a { color: var(--srebro-color-gray-700); &:hover { color: var(--srebro-color-steel); } }
  }
  .srebro-footer__bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; color: var(--srebro-color-footer-note); font-size: var(--srebro-text-xs); a { color: inherit; } }
}
@media (max-width: 991px) {
  .srebro-hero { min-height: 440px; }
}
@media (max-width: 767px) {
  .srebro-hero { min-height: 460px; background-position: 62% center; &::after { inset: 0; background: linear-gradient(90deg, var(--srebro-overlay-hero-90), var(--srebro-overlay-hero-68) 60%, var(--srebro-overlay-hero-12)); } }
  .srebro-hero__copy { max-width: 360px; padding: 48px 0; }
  .srebro-hero__lead { font-size: var(--srebro-text-base); }
  .srebro-hero__caption { right: 14px; bottom: 12px; }
  .srebro-story { flex-direction: column; align-items: flex-start; gap: 28px; margin: 36px 0; padding: 36px 26px; .srebro-story__mark { width: 120px; height: 120px; flex-basis: 120px; align-self: flex-start; margin-left: 12px; span { font-size: 58px; } &::before { inset: 10px; } &::after { inset: 21px; } } }
  .srebro-service { flex-direction: column; margin: 28px 0 45px; > div { flex: 1 1 auto; justify-content: flex-start; padding: 15px 20px; border-right: 0; border-bottom: 1px solid var(--srebro-color-line); &:last-child { border-bottom: 0; } } }
  .srebro-footer__columns { gap: 28px 20px; > div { flex-basis: calc(50% - 20px); } }
  .srebro-footer__bottom { flex-direction: column; gap: 5px; }
}
@media (max-width: 420px) {
  .srebro-footer__columns > div { flex-basis: 100%; }
}