/* =====================================================================
   PHOTOGRAPHY — page-specific styles (photography.html)
   Reuses tokens + chrome from styles.css (:root, .mp-sec, .mp-kicker,
   .mp-title, .mp-grad, .nh-btn, .wd-cta) and the shared anim.js attrs
   (data-reveal / data-reveal-stagger). Everything here is namespaced
   .pho-* so it cannot leak into other pages or collide with styles.css.
   ===================================================================== */

/* ---- shared centered section header (local copy, pho-scoped) ---- */
.pho-head{text-align:center;max-width:46rem;margin:0 auto clamp(1.4rem,3.2vh,2.4rem)}
.pho-head .mp-kicker{margin-left:auto;margin-right:auto}
.pho-head__sub{font-size:clamp(.86rem,1.3vw,1rem);line-height:1.6;color:var(--muted);font-weight:300;margin:.4rem auto 0;max-width:42rem}

/* generic section band — comfortable, not forced full-height like .mp-sec */
.pho-sec{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto;
  padding:clamp(3rem,8vh,5.5rem) clamp(1.2rem,5vw,2.5rem)}

/* =====================================================================
   1 · HERO
   ===================================================================== */
.pho-hero{position:relative;z-index:1;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  padding:calc(var(--navh) + 3vh) clamp(1.2rem,5vw,3rem) 5vh}
.pho-hero__grid{width:100%;max-width:1320px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.pho-hero__copy{min-width:0}
.pho-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.42rem .95rem;border-radius:999px;margin-bottom:1.3rem;
  border:1px solid rgba(168,85,247,.42);background:rgba(168,85,247,.06);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#cdbcf2}
.pho-badge i{width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,#ff2e9a,#a855f7);box-shadow:0 0 8px rgba(168,85,247,.9)}
.pho-hero__title{font-size:clamp(2.3rem,6vw,4.2rem);line-height:1;font-weight:200;text-transform:uppercase;
  letter-spacing:.02em;color:#fff;margin:0}
.pho-hero__title .mp-grad{font-weight:500}
.pho-hero__body{position:relative;padding-left:1.1rem;font-size:clamp(.9rem,1.2vw,1.06rem);line-height:1.7;
  color:var(--muted);font-weight:300;max-width:34rem;margin:1.5rem 0 1.8rem}
.pho-hero__body::before{content:"";position:absolute;left:0;top:.25em;bottom:.25em;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#ff2e9a,#a855f7,#3b82f6)}
.pho-hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.9rem}
.pho-hero__mini{list-style:none;display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0}
.pho-hero__mini li{display:inline-flex;align-items:center;gap:.45rem;font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;color:#b7b2c9}
.pho-hero__mini li:not(:last-child){margin-right:.85rem;padding-right:.85rem;border-right:1px solid rgba(255,255,255,.16)}
.pho-hero__mini-ico{display:inline-grid;place-items:center;width:17px;height:17px;color:#d06bf0}
.pho-hero__mini-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* hero visual — a "viewfinder" framed image with HUD chrome */
.pho-hero__stage{position:relative;min-width:0;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  border:1px solid rgba(168,85,247,.32);
  box-shadow:0 50px 110px -38px rgba(120,40,210,.7),inset 0 1px 0 rgba(255,255,255,.05)}
.pho-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.05) contrast(1.02)}
.pho-hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,3,9,.12) 0,transparent 28%,transparent 60%,rgba(6,3,9,.66) 100%)}
/* corner viewfinder brackets */
.pho-bracket{position:absolute;width:34px;height:34px;border:2px solid rgba(255,255,255,.62);pointer-events:none}
.pho-bracket--tl{top:14px;left:14px;border-right:0;border-bottom:0}
.pho-bracket--tr{top:14px;right:14px;border-left:0;border-bottom:0}
.pho-bracket--bl{bottom:14px;left:14px;border-right:0;border-top:0}
.pho-bracket--br{bottom:14px;right:14px;border-left:0;border-top:0}
/* HUD reticule chip */
.pho-hud{position:absolute;top:18px;left:54px;display:inline-flex;align-items:center;gap:.5rem;
  padding:.32rem .7rem;border-radius:8px;background:rgba(6,3,9,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#e7defb}
.pho-hud i{width:7px;height:7px;border-radius:50%;background:#ff2e9a;box-shadow:0 0 9px #ff2e9a;animation:pho-blink 2.2s ease-in-out infinite}
@keyframes pho-blink{0%,100%{opacity:1}50%{opacity:.25}}
.pho-hud b{font-weight:600;color:#fff}
/* live caption strip on the image bottom */
.pho-hero__cap{position:absolute;left:18px;bottom:16px;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:#cfc7e3;font-weight:600}

/* =====================================================================
   2 · SUB-SERVICES BREAKDOWN
   ===================================================================== */
.pho-svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(.9rem,1.7vw,1.3rem)}
.pho-svc{position:relative;display:flex;flex-direction:column;padding:clamp(1.2rem,1.8vw,1.6rem);border-radius:16px;
  border:1px solid rgba(168,85,247,.2);background:linear-gradient(165deg,rgba(22,16,40,.55),rgba(10,8,20,.5));
  box-shadow:0 26px 60px -34px rgba(0,0,0,.8);transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.pho-svc:hover{transform:translateY(-5px);border-color:rgba(168,85,247,.55);
  box-shadow:0 34px 74px -30px rgba(120,50,210,.55)}
.pho-svc__ico{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:11px;margin-bottom:.9rem;
  border:1px solid rgba(168,85,247,.42);background:linear-gradient(150deg,rgba(168,85,247,.2),rgba(255,46,154,.08));color:#d6a3ff;
  box-shadow:inset 0 0 14px -4px rgba(168,85,247,.55)}
.pho-svc__ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pho-svc__h{font-size:1.02rem;font-weight:600;color:#fff;margin:0 0 .4rem;letter-spacing:.01em}
.pho-svc__p{font-size:.84rem;line-height:1.55;color:#a6a3bb;font-weight:300;margin:0}

/* =====================================================================
   3 · PROCESS / HOW IT WORKS
   ===================================================================== */
.pho-proc{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(.9rem,1.8vw,1.4rem);
  counter-reset:phostep}
.pho-step{position:relative;padding:clamp(1.2rem,1.8vw,1.6rem) clamp(1.2rem,1.8vw,1.5rem) 1.4rem;border-radius:16px;
  border:1px solid rgba(168,85,247,.18);background:linear-gradient(165deg,rgba(20,15,36,.5),rgba(10,8,20,.45));
  overflow:hidden}
.pho-step::before{counter-increment:phostep;content:counter(phostep,decimal-leading-zero);
  display:block;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;line-height:1;margin-bottom:.7rem;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.pho-step__h{font-size:.86rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin:0 0 .4rem}
.pho-step__p{font-size:.8rem;line-height:1.5;color:#9a93b3;font-weight:300;margin:0}

/* =====================================================================
   4 · WHY SOVEREIGN ROW / DELIVERABLES
   ===================================================================== */
.pho-why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.pho-why__media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:5/4;
  border:1px solid rgba(168,85,247,.28);box-shadow:0 44px 100px -40px rgba(110,40,200,.65)}
.pho-why__media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.04)}
.pho-why__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(168,85,247,.14),transparent 50%,rgba(255,46,154,.12))}
.pho-why__copy h2{margin-bottom:.7rem}
.pho-why__lead{font-size:clamp(.88rem,1.2vw,1.02rem);line-height:1.65;color:var(--muted);font-weight:300;margin:0 0 1.3rem}
.pho-feat{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.pho-feat li{display:flex;gap:.8rem;align-items:flex-start}
.pho-feat__ico{flex:0 0 auto;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;margin-top:.1rem;
  border:1px solid rgba(168,85,247,.4);background:rgba(168,85,247,.08);color:#d6a3ff}
.pho-feat__ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pho-feat b{display:block;font-size:.84rem;font-weight:600;color:#fff;margin-bottom:.15rem;letter-spacing:.01em}
.pho-feat span{display:block;font-size:.78rem;line-height:1.5;color:#9a93b3;font-weight:300}

/* =====================================================================
   5 · PACKAGES (carries the existing checkout cards)
   ===================================================================== */
.pho-pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:clamp(.9rem,1.6vw,1.2rem)}
.pho-card{position:relative;display:flex;flex-direction:column;border:1px solid rgba(168,85,247,.22);border-radius:16px;
  padding:1.5rem;background:linear-gradient(180deg,rgba(20,16,40,.55),rgba(10,9,22,.45));
  box-shadow:0 26px 60px -36px rgba(0,0,0,.85);transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.pho-card:hover{transform:translateY(-4px);border-color:rgba(255,46,154,.5);
  box-shadow:0 32px 70px -32px rgba(255,46,154,.45)}
.pho-card__h{font-size:1.04rem;font-weight:600;margin:0 0 .25rem;color:#fff;letter-spacing:.01em}
.pho-card__price{font-size:1.55rem;font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;margin:0 0 .9rem;line-height:1;font-variant-numeric:tabular-nums}
.pho-card ul{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.45rem}
.pho-card li{position:relative;padding-left:1.35rem;font-size:.86rem;line-height:1.5;color:#a6a3bb;font-weight:300}
.pho-card li::before{content:"\2713";position:absolute;left:0;color:#b9a3ff;font-weight:700}
.pho-card .nh-btn{margin-top:auto;width:100%}
.pho-note{color:#8a87a0;font-size:.92rem;line-height:1.6;margin-top:1.6rem;text-align:center}
.pho-note a{color:#b9a3ff}
.pho-note a:hover{color:#fff}

/* =====================================================================
   6 · FAQ
   ===================================================================== */
.pho-faq{display:grid;gap:.9rem;max-width:52rem;margin:0 auto}
.pho-faq__item{border:1px solid rgba(168,85,247,.18);border-radius:14px;padding:1.1rem 1.3rem;
  background:linear-gradient(165deg,rgba(20,15,36,.5),rgba(10,8,20,.42))}
.pho-faq__q{font-weight:600;color:#fff;margin:0 0 .4rem;font-size:.96rem;letter-spacing:.01em}
.pho-faq__a{color:#a6a3bb;line-height:1.65;margin:0;font-size:.88rem;font-weight:300}

/* =====================================================================
   7 · RELATED SERVICES
   ===================================================================== */
.pho-rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(.9rem,1.7vw,1.3rem)}
.pho-rel{position:relative;display:flex;flex-direction:column;padding:clamp(1.3rem,2vw,1.7rem);border-radius:16px;
  border:1px solid rgba(168,85,247,.2);background:linear-gradient(165deg,rgba(22,16,40,.5),rgba(10,8,20,.45));
  text-decoration:none;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.pho-rel:hover{transform:translateY(-5px);border-color:rgba(168,85,247,.55);
  box-shadow:0 30px 66px -30px rgba(120,50,210,.5)}
.pho-rel__ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;margin-bottom:.85rem;
  border:1px solid rgba(168,85,247,.42);background:linear-gradient(150deg,rgba(168,85,247,.2),rgba(255,46,154,.08));color:#d6a3ff}
.pho-rel__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pho-rel__h{font-size:1rem;font-weight:600;color:#fff;margin:0 0 .35rem;letter-spacing:.01em}
.pho-rel__p{font-size:.82rem;line-height:1.5;color:#9a93b3;font-weight:300;margin:0 0 .9rem}
.pho-rel__cta{margin-top:auto;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#d6a3ff;
  display:inline-flex;align-items:center;gap:.4rem}
.pho-rel__cta span{transition:transform .3s var(--ease)}
.pho-rel:hover .pho-rel__cta span{transform:translateX(4px)}

/* =====================================================================
   SIGNATURE · APERTURE / IRIS REVEAL  (scroll-driven via anim.js --p)
   Progressive enhancement: the DEFAULT (no-JS / reduced-motion) state
   shows the image fully open + sharp and the caption visible. The
   scrub-driven iris + focus-pull only apply inside the no-preference
   media query, where anim.js is present to feed --p.
   ===================================================================== */
.pho-aperture{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto;
  padding:clamp(3rem,8vh,5.5rem) clamp(1.2rem,5vw,2.5rem)}
.pho-aperture__stage{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,3.2rem);align-items:center}
.pho-aperture__frame{position:relative;margin:0;border-radius:20px;overflow:hidden;aspect-ratio:4/5;
  border:1px solid rgba(168,85,247,.32);
  box-shadow:0 50px 110px -40px rgba(120,40,210,.7),inset 0 1px 0 rgba(255,255,255,.05)}
.pho-aperture__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 30%;filter:saturate(1.06) contrast(1.03)}
/* iris = a vignette ring that hugs the clip edge; ring spins for camera feel */
.pho-aperture__iris{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 50% 42%,transparent 62%,rgba(6,3,9,.55) 86%,rgba(6,3,9,.9) 100%)}
.pho-aperture__ring{position:absolute;left:50%;top:42%;width:118%;aspect-ratio:1;transform:translate(-50%,-50%);
  pointer-events:none;border-radius:50%;opacity:.5;
  background:
    conic-gradient(from 0deg,transparent 0 14deg,rgba(214,163,255,.45) 14deg 16deg,transparent 16deg 60deg) ,
    conic-gradient(from 60deg,transparent 0 14deg,rgba(255,46,154,.4) 14deg 16deg,transparent 16deg 60deg);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 57%,#000 60%,transparent 61%);
  mask:radial-gradient(circle,transparent 56%,#000 57%,#000 60%,transparent 61%)}
.pho-aperture__hud{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:.45rem;
  padding:.3rem .65rem;border-radius:8px;background:rgba(6,3,9,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#e7defb}
.pho-aperture__hud i{width:6px;height:6px;border-radius:50%;background:#ff2e9a;box-shadow:0 0 8px #ff2e9a}
.pho-aperture__cap{min-width:0}
.pho-aperture__cap .mp-title{margin:.2rem 0 .6rem}
.pho-aperture__sub{font-size:clamp(.88rem,1.2vw,1.02rem);line-height:1.65;color:var(--muted);font-weight:300;margin:0;max-width:34rem}

/* motion layer — only when the visitor accepts motion AND JS feeds --p */
@media (prefers-reduced-motion:no-preference){
  .pho-aperture__stage[data-scrub]{
    /* eased reveal progress: iris fully open by the time it's centered */
    --ap:clamp(0,calc((var(--p,1) - .12) / .42),1)}
  .pho-aperture__stage[data-scrub] .pho-aperture__img{
    clip-path:circle(calc(34% + var(--ap) * 96%) at 50% 42%);
    filter:saturate(1.06) contrast(1.03) blur(calc((1 - var(--ap)) * 9px));
    transform:scale(calc(1.08 - var(--ap) * .08));
    will-change:clip-path,filter,transform}
  .pho-aperture__stage[data-scrub] .pho-aperture__iris{
    opacity:calc(1 - var(--ap) * .55)}
  .pho-aperture__stage[data-scrub] .pho-aperture__ring{
    opacity:calc(var(--ap) * .55);
    transform:translate(-50%,-50%) rotate(calc(var(--ap) * 42deg)) scale(calc(.82 + var(--ap) * .18))}
  .pho-aperture__stage[data-scrub] .pho-aperture__cap{
    opacity:var(--ap);transform:translateY(calc((1 - var(--ap)) * 22px));will-change:opacity,transform}

  /* hero viewfinder image — gentle parallax drift + settle */
  .pho-hero__img[data-scrub]{
    transform:scale(calc(1.06 - var(--p,0) * .06)) translateY(calc((var(--p,0) - .5) * -22px));
    will-change:transform}

  /* why-section media — fade up + parallax as it scrolls into frame */
  .pho-why__media[data-scrub]{
    --wp:clamp(0,calc((var(--p,1) - .05) / .4),1);
    opacity:var(--wp)}
  .pho-why__media[data-scrub] .pho-why__img{
    transform:scale(calc(1.08 - var(--wp) * .08)) translateY(calc((var(--p,0) - .5) * -18px));
    will-change:transform}
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:900px){
  .pho-hero__grid{grid-template-columns:1fr;gap:2rem}
  .pho-hero__stage{aspect-ratio:16/11;order:-1;max-width:560px;margin:0 auto;width:100%}
  .pho-why{grid-template-columns:1fr;gap:1.8rem}
  .pho-why__media{order:-1;aspect-ratio:16/10;max-width:600px;margin:0 auto;width:100%}
  .pho-aperture__stage{grid-template-columns:1fr;gap:1.6rem;text-align:center}
  .pho-aperture__frame{aspect-ratio:4/5;max-width:440px;margin:0 auto;width:100%}
  .pho-aperture__cap{margin:0 auto}
  .pho-aperture__cap .mp-kicker{margin-left:auto;margin-right:auto}
  .pho-aperture__sub{margin-left:auto;margin-right:auto}
}
@media (max-width:520px){
  .pho-hero__cta .nh-btn{width:100%;justify-content:center}
  .pho-hud{display:none}
  .pho-bracket{width:24px;height:24px}
}