/* Approved architectural concepts: focal positions mirror assets/renovation-concepts.json. */
.concept-image{object-fit:cover;object-position:50% 50%;border-radius:var(--radius)}
.concept-image-living-hero,.concept-image-kitchen,.concept-image-bathroom,
.concept-image-whole-home,.concept-image-bedroom,.concept-image-entrance,
.concept-image-terrace{object-position:50% 50%}
.concept-image-extension{object-position:55% 50%}
.concept-image-workspace{object-position:50% 65%}
.concept-image-vanity{object-position:50% 55%}
.concept-image-staircase{object-position:60% 45%}
/* Retain the complete architectural composition rather than a tall centre crop. */
.hero-media:has(.concept-image-living-hero){aspect-ratio:4/3}
.hero-image.concept-image{height:100%}
.hero-media-inner:has(.concept-image){border-radius:var(--radius)}
.inner-hero-image .concept-image{height:100%;width:100%}
.gallery-card .concept-image,.inspo-card .concept-image{aspect-ratio:4/3}
.inspo-card .frame:has(.concept-image){aspect-ratio:4/3}
.philosophy-media:has(.concept-image-workspace){min-height:0;aspect-ratio:4/3}
.platform-card .frame:has(.concept-image){aspect-ratio:4/3}
.case-study .frame:has(.concept-image){aspect-ratio:4/3}
.gallery-card .frame:has(.concept-image),.inspo-card .frame:has(.concept-image),
.platform-card .frame:has(.concept-image),.case-study .frame:has(.concept-image){background:var(--color-sage);border-radius:var(--radius);overflow:hidden}
.platform-card .concept-image,.case-study .concept-image{transition:transform .7s var(--ease-out)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .platform-card:hover .concept-image,.case-study:hover .concept-image{transform:scale(1.025)}
}
@media(max-width:1020px){.hero-media:has(.concept-image-living-hero){max-width:100%;aspect-ratio:4/3}}
/* Phones: the hero photograph leads, full-bleed (see the image-first block in site.css). */
@media(max-width:760px){.hero-media:has(.concept-image-living-hero){max-width:none;aspect-ratio:3/2}}
/* Short phones: a wider crop keeps the headline and postcode entry closer to the fold. */
@media(max-width:760px) and (max-height:700px){.hero-media:has(.concept-image-living-hero){aspect-ratio:16/9}}
@media(max-width:600px){
  .inner-hero-image:has(.concept-image){height:auto;aspect-ratio:4/3}
  .philosophy-media:has(.concept-image-workspace){min-height:0;aspect-ratio:4/3}
}
@media(prefers-reduced-motion:reduce){
  .concept-image{transition:none!important;animation:none!important}
  .service-tile:hover .concept-image,.gallery-card:hover .concept-image,
  .inspo-card:hover .concept-image,.platform-card:hover .concept-image,
  .case-study:hover .concept-image{transform:none}
  .hero-media-inner:has(.concept-image){animation:none}
}
/* Licensed photographs share the existing image frames and interaction hooks. */
.concept-image-extension,.concept-image-workspace,.concept-image-vanity,.concept-image-staircase{object-position:50% 50%}
.photography-notice{max-width:var(--wrap,1200px);margin:0 auto;padding:24px 5%;text-align:center}
.compare-stage .concept-image{width:100%;height:100%;object-fit:cover}
.craft-reference{max-width:800px;margin:48px auto 0}
.craft-reference .frame{aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius)}
.craft-reference img{width:100%;height:100%;object-fit:cover}
.craft-reference figcaption{margin-top:12px;font-size:.8rem;color:var(--color-forest-deep)}
/* Keep portrait source photographs inside the same stable service-hero frame. */
.inner-hero-image>picture{position:absolute;inset:0;display:block;overflow:hidden}
/* Reserve the visual board before its module inserts responsive photographs. */
[data-studio-app]:empty{min-height:760px}
@media print{[data-studio-app]:empty{min-height:0}}
/* Distinguish owner-confirmed project photographs from licensed references. */
.inner-hero-image:has([data-photo-origin])::after,.service-tile:has([data-photo-origin])::after{position:absolute;left:16px;top:16px;z-index:2;max-width:calc(100% - 32px);padding:7px 10px;background:var(--color-forest-deep);color:#fff;font-size:.7rem;line-height:1.4;letter-spacing:.025em;pointer-events:none}
.inner-hero-image:has([data-photo-origin="milestone-work"])::after,.service-tile:has([data-photo-origin="milestone-work"])::after{content:"Milestone work · owner supplied"}
.inner-hero-image:has([data-photo-origin="inspiration"])::after,.service-tile:has([data-photo-origin="inspiration"])::after{content:"Renovation inspiration · not Milestone work"}
.concept-image-construction,.concept-image-site-floor,.concept-image-shower-preparation{object-position:50% 75%}