/* PIIXONOVA - Header variants (WPCode 21086). Acts only on .hdr--capsule (template 21087, /kolkata/) and .hdr--gblur
   (template 21088, all other Bricks pages). Original header 20809 has neither class. Glass = /me/admin recipe (20962). */

/* Capsule: one floating iOS-glass pill, 5 px from the top */
.hdr--capsule{--cap-sh:inset 0 0 0 .5px rgba(255,255,255,.3),inset 1.8px 3px 0 -2px rgba(255,255,255,.9),inset -2px -2px 0 -2px rgba(255,255,255,.8),inset -3px -8px 1px -6px rgba(255,255,255,.55),inset -.3px -1px 4px 0 rgba(0,0,0,.1),inset -1.5px 2.5px 0 -2px rgba(0,0,0,.14),inset 0 3px 4px -2px rgba(0,0,0,.12),0 10px 30px -8px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.06),0 18px 50px -18px rgba(32,33,31,.28)}
.hdr.hdr--capsule .hdr__bar:not(._){top:calc(5px + env(safe-area-inset-top,0px));left:0;right:0;margin-inline:auto;width:min(1120px,calc(100% - 48px));border-radius:999px;--hdr-pad-y:12px;
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);transition:transform .45s cubic-bezier(.32,.72,0,1)}
/* the base sticky rule repaints the bar, so the glass fill + rim are set for both states */
.hdr.hdr--capsule:not(._) .hdr__bar:not(._),.hdr.hdr--capsule:not(._).is-sticky .hdr__bar:not(._){background:rgba(250,250,252,.62);box-shadow:var(--cap-sh)}
.hdr.hdr--capsule .hdr__bar:not(._):after{display:none}
.hdr.hdr--capsule:not(._).is-hidden:not(.is-open) .hdr__bar:not(._){transform:translateY(calc(-100% - 10px));visibility:hidden;transition:transform .45s cubic-bezier(.32,.72,0,1),visibility 0s .45s}
.hdr.hdr--capsule:not(._).is-open .hdr__bar:not(._){background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (width<=767px){
  .hdr.hdr--capsule .hdr__bar:not(._){width:calc(100% - 20px);--hdr-pad-y:4px}
  .hdr.hdr--capsule .hdr__logo:not(._){padding-left:16px}
}

/* Gradient blur: no edge. ONE 10 px blur layer (bar ::before) on an eased mask + an ivory wash with grain (bar ::after) to hide banding.
   Both live inside the bar, so they slide away with it; when the header hides (or the menu opens) they are visibility:hidden,
   so nothing is blurred while the visitor scrolls down past the videos. (R135: two page-fixed blur layers stayed alive at opacity 0
   and re-blurred the playing videos every frame, which made the opener/films area judder.) */
.hdr--gblur{--gb-h:104px}
.hdr.hdr--gblur .hdr__bar:not(._){--hdr-pad-y:clamp(8px,8px + 14 * var(--fluid),22px)}
.hdr.hdr--gblur .hdr__bar:not(._),.hdr.hdr--gblur:not(._).is-sticky .hdr__bar:not(._){background:none;box-shadow:none}
.hdr.hdr--gblur .hdr__bar:not(._):before,.hdr.hdr--gblur .hdr__bar:not(._):after{content:"";position:absolute;top:0;bottom:auto;left:0;right:0;
  height:var(--gb-h);z-index:-1;pointer-events:none;transition:opacity .3s,visibility 0s}
.hdr.hdr--gblur .hdr__bar:not(._):before{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask:linear-gradient(#000 28%,rgba(0,0,0,.7) 48%,rgba(0,0,0,.35) 66%,rgba(0,0,0,.1) 84%,transparent);mask:linear-gradient(#000 28%,rgba(0,0,0,.7) 48%,rgba(0,0,0,.35) 66%,rgba(0,0,0,.1) 84%,transparent)}
.hdr.hdr--gblur .hdr__bar:not(._):after,.hdr.hdr--gblur:not(._).is-sticky .hdr__bar:not(._):after{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .37 0 0 0 0 .32 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),rgba(249,247,243,.77);
  -webkit-mask:linear-gradient(#000 20%,rgba(0,0,0,.82) 38%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.25) 72%,rgba(0,0,0,.07) 88%,transparent);mask:linear-gradient(#000 20%,rgba(0,0,0,.82) 38%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.25) 72%,rgba(0,0,0,.07) 88%,transparent)}
.hdr.hdr--gblur:not(._):is(.is-hidden:not(.is-open),.is-open) .hdr__bar:not(._):before,.hdr.hdr--gblur:not(._):is(.is-hidden:not(.is-open),.is-open) .hdr__bar:not(._):after{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
@media (width<=767px){.hdr--gblur{--gb-h:80px}}

@media (prefers-reduced-transparency:reduce){
  .hdr.hdr--gblur .hdr__bar:not(._):before{display:none}
  .hdr.hdr--capsule .hdr__bar:not(._){-webkit-backdrop-filter:none;backdrop-filter:none}
  .hdr.hdr--capsule:not(._) .hdr__bar:not(._),.hdr.hdr--capsule:not(._).is-sticky .hdr__bar:not(._){background:#fbfaf7}
}

/* Phones: no "Menu" word, just the two lines (word kept for screen readers) */
@media (width<=767px){
  .hdr:is(.hdr--capsule,.hdr--gblur) .hdr__burger-label:not(._){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

/* PIIXONOVA - iOS glass controls (WPCode CSS snippet 20914, site-wide header, kept on Bricks pages).
   EXACT copy of the Piixonova admin glass (/me/admin = liquid-glass-kit snippets/6-ios-glass.css, README Part H):
   backdrop blur 22px + saturate 180%, the 7-stroke lit rim, float shadow, press = scale .94, ease (.32,.72,0,1),
   circle for a symbol / capsule for a word, 44 px phone / 38 px desktop. Owner rule (2026-10-24): "iOS glass" = this, and ONLY on floating controls over photos/video (not on page buttons).
   LIGHT glass everywhere, like the admin gallery header over its cover photo (owner reference /me/admin#/galleries/...): dark ink symbols.
   Header has no glass (owner). Remove this snippet to undo. */
:root{
  --pxg-ease:cubic-bezier(.32,.72,0,1);
  --pxg-light:rgba(250,250,252,.62);
  --pxg-light-rim:inset 0 0 0 .5px rgba(255,255,255,.3),inset 1.8px 3px 0 -2px rgba(255,255,255,.9),inset -2px -2px 0 -2px rgba(255,255,255,.8),inset -3px -8px 1px -6px rgba(255,255,255,.55),inset -.3px -1px 4px 0 rgba(0,0,0,.1),inset -1.5px 2.5px 0 -2px rgba(0,0,0,.14),inset 0 3px 4px -2px rgba(0,0,0,.12),0 10px 30px -8px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.06);
  --pxg-dark:rgba(40,40,44,.56);
  --pxg-dark-rim:inset 0 0 0 .5px rgba(255,255,255,.105),inset 1.8px 3px 0 -2px rgba(255,255,255,.315),inset -2px -2px 0 -2px rgba(255,255,255,.28),inset -3px -8px 1px -6px rgba(255,255,255,.1925),inset -.3px -1px 4px 0 rgba(0,0,0,.2),inset -1.5px 2.5px 0 -2px rgba(0,0,0,.28),inset 0 3px 4px -2px rgba(0,0,0,.24),0 12px 34px -8px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.3);
  --pxg-blur:blur(22px) saturate(180%);
}

/* ---- light glass capsule on the page (showcase "View Gallery" etc.) ---- */
.show__btn:not(._){min-height:44px;border:0;color:#1d1d1f;background:var(--pxg-light);-webkit-backdrop-filter:var(--pxg-blur);backdrop-filter:var(--pxg-blur);
  box-shadow:var(--pxg-light-rim);transition:transform .2s var(--pxg-ease),background .2s;-webkit-tap-highlight-color:transparent}
.show__btn:not(._):active{transform:scale(.94)}
@media (min-width:900px){.show__btn:not(._){min-height:38px}}

/* ---- the prominent "Get in touch" (showcase): solid tint like the admin's .prominent (Save), brand rose ---- */
.pxvb:not(._){min-height:44px;padding:0 24px;border:0;border-radius:999px;background:#cd3f67;color:#fff;font-weight:600;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 6px 16px -6px rgba(205,63,103,.6);transition:transform .2s var(--pxg-ease),background .2s;-webkit-tap-highlight-color:transparent}
.pxvb:not(._):before,.pxvb:not(._):after,.pxvb__glow:not(._),.pxvb__sheen:not(._),.pxvb__sparkles:not(._),.pxvb__aura:not(._){display:none}
.pxvb:not(._):active{transform:scale(.94)}
@media (min-width:900px){.pxvb:not(._){min-height:38px}}

/* ---- light glass circle: play icon on video thumbnails (44 phone / 38 desktop, symbol 20 px) ---- */
.snd:not(._){width:44px;height:44px;min-width:0;min-height:0;right:10px;bottom:10px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;
  background:var(--pxg-light);-webkit-backdrop-filter:var(--pxg-blur);backdrop-filter:var(--pxg-blur);box-shadow:var(--pxg-light-rim);
  transition:transform .2s var(--pxg-ease),background .2s;-webkit-tap-highlight-color:transparent}
.snd:not(._)>i{width:20px;height:20px;margin-left:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.2v13.6a.6.6 0 0 0 .9.5l10.8-6.8a.6.6 0 0 0 0-1L8.9 4.7a.6.6 0 0 0-.9.5z' fill='%231d1d1f'/%3E%3C/svg%3E")!important;background-size:contain;background-repeat:no-repeat;background-position:center}
.snd:not(._)::before,.snd:not(._)::after{display:none}
.snd:not(._):active{transform:scale(.94)}
@media (min-width:900px){.snd:not(._){width:38px;height:38px;right:12px;bottom:12px}.snd:not(._)>i{width:18px;height:18px}}

/* ---- light glass capsules: photo-flight Photos / Films chips (kit lg-glass removed from them in template 20842) ---- */
.pxsf-chips>a:not(._){display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:44px;padding:0 16px;border-radius:999px;color:#1d1d1f;text-decoration:none;
  background:var(--pxg-light);-webkit-backdrop-filter:var(--pxg-blur);backdrop-filter:var(--pxg-blur);box-shadow:var(--pxg-light-rim);
  transition:transform .2s var(--pxg-ease),background .2s;-webkit-tap-highlight-color:transparent}
.pxsf-chips>a:not(._) .gc-glass{display:none}
.pxsf-chips>a:not(._) .lg-text{color:inherit;text-shadow:none}
.pxsf-chips>a:not(._):active{transform:scale(.94)}
@media (min-width:900px){.pxsf-chips>a:not(._){height:38px;min-width:38px}}


/* ---- hero "Contact Us" over the photo flight: light glass capsule with ink label, like the admin's "< Galleries" button over
   its cover photo (kit lg-glass classes removed from element pnetku in template 20842, so the WebGL kit no longer loads here) ---- */
.pxsf-cta:not(._){min-height:44px;padding:0 22px;border:0;border-radius:999px;color:#1d1d1f;
  background:var(--pxg-light);-webkit-backdrop-filter:var(--pxg-blur);backdrop-filter:var(--pxg-blur);box-shadow:var(--pxg-light-rim);
  transition:transform .2s var(--pxg-ease),background .2s;-webkit-tap-highlight-color:transparent}
.pxsf-cta:not(._) .gc-glass{display:none}
.pxsf-cta:not(._) .lg-text{color:inherit;text-shadow:none}
.pxsf-cta:not(._):active{transform:scale(.94)}
.pxsf-cta:not(._):focus-visible{outline:2px solid #1d1d1f;outline-offset:3px}
@media (min-width:900px){.pxsf-cta:not(._){min-height:38px}}
.pxvb:not(._):focus-visible,.show__btn:not(._):focus-visible{outline:2px solid #1d1d1f;outline-offset:3px}
.pxsf-chips>a:not(._):focus-visible,.snd:not(._):focus-visible{outline:2px solid #1d1d1f;outline-offset:3px}

/* ---- Reduce Transparency / Increase Contrast: opaque (admin rule) ---- */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .show__btn:not(._),.pxsf-cta:not(._){background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px rgba(60,60,67,.16),0 10px 30px -8px rgba(0,0,0,.18)}
  .snd:not(._),.pxsf-chips>a:not(._){background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px rgba(60,60,67,.16),0 10px 30px -8px rgba(0,0,0,.18)}
}
@media (prefers-reduced-motion:reduce){
  .show__btn:not(._),.pxvb:not(._),.snd:not(._),.pxsf-chips>a:not(._){transition:none}
  .show__btn:not(._):active,.pxvb:not(._):active,.snd:not(._):active,.pxsf-chips>a:not(._):active{transform:none}
}

/* r34 fix: the contact popup stylesheet (widgets/pxv-contact.css) has an unscoped `.side{display:flex;flex:1 1 300px;min-width:280px}`
   that beat the v2 band caption (layered CSS) once the popup loaded, so on phones the vertical "Ring ceremony · Dubai" caption
   landed on top of the band text. Restore the caption here (unlayered wins). */
:is(#pxv2,.pxv2) .band .side:not(._){display:revert;flex:initial;flex-direction:initial;min-width:0;gap:normal}
@media (max-width:699px){:is(#pxv2,.pxv2) .band .side:not(._){display:none}}

/* r35 (owner, 2026-10-25): opening film box ~16:9 on phones (was 82svh tall). Title + subline stay on the film, scaled to fit;
   the "Wedding photographers & filmmakers · Kolkata" line sits just ABOVE the film as a plain ink label (owner). */
@media (max-width:699px){
  :is(#pxv2,.pxv2) .opener .vid:not(._){height:auto;min-height:0;aspect-ratio:16/9;overflow:visible;margin-top:44px}
  :is(#pxv2,.pxv2) .opener .vid:not(._)>img,:is(#pxv2,.pxv2) .opener .vid:not(._)>video{border-radius:inherit;transform:none!important}
  :is(#pxv2,.pxv2) .opener .vid:not(._)::after{border-radius:inherit}
  :is(#pxv2,.pxv2) .opener .vid .ov:not(._){inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:14px 64px 14px 16px}
  :is(#pxv2,.pxv2) .opener .vid .kicker:not(._){display:block;position:absolute;left:2px;right:0;bottom:100%;margin:0 0 12px}
  :is(#pxv2,.pxv2) .opener .vid .kicker:not(._)>span{display:inline;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    padding:0;color:rgba(32,33,31,.74);font-size:10.5px;font-weight:600;line-height:1.3;letter-spacing:.08em;text-transform:uppercase}
  :is(#pxv2,.pxv2) .opener .vid .kicker:not(._)>span::before,:is(#pxv2,.pxv2) .opener .vid .kicker:not(._)>span::after{display:none}
  :is(#pxv2,.pxv2) .opener .vid h2:not(._){font-size:clamp(24px,7.2vw,32px);line-height:1.04}
  :is(#pxv2,.pxv2) .opener .vid .sub:not(._){font-size:12.5px;line-height:1.35;margin:6px 0 0}
}

/* r35 (owner): reel cards' shadow was cut by the side-scrolling strip (overflow clips vertically at the 16px padding).
   More room above/below the cards, pulled back with negative margins so nothing around moves. */
:is(#pxv2,.pxv2) .reels:not(.pinned) .strip:not(._){padding-top:40px;padding-bottom:48px;margin-top:-24px;margin-bottom:-32px}

/* ---- r39 testimonials (shared template 21041): video play icons = the same light glass circle as .snd ---- */
.tst__play:not(._):not(._){width:44px;height:44px;border:0;border-radius:50%;padding:0;
  background:var(--pxg-light);-webkit-backdrop-filter:var(--pxg-blur);backdrop-filter:var(--pxg-blur);box-shadow:var(--pxg-light-rim);
  transition:transform .2s var(--pxg-ease),background .2s;-webkit-tap-highlight-color:transparent}
.tst__play:not(._):not(._) svg{display:none}
.tst__play:not(._):not(._)::before{content:"";width:20px;height:20px;margin-left:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.2v13.6a.6.6 0 0 0 .9.5l10.8-6.8a.6.6 0 0 0 0-1L8.9 4.7a.6.6 0 0 0-.9.5z' fill='%231d1d1f'/%3E%3C/svg%3E") center/contain no-repeat}
.tst__play:not(._):not(._)::after{display:none}
.tst__vcard:active .tst__play:not(._):not(._){transform:scale(.94)}
@media (min-width:900px){.tst__play:not(._):not(._){width:38px;height:38px}.tst__play:not(._):not(._)::before{width:18px;height:18px}}

/* ---- r43 (site-wide): play icons take the glass text colour, so they turn white when the glass studio (21040) detects a dark
   photo/video behind (data-pxg-tone="dark") and dark again over light ones. Drawn as a mask filled with currentColor. ---- */
.snd:not(._),.tst__play:not(._):not(._){color:#1d1d1f}
.snd:not(._):not(._)>i,.tst__play:not(._):not(._):not(._)::before{background:currentColor!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.2v13.6a.6.6 0 0 0 .9.5l10.8-6.8a.6.6 0 0 0 0-1L8.9 4.7a.6.6 0 0 0-.9.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.2v13.6a.6.6 0 0 0 .9.5l10.8-6.8a.6.6 0 0 0 0-1L8.9 4.7a.6.6 0 0 0-.9.5z'/%3E%3C/svg%3E") center/contain no-repeat}