/* ===== ai9 photo system — one grade, one set of classes ===== */
/* Spec: docs/superpowers/specs/2026-07-12-photography-integration-design.md */

/* ---- HERO / PHERO layered stack ----
   z: 0 photo · 1 always-on scrim (kills #1/#9 seam, carries text contrast)
      2 video · 3 video-gated tint · 4 rings/glow (quieter) · 5 content */
.hero,.phero{isolation:isolate}
.hero-photo-wrap{position:absolute;inset:0;z-index:0}
.hero-photo-wrap picture{display:block;width:100%;height:100%}
.hero-photo{width:100%;height:100%;object-fit:cover;object-position:center 68%}
.has-photo .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(58,46,77,.94) 0%,rgba(58,46,77,.84) 34%,rgba(58,46,77,.38) 64%,rgba(46,36,64,.42) 100%)}
.hero .hero-video{z-index:2}
.hero .hero-tint{z-index:3;pointer-events:none}
/* While the video plays, the photo ghosts over it at low opacity instead of being replaced.
   Photo lifts to z3 (tint, later in DOM at equal z, still paints above it for text contrast).
   Browsers without :has() keep the old behavior (video covers photo). */
.hero-photo-wrap{transition:opacity 1s ease,z-index 0s 0s;pointer-events:none}
.hero:has(.hero-video.is-playing) .hero-photo-wrap{z-index:3;opacity:.35;mix-blend-mode:soft-light}
.has-photo .hero-ring,.has-photo .hero-glow{z-index:4;opacity:.55;pointer-events:none}
.hero.has-photo .wrap,.phero.has-photo .wrap{z-index:5}
[dir=rtl] .hero-photo{transform:scaleX(-1)}

/* ---- Full-bleed breather & texture divider ---- */
.photo-bleed{display:block;position:relative;overflow:hidden;aspect-ratio:3/1}
.photo-bleed picture{display:block;width:100%;height:100%}
.photo-bleed img{display:block;width:100%;height:100%;object-fit:cover}
.photo-divider{aspect-ratio:4/1}
@media (max-width:680px){.photo-bleed{aspect-ratio:16/9}.photo-divider{aspect-ratio:2/1}}

/* ---- In-grid frame (22px radius, matches cards) ---- */
.photo-frame{border-radius:22px;overflow:hidden;display:block}
.photo-frame picture{display:block;width:100%;height:100%}
.photo-frame img{display:block;width:100%;height:100%;object-fit:cover}
.svc-head{aspect-ratio:21/9;margin-bottom:46px}
@media (max-width:680px){.svc-head{aspect-ratio:16/9;margin-bottom:32px}}

/* ---- Shared plum correction (the ONLY per-image adjustment allowed) ---- */
.photo-tint{position:relative}
.photo-tint::after{content:"";position:absolute;inset:0;background:#3A2E4D;opacity:.12;mix-blend-mode:multiply;pointer-events:none}

/* ---- Quote on photo (approach block) ---- */
.photo-quote{position:relative;border-radius:24px;overflow:hidden;min-height:520px;display:flex;align-items:flex-end}
.photo-quote picture{position:absolute;inset:0}
.photo-quote img{width:100%;height:100%;object-fit:cover}
.photo-quote::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(58,46,77,.08) 0%,rgba(46,36,64,.72) 55%,rgba(46,36,64,.88) 100%)}
.pq-body{position:relative;padding:44px 40px}
.pq-kick{font:600 13px/1 'Work Sans';letter-spacing:.26em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.photo-quote blockquote{font:500 italic 25px/1.45 'Fraunces';color:var(--ivory);margin:0}
[dir=rtl] .photo-quote blockquote{font-family:'Amiri'}
[dir=rtl] .pq-kick{font-family:'Tajawal';letter-spacing:.08em}
@media (max-width:680px){.photo-quote{min-height:420px}.pq-body{padding:32px 26px}.photo-quote blockquote{font-size:21px}}

/* ---- CTA band photo variant ---- */
.cta{position:relative;overflow:hidden}
.cta-bg{position:absolute;inset:0;z-index:0}
.cta-bg picture{display:block;width:100%;height:100%}
.cta-bg img{width:100%;height:100%;object-fit:cover}
.cta-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(46,36,64,.93),rgba(90,69,120,.80))}
.cta>h2,.cta>p,.cta>a{position:relative;z-index:2}
[dir=rtl] .cta-bg img{transform:scaleX(-1)}

/* ---- About: photo inside .ceophoto ---- */
.ceophoto .ceo-img{position:absolute;inset:0;z-index:0}
.ceophoto .ceo-img picture{display:block;width:100%;height:100%}
.ceophoto .ceo-img img{width:100%;height:100%;object-fit:cover}
.ceophoto.has-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(58,46,77,0) 40%,rgba(46,36,64,.78) 100%)}
.ceophoto.has-photo .cap{z-index:2}

/* ---- Shared components (teardown offer) ---- */
.teardown{background:var(--plum);border-radius:24px;padding:52px 48px;color:var(--ivory);text-align:center;max-width:820px;margin:0 auto}
.td-kick{font:600 13px/1 'Work Sans';letter-spacing:.26em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.td-h{font:600 34px/1.15 'Fraunces';letter-spacing:-.02em;margin-bottom:14px}
.td-p{font:300 18px/1.65 'Work Sans';color:#D8CEE8;max-width:560px;margin:0 auto 30px}
.btn-wa{display:inline-block;font:600 16px/1 'Work Sans';padding:18px 34px;border-radius:44px;text-decoration:none;background:var(--amber);color:#3A2308;transition:.2s}
.btn-wa:hover{filter:brightness(1.07)}
[dir=rtl] .td-kick{font-family:'Tajawal';letter-spacing:.08em}
[dir=rtl] .td-h{font-family:'Amiri'}
[dir=rtl] .td-p,[dir=rtl] .btn-wa{font-family:'Tajawal'}
@media (max-width:680px){.teardown{padding:38px 26px;border-radius:20px}.td-h{font-size:26px}.btn-wa{display:block}}