.editorial-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-credit { font-size: 10px; font-weight: 400; color: var(--muted); text-decoration: none; }
.photo-credit:hover { text-decoration: underline; }

.photo-hero { position: relative; isolation: isolate; background: #17382f; color: white; }
.photo-hero > .editorial-image { position: absolute; inset: 0; z-index: -2; object-position: center 72%; }
.photo-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #14292024; }
.photo-hero::after { content: ""; position: absolute; inset: 0 auto 0 0; width: max(52%, calc((100% - 1200px) / 2 + 630px)); z-index: -1; background: #10251fcc; }
.photo-hero .hero-inner { min-height: 590px; padding-block: 44px; }
.photo-hero .hero-copy { max-width: 540px; }
.photo-hero h1 { font-size: 60px; line-height: 1.06; }
.photo-hero h1 span { color: #d4eddb; }
.photo-hero .eyebrow { color: #d4eddb; font-size: 10px; }
.photo-hero .status-line { background: #b3d5bd; }
.photo-hero .hero-description { color: #f1f5f2; max-width: 425px; font-size: 16px; }
.photo-hero .hero-note { color: #cbd8d1; }
.photo-hero .hero-actions > .text-link { color: #fff; }
.hero-location { position: absolute; right: 0; bottom: 25px; text-align: right; display: grid; gap: 4px; background: #10251fe8; padding: 10px 14px; }
.hero-location > span { font-size: 10px; font-weight: 600; }
.hero-location .photo-credit { color: #e8f0ea; }

.workflow-with-app { display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; align-items: center; }
.workflow-with-app .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.workflow-app > div { display: flex; justify-content: center; gap: 24px; align-items: center; }
.workflow-app img { height: 350px; width: auto; max-width: 46%; object-fit: contain; }
.workflow-app img:last-child { margin-top: 36px; }
.workflow-app figcaption { text-align: center; margin-top: 20px; font-size: 11px; color: var(--muted); }

.agency-photography { background: #edf3ef; }
.agency-photography .agency-inner { grid-template-columns: 1.2fr 1fr; gap: 65px; }
.agency-photo > img { aspect-ratio: 4 / 3; object-position: 46% center; height: auto; }
.agency-photo figcaption { margin-top: 6px; }
.agency-photography h2 { margin-bottom: 25px; }

.guide-card-photo { border: none; border-radius: 0; }
.guide-card-photo > a { padding: 0; }
.guide-photo { aspect-ratio: 16 / 10; overflow: hidden; }
.guide-photo .photo-street { object-position: center bottom; }
.guide-photo .photo-cafe { object-position: center 36%; }
.guide-photo .photo-studio { object-position: center 65%; }
.guide-card-copy { flex: 1; display: flex; flex-direction: column; padding: 24px 0 8px; }
.guide-card-copy .guide-card-top { margin-bottom: 16px; }
.guide-card-photo:hover h3 { color: var(--green); text-decoration: underline; text-underline-offset: 5px; }
.article-photo { margin-top: 30px; max-width: 1100px; }
.article-photo > img { aspect-ratio: 2 / 1; height: auto; }
.article-photo > .photo-street { object-position: center bottom; }
.article-photo > .photo-cafe { object-position: center 37%; }
.article-photo figcaption { margin-top: 8px; }
.detail-photo { position: sticky; top: 120px; }
.detail-photo > img { aspect-ratio: 4 / 3; height: auto; }
.detail-photo figcaption { margin-top: 8px; }

@media (max-width: 1100px) {
    .photo-hero .hero-copy { max-width: 48%; }
    .photo-hero h1 { font-size: 52px; }
    .photo-hero .hero-description { font-size: 15px; }
    .photo-hero .eyebrow { font-size: 9px; }
    .workflow-with-app { gap: 35px; }
    .workflow-app > div { gap: 14px; }
    .workflow-app img { height: 290px; }
    .agency-photography .agency-inner { gap: 38px; }
}
@media (max-width: 850px) {
    .photo-hero .hero-inner { min-height: 570px; }
    .photo-hero .hero-copy { max-width: 58%; }
    .photo-hero::after { width: 65%; }
    .photo-hero h1 { font-size: 48px; }
    .photo-hero .hero-actions { flex-direction: row; align-items: center; }
    .photo-hero .hero-actions .text-link { font-size: 12px; }
    .hero-location { right: 0; bottom: 18px; max-width: 30%; }
    .hero-location > span, .hero-location .photo-credit { font-size: 8px; }
    .workflow-with-app { grid-template-columns: 1fr; }
    .workflow-app img { height: 330px; }
    .workflow-app > div { gap: 36px; }
    .agency-photography .agency-inner { gap: 28px; }
    .agency-photography h2 { font-size: 30px; }
}
@media (max-width: 600px) {
    .photo-hero .hero-inner { min-height: 515px; padding-block: 34px 60px; }
    .photo-hero > .editorial-image { object-position: 70% bottom; }
    .photo-hero::after { width: 100%; background: #10251fa3; }
    .photo-hero .hero-copy { max-width: 100%; }
    .photo-hero h1 { font-size: 40px; }
    .photo-hero h1 br:first-of-type { display: initial; }
    .photo-hero .eyebrow { font-size: 8px; }
    .photo-hero .hero-description { max-width: 360px; font-size: 15px; }
    .photo-hero .hero-actions { gap: 20px; }
    .hero-location { right: auto; left: 0; bottom: 17px; max-width: 100%; display: flex; gap: 12px; align-items: center; background: none; padding: 0; text-align: left; }
    .hero-location > span, .hero-location .photo-credit { font-size: 8px; }
    .workflow-app > div { gap: 20px; }
    .workflow-app img { height: 265px; }
    .agency-photography .agency-inner { grid-template-columns: 1fr; gap: 26px; }
    .agency-photo > img { aspect-ratio: 3 / 2; }
    .guide-grid { gap: 35px; }
    .guide-card-copy { padding-top: 20px; }
    .article-photo { margin-top: 22px; }
    .article-photo > img { aspect-ratio: 4 / 3; }
    .detail-photo { position: static; }
}
@media (max-width: 370px) {
    .photo-hero h1 { font-size: 37px; }
    .photo-hero .hero-actions { gap: 14px; }
    .photo-hero .hero-actions > .text-link { font-size: 11px; }
    .photo-hero .hero-inner { min-height: 500px; }
    .photo-hero .eyebrow { font-size: 7px; }
}