
.inner-photo-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 420px;
  background: #f5f1eb;
  color: #193147;
  border-bottom: 1px solid #d8d9d6;
}
.inner-photo-hero__image {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  z-index: 0;
  background: #d5dce0;
  overflow: hidden;
}
.inner-photo-hero__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  filter: saturate(1.04) contrast(1.04);
  transform: scale(1.012);
}
.inner-photo-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    #f5f1eb 0%,
    #f5f1eb 27%,
    rgba(245,241,235,.97) 39%,
    rgba(245,241,235,.74) 51%,
    rgba(245,241,235,.25) 68%,
    rgba(18,45,67,.12) 100%);
  pointer-events: none;
}
.inner-photo-hero__pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 38% 60%, transparent 0 155px, rgba(24,61,85,.08) 155px 156px, transparent 157px),
    linear-gradient(135deg, transparent 0 56%, rgba(255,255,255,.095) 56.1% 56.3%, transparent 56.4%);
}
.inner-photo-hero__inner {
  min-height: 420px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
  padding-block: clamp(52px, 6vw, 75px);
}
.inner-photo-hero__copy { width: min(63%, 740px); }
.inner-photo-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  color: #32546e;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.4;
  letter-spacing: .105em;
  text-transform: uppercase;
}
.inner-photo-hero__icon {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(219,231,236,.8);
  color: #1d526f;
}
.inner-photo-hero__icon .fa-solid { font-size: 15px; }
.inner-photo-hero h1 {
  max-width: 730px;
  color: inherit;
  font: 680 clamp(39px, 4.7vw, 68px)/1.07 "DM Sans", "Segoe UI", sans-serif;
  letter-spacing: -.058em;
  text-wrap: balance;
  margin: 19px 0 0;
  overflow-wrap: break-word;
}
.inner-photo-hero__copy > p {
  max-width: 510px;
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: #566b76;
  text-wrap: pretty;
}
.inner-photo-hero__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 25px;
  min-height: 40px;
  color: #2b4d63;
  font-size: 13px;
  font-weight: 640;
}
.inner-photo-hero__crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: #1d4667;
  transition: color .2s;
}
.inner-photo-hero__crumbs a:hover { color: #bb7957; }
.inner-photo-hero__crumbs > i { font-size: 10px; color: #bd7b58; }
.inner-photo-hero__crumbs [aria-current="page"] {
  color: #5f6d73;
  font-weight: 600;
}

.inner-photo-hero--service .inner-photo-hero__image { width: 62%; }
.inner-photo-hero--service .inner-photo-hero__image img { object-position: center 48%; }


.inner-photo-hero--product {
  background: #f6eee5;
  border-bottom-color: #e4d9cd;
}
.inner-photo-hero--product .inner-photo-hero__image { width: 56%; }
.inner-photo-hero--product .inner-photo-hero__veil {
  background: linear-gradient(90deg,
    #f6eee5 0%,
    #f6eee5 32%,
    rgba(246,238,229,.96) 43%,
    rgba(246,238,229,.63) 60%,
    rgba(35,37,40,.1) 100%);
}
.inner-photo-hero--product .inner-photo-hero__icon { background: #ecded2; color: #8c513c; }
.inner-photo-hero--product .inner-photo-hero__eyebrow { color: #8e604d; }


.inner-photo-hero--page {
  background: #e9efef;
  border-bottom-color: #d6e1e2;
}
.inner-photo-hero--page .inner-photo-hero__image { width: 55%; }
.inner-photo-hero--page .inner-photo-hero__veil {
  background: linear-gradient(90deg,
    #e9efef 0%,
    #e9efef 30%,
    rgba(233,239,239,.96) 42%,
    rgba(233,239,239,.69) 57%,
    rgba(233,239,239,.18) 100%);
}
.inner-photo-hero--page .inner-photo-hero__pattern {
  background: repeating-linear-gradient(135deg,
    transparent 0 34px, rgba(45,94,110,.035) 35px 36px, transparent 37px 74px);
}


.inner-photo-hero--post,
.inner-photo-hero--portfolio {
  color: #fff;
  background: #12354f;
  border-bottom-color: #193a50;
}
.inner-photo-hero--post .inner-photo-hero__image,
.inner-photo-hero--portfolio .inner-photo-hero__image { width: 65%; }
.inner-photo-hero--post .inner-photo-hero__veil,
.inner-photo-hero--portfolio .inner-photo-hero__veil {
  background: linear-gradient(90deg,
    #12354f 0%,
    rgba(18,53,79,.99) 32%,
    rgba(18,53,79,.88) 46%,
    rgba(18,53,79,.45) 70%,
    rgba(18,53,79,.13) 100%);
}
.inner-photo-hero--post .inner-photo-hero__copy > p,
.inner-photo-hero--portfolio .inner-photo-hero__copy > p { color: #d8e4eb; }
.inner-photo-hero--post .inner-photo-hero__eyebrow,
.inner-photo-hero--portfolio .inner-photo-hero__eyebrow { color: #ead3c4; }
.inner-photo-hero--post .inner-photo-hero__icon,
.inner-photo-hero--portfolio .inner-photo-hero__icon {
  background: rgba(247,247,245,.14);
  color: #f0c5a6;
}
.inner-photo-hero--post .inner-photo-hero__crumbs,
.inner-photo-hero--portfolio .inner-photo-hero__crumbs { color: #fff; }
.inner-photo-hero--post .inner-photo-hero__crumbs a,
.inner-photo-hero--portfolio .inner-photo-hero__crumbs a { color: #f4eee9; }
.inner-photo-hero--post .inner-photo-hero__crumbs [aria-current="page"],
.inner-photo-hero--portfolio .inner-photo-hero__crumbs [aria-current="page"] { color: #cbdce6; }


.inner-photo-hero--listing,
.inner-photo-hero--listing .inner-photo-hero__inner { min-height: 340px; }
.inner-photo-hero--listing .inner-photo-hero__inner { padding-block: 55px; }
.inner-photo-hero--listing h1 { font-size: clamp(41px, 4.7vw, 64px); }


.detail-content-section { padding-top: clamp(45px, 5.4vw, 75px); }
.detail-content-section .article-body > :first-child { margin-top: 0; }
.listing-section { padding-top: clamp(60px, 7vw, 93px); }


@media (prefers-reduced-motion: no-preference) {
  .inner-photo-hero__image img {
    animation: sanavaHeroImageIn 920ms cubic-bezier(.22,1,.36,1) both;
  }
  .inner-photo-hero__copy {
    animation: sanavaHeroCopyIn 650ms cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes sanavaHeroImageIn {
    from { opacity: .83; transform: scale(1.045); }
    to { opacity: 1; transform: scale(1.012); }
  }
  @keyframes sanavaHeroCopyIn {
    from { opacity: .75; transform: translate3d(0,15px,0); }
    to { opacity: 1; transform: translate3d(0,0,0); }
  }
}
@media (max-width: 900px) {
  .inner-photo-hero__image { width: 64%; }
  .inner-photo-hero__copy { width: min(70%, 600px); }
  .inner-photo-hero h1 { font-size: clamp(39px, 5.4vw, 55px); }
}
@media (max-width: 700px) {
  .inner-photo-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .inner-photo-hero__inner {
    order: 1;
    min-height: 0;
    padding-block: 43px 25px;
  }
  .inner-photo-hero__copy { width: 100%; }
  .inner-photo-hero h1,
  .inner-photo-hero--listing h1 {
    max-width: 100%;
    font-size: clamp(34px, 8.6vw, 47px);
    line-height: 1.085;
    margin-top: 15px;
    letter-spacing: -.055em;
  }
  .inner-photo-hero__copy > p {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.6;
    margin-top: 14px;
  }
  .inner-photo-hero__eyebrow { font-size: 11px; letter-spacing: .07em; }
  .inner-photo-hero__icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; }
  .inner-photo-hero__crumbs { font-size: 12px; margin-top: 18px; gap: 8px; }
  .inner-photo-hero__crumbs a { min-height: 44px; }
  .inner-photo-hero__crumbs > span { overflow-wrap: anywhere; }
  
  .inner-photo-hero__image,
  .inner-photo-hero--service .inner-photo-hero__image,
  .inner-photo-hero--page .inner-photo-hero__image,
  .inner-photo-hero--product .inner-photo-hero__image,
  .inner-photo-hero--post .inner-photo-hero__image,
  .inner-photo-hero--portfolio .inner-photo-hero__image {
    position: relative;
    order: 2;
    inset: auto;
    width: calc(100% - var(--page-padding)*2);
    margin: 0 auto 0;
    height: clamp(175px, 51vw, 270px);
    border-radius: 9px 9px 0 0;
  }
  .inner-photo-hero__image img { object-position: center 46%; }
  .inner-photo-hero__veil { display: none; }
  .inner-photo-hero__pattern {
    inset: 0 0 auto;
    height: 60%;
    opacity: .45;
  }
  .inner-photo-hero--listing .inner-photo-hero__inner { min-height: 0; padding-block: 39px 22px; }
  .inner-photo-hero--post .inner-photo-hero__copy > p,
  .inner-photo-hero--portfolio .inner-photo-hero__copy > p { color: #dce6ea; }
  .detail-content-section { padding-top: 44px; }
  .listing-section { padding-top: 51px; }
}
@media (max-width: 370px) {
  .inner-photo-hero h1,
  .inner-photo-hero--listing h1 { font-size: clamp(32px, 8.5vw, 38px); }
  .inner-photo-hero__crumbs { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .inner-photo-hero__image img,
  .inner-photo-hero__copy {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
