/* Photography layer, added 26 Oct 2026. Kept separate from site.css so cached copies of site.css stay valid. */

/* Hero with photograph */
.band.has-photo .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.band.has-photo .hero-bg img{width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;animation:acc-drift 22s cubic-bezier(.45,.05,.55,.95) infinite alternate;will-change:transform,object-position}
@keyframes acc-drift{from{object-position:50% 100%;transform:scale(1.05)}to{object-position:50% 0%;transform:scale(1.12)}}
.band.has-photo .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,54,40,.55) 0%,rgba(22,54,40,0) 22%),linear-gradient(90deg,rgba(22,54,40,.9) 0%,rgba(22,54,40,.62) 45%,rgba(22,54,40,.3) 100%)}
.band.has-photo .ridges path:nth-child(1),.band.has-photo .ridges path:nth-child(2){opacity:0}
.hero-caption{position:absolute;z-index:3;right:max(20px,env(safe-area-inset-right,0px));bottom:40px;margin:0;font-size:12px;line-height:1.45;color:rgba(247,245,239,.85);max-width:min(380px,40%);text-align:right}
@media (max-width:900px){.hero-caption{position:relative;right:auto;bottom:auto;text-align:left;max-width:none;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:20px;padding-bottom:12px}}
/* Tall narrow screens (phones): the photo already fits the height, so zoom it in and pan it to keep the drone scan visible */
@media (max-aspect-ratio: 4/5){.band.has-photo .hero-bg img{animation-name:acc-drift-tall;animation-duration:18s}}
@keyframes acc-drift-tall{from{object-position:50% 50%;transform:scale(1.45) translateY(-15%)}to{object-position:50% 50%;transform:scale(1.45) translateY(15%)}}
@media (prefers-reduced-motion: reduce){.band.has-photo .hero-bg img{animation:none;transform:none;object-position:50% 50%}}

/* Figures */
figure.photo{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
figure.photo .frame{position:relative;overflow:hidden;background:var(--stone)}
figure.photo img{width:100%;height:100%;object-fit:cover}
figure.photo figcaption{font-size:13px;line-height:1.5;color:var(--slate)}

/* Home: photograph under the intro */
.intro figure.photo{margin-top:clamp(48px,6vw,80px)}
.intro figure.photo .frame{aspect-ratio:3/2}

/* Home: full width photograph in Why choose us */
.mist figure.wide{grid-column:1 / -1;margin-top:clamp(40px,5vw,72px)}
.mist figure.wide .frame{aspect-ratio:16/9}

/* Home: full bleed band */
section.photo-band{padding:0;position:relative;background:var(--ink)}
.photo-band .frame{height:clamp(480px,60vw,860px)}
.photo-band .frame img{width:100%;height:100%;object-fit:cover;display:block}
.photo-band .over{position:absolute;left:0;right:0;bottom:0;z-index:2;background:linear-gradient(0deg,rgba(14,22,18,.85),rgba(14,22,18,0));color:var(--paper)}
.photo-band .over .wrap{padding-block:60px 28px;display:flex;justify-content:space-between;align-items:end;gap:16px 32px;flex-wrap:wrap}
.photo-band .over h2{font-size:clamp(28px,3.6vw,46px);line-height:1.1;max-width:18ch}
.photo-band .over p{font-size:13px;color:rgba(247,245,239,.8);max-width:40ch}

/* About: founder portrait */
.article-body figure.photo{max-width:460px}
.article-body figure.photo .frame{aspect-ratio:4/5}