/* Photographic service language. Grain is a static, non-destructive layer. */
:root { --photo-grain: url('/assets/textures/film-grain.svg'); }
.coastal-frame { position: relative; display: block; overflow: hidden; isolation: isolate; background: #e5eaec; }
.coastal-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.84) contrast(.98); }
.coastal-frame::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: var(--photo-grain); background-size: 180px 180px; opacity: .22; mix-blend-mode: soft-light; }
.image-content:not(.coastal-frame), .featured-project-image, .portfolio-item { position: relative; isolation: isolate; }
.image-content:not(.coastal-frame)::after, .featured-project-image::after, .portfolio-item:not(.coastal-frame)::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background-image: var(--photo-grain); background-size: 180px 180px; opacity: .18; mix-blend-mode: soft-light; }
.lookbook-photos .coastal-frame { aspect-ratio: 3 / 4; }
.lookbook-photos .coastal-frame img { aspect-ratio: auto; }
.lookbook-photos figcaption { letter-spacing: .07em; font-size: 12px; }
.lookbook-copy h2 em { color: #183d50; }
.photo-service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px 28px; margin-top: 36px; }
.photo-service-grid .simple-service { border: 0; padding: 0; overflow: visible; color: #102b3c; }
.photo-service-grid .category-art { position: relative; display: block; height: auto; margin: 0; aspect-ratio: 4 / 5; background: #e5eaec; }
.photo-service-grid .category-art::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg,#0313230a,#03132366 52%,#03132320); }
.photo-service-grid .category-art img { transition: transform .5s ease; }
.photo-service-grid .photo-title { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; margin: 0; padding: 24px; text-align: center; font-size: clamp(24px,2.4vw,36px); font-weight: 500; line-height: 1.35; letter-spacing: .09em !important; text-transform: uppercase; color: #fff !important; text-shadow: 0 2px 18px #03132360; }
.photo-service-grid .simple-service .photo-title { color: #fff !important; }
.photo-service-grid .photo-caption { display: flex; align-items: flex-start; gap: 16px; padding-top: 15px; }
.photo-service-grid .photo-caption p { padding: 0; margin: 0; flex: 1; font-size: 17px; line-height: 1.5; }
.photo-service-grid .photo-caption > span { flex-shrink: 0; color: #92635d; font-size: 23px; line-height: 1.2; }
.photo-service-grid .simple-service:focus-visible { outline: 3px solid #a16a61; outline-offset: 6px; }
.photo-service-grid .simple-service:hover .category-art img { transform: scale(1.025); }
.photography-note { font-size: 13px !important; color: #66747d; margin: 20px 0 0; }
.services-photo-intro { padding: 72px 0 88px; }
.services-photo-intro h2 { margin: 16px 0; }
.services-photo-intro > .container > p { max-width: 580px; }
.image-content.coastal-frame { aspect-ratio: 4 / 5; max-height: 620px; }
.image-content.coastal-frame > img { border-radius: 0; box-shadow: none; }
.image-content.coastal-frame > .photo-credit { position: absolute; z-index: 3; bottom: 12px; left: 12px; margin: 0; padding: 5px 9px; color: #fff; background: #031323b3; font: 12px/1.4 var(--font-heading); letter-spacing: .03em; }
.service-hero.coastal-hero { background-position: center 55% !important; }
.service-hero.coastal-hero::after { content: ''; position: absolute; inset: 0; background-image: var(--photo-grain); opacity: .16; mix-blend-mode: soft-light; pointer-events: none; }
.portfolio-item.coastal-frame::after { z-index: 1; }
.portfolio-item.coastal-frame .portfolio-item-overlay { z-index: 2; }
/* Keep the planner compact and the selection state obvious on touch screens. */
.quiz-service-grid .service-card { border-radius: 3px; border-color: #d8e0e5; }
.quiz-service-grid .service-artwork { position: relative; display: block; height: 142px; }
.quiz-service-grid .service-artwork::before { content: ''; position: absolute; inset: 0; z-index: 1; background: #03132350; }
.quiz-service-grid .service-copy { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 18px 8px; }
.quiz-service-grid .service-copy strong { color: #fff; font-size: 17px; font-weight: 500; text-transform: uppercase; letter-spacing: .065em; text-shadow: 0 1px 10px #03132380; }
.quiz-service-grid .service-check { z-index: 4; width: 20px; height: 20px; top: 7px; right: 7px; background: #ffffffd9; border: 1px solid #ffffffc9; color: #fff; font-size: 13px; }
.quiz-service-grid .service-card.is-selected { border-color: #0d3044; box-shadow: 0 0 0 2px #0d3044; }
.quiz-service-grid .service-card.is-selected .service-check { background: #0d3044; border-color: white; }
.quiz-service-grid .service-card.is-selected .service-artwork::before { background: #03132330; }
.quiz-service-grid [data-service="pavers"] .service-artwork img { object-position: center 88%; }
.photo-service-grid a[href$="service=pavers"] .category-art img { object-position: center 80%; }
.quiz-page .photo-service-note { font-size: 11px; line-height: 1.5; color: #6b7780; text-align: center; margin: 18px 0 0; }
@media (max-width: 700px) {
  .photo-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 14px; margin-top: 26px; }
  .photo-service-grid .photo-title { font-size: 21px; padding: 12px; letter-spacing: .055em !important; }
  .photo-service-grid .photo-caption { padding-top: 11px; gap: 8px; }
  .photo-service-grid .photo-caption p { font-size: 15px; line-height: 1.45; }
  .photo-service-grid .photo-caption > span { font-size: 20px; }
  .lookbook-photos figcaption { font-size: 10px; letter-spacing: .035em; }
  .services-photo-intro { padding: 46px 0; }
  .image-content.coastal-frame { max-height: 480px; }
}
@media (max-width: 540px) {
  .quiz-service-grid .service-artwork { height: 104px; }
  .quiz-service-grid .service-copy strong { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-service-grid .category-art img { transition: none; }
  .photo-service-grid .simple-service:hover .category-art img { transform: none; }
}