/* ============================================================
   Modern Wedding Istanbul -- CINEMATIC UPGRADE LAYER
   Isolated file. mwi-motion.css is never edited by this layer.
   Reuses the existing design tokens defined in mwi-motion.css's
   :root (--mwi-gold, --mwi-espresso, --mwi-ivory, --mwi-cloud,
   --mwi-ease-silk, --mwi-ease-soft, --mwi-font-body/heading) --
   this file is enqueued AFTER mwi-motion so those vars are always
   available here without redefinition.
   ============================================================ */

/* ---------------------------------------------------------------------
   1. Hero atmosphere mount -- the Three.js canvas sits behind the
      headline/subtitle/CTA but above the background photo, and never
      intercepts clicks.
   --------------------------------------------------------------------- */
.mwi-hero-zoom{
  position:relative;
}
#mwi-hero-canvas{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.6s var(--mwi-ease-soft, ease);
}
#mwi-hero-canvas.mwi-scene-ready{
  opacity:1;
}
.mwi-hero-zoom .e-con-inner{
  position:relative;
  z-index:2;
}
@media (max-width:767px), (prefers-reduced-motion: reduce){
  #mwi-hero-canvas{ display:none; }
}

/* ---------------------------------------------------------------------
   2. Page-transition fade overlay -- WordPress has no SPA router, so
      this fakes a cinematic transition: a full-screen wash that fades
      OUT on the page that just loaded, and fades IN (covers) right
      before an internal link navigates away. Driven by mwi-cinematic.js
      toggling .mwi-pt-out / .mwi-pt-in on #mwi-page-transition.
   --------------------------------------------------------------------- */
#mwi-page-transition{
  position:fixed;
  inset:0;
  z-index:99999;
  background:var(--mwi-espresso, #241A12);
  opacity:1;
  pointer-events:none;
  transition:opacity .6s var(--mwi-ease-silk, ease);
}
#mwi-page-transition.mwi-pt-out{
  opacity:0;
}
#mwi-page-transition.mwi-pt-in{
  opacity:1;
  pointer-events:all;
}
@media (prefers-reduced-motion: reduce){
  #mwi-page-transition{ display:none; }
}

/* ---------------------------------------------------------------------
   3. Magnetic CTA buttons -- smooth GPU-friendly transform, no layout
      shift. GSAP (or the inline-style fallback) writes translate();
      this just guarantees a will-change hint + smooth idle return.
   --------------------------------------------------------------------- */
.mwi-hero-zoom .elementor-widget-button .elementor-button,
.mwi-quicknav .elementor-button{
  will-change:transform;
}

/* ---------------------------------------------------------------------
   4. GSAP scroll-reveal opt-in -- separate from the existing
      .mwi-reveal/.mwi-in system on purpose. Only elements explicitly
      given this class are affected; everything else is untouched.
      No-JS / reduced-motion fallback keeps content visible (handled in
      mwi-cinematic.js), so this file adds no opacity:0 default here.
   --------------------------------------------------------------------- */
.mwi-gsap-reveal{
  will-change:transform, opacity;
}

/* ---------------------------------------------------------------------
   5. Footer brand-statement + newsletter -- dark WPForms override so the
      default light form skin reads correctly on the espresso footer bg.
      Scoped to .mwi-footer-newsletter only; no other WPForms instance
      sitewide (contact/consultation/signup) is touched.
   --------------------------------------------------------------------- */
.mwi-footer-newsletter{
  width:100%;
}
.mwi-footer-newsletter .wpforms-container{
  margin:0;
}
.mwi-footer-newsletter .wpforms-form{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.mwi-footer-newsletter .wpforms-field{
  flex:1 1 240px;
  padding:0 !important;
  margin:0 !important;
}
.mwi-footer-newsletter .wpforms-field-label,
.mwi-footer-newsletter .wpforms-field-sublabel{
  display:none !important;
}
.mwi-footer-newsletter input[type=email]{
  width:100%;
  background:rgba(246,241,231,0.06);
  border:1px solid rgba(246,241,231,0.22);
  border-radius:999px;
  color:var(--mwi-ivory, #F6F1E7);
  font-family:var(--mwi-font-body, 'Manrope', sans-serif);
  font-size:14px;
  padding:14px 22px;
  transition:border-color .35s var(--mwi-ease-silk, ease), background .35s var(--mwi-ease-silk, ease);
}
.mwi-footer-newsletter input[type=email]::placeholder{
  color:rgba(246,241,231,0.45);
}
.mwi-footer-newsletter input[type=email]:focus{
  outline:none;
  border-color:var(--mwi-gold, #B9924E);
  background:rgba(246,241,231,0.1);
}
.mwi-footer-newsletter .wpforms-submit-container{
  margin:0 !important;
  flex:0 0 auto;
}
.mwi-footer-newsletter button[type=submit]{
  background:var(--mwi-gold, #B9924E);
  color:var(--mwi-espresso, #241A12);
  border:none;
  border-radius:999px;
  padding:14px 30px;
  font-family:var(--mwi-font-body, 'Manrope', sans-serif);
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s var(--mwi-ease-silk, ease), transform .3s var(--mwi-ease-silk, ease);
}
.mwi-footer-newsletter button[type=submit]:hover{
  background:var(--mwi-gold-soft, #DCC48F);
  transform:translateY(-1px);
}
.mwi-footer-newsletter .wpforms-confirmation-container-full{
  color:var(--mwi-ivory, #F6F1E7) !important;
  background:transparent !important;
  border:none !important;
  padding:10px 0 !important;
  font-family:var(--mwi-font-body, 'Manrope', sans-serif);
}
@media (max-width: 767px){
  .mwi-footer-newsletter .wpforms-form{
    flex-direction:column;
    align-items:stretch;
  }
}

/* ---------------------------------------------------------------------
   6. Gallery animation-system prep ('The Album', wedding case pages).
      Per instruction: existing 3-up grid structure is UNTOUCHED here --
      only a scroll-reveal hook (.mwi-gsap-reveal, driven by
      mwi-cinematic.js) and a purely additive gold vignette-on-hover
      frame are layered on. Does not duplicate or override the existing
      .mwi-lightbox-img img:hover scale/brightness rule in mwi-motion.css.
      Photos themselves are untouched -- ready for real uploads via the
      Media Library later (same markup, same widget, just a new photo id).
   --------------------------------------------------------------------- */
.mwi-gallery-frame{
  position:relative;
  overflow:hidden;
  border-radius:4px;
}
.mwi-gallery-frame::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(185,146,78,0);
  background:linear-gradient(180deg, rgba(36,26,18,0) 55%, rgba(36,26,18,0.28) 100%);
  opacity:0;
  transition:opacity .5s var(--mwi-ease-soft, ease), box-shadow .5s var(--mwi-ease-soft, ease);
}
.mwi-gallery-frame:hover::after{
  opacity:1;
  box-shadow:inset 0 0 0 1px rgba(185,146,78,0.45);
}

/* ---------------------------------------------------------------------
   7. Service-card glassmorphism polish (homepage 'Where should we
      start?' album). Structural selectors only -- no Elementor content
      settings touched, so this is purely additive on top of the
      existing .mwi-card/.mwi-service-card system (section 11 + 51 in
      mwi-motion.css). Caption panel is always the second child inside
      .e-con-inner (image widget first, caption container second).
   --------------------------------------------------------------------- */
.mwi-service-card .e-con-inner > .e-con{
  position:relative;
  background:linear-gradient(180deg, rgba(251,248,243,0.86), rgba(251,248,243,0.68)) !important;
  backdrop-filter:blur(10px) saturate(1.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  border-top:1px solid rgba(185,146,78,0.25);
}

/* Eyebrow ('Service') becomes a small frosted-glass chip instead of
   plain letter-spaced text -- a compact, self-contained glass detail
   that doesn't require restructuring the card layout. */
.mwi-service-card .e-con-inner > .e-con .elementor-widget-heading:first-child .elementor-heading-title{
  display:inline-block;
  padding:5px 13px;
  border-radius:999px;
  background:rgba(185,146,78,0.10);
  border:1px solid rgba(185,146,78,0.32);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .4s var(--mwi-ease-silk, ease), border-color .4s var(--mwi-ease-silk, ease);
}
.mwi-service-card:hover .e-con-inner > .e-con .elementor-widget-heading:first-child .elementor-heading-title{
  background:rgba(185,146,78,0.18);
  border-color:rgba(185,146,78,0.5);
}

/* Soft diagonal glass sheen sweeps across the photo on hover -- a
   restrained, single-pass shimmer, not a looping animation. */
.mwi-service-card{
  position:relative;
}
.mwi-service-card .elementor-widget-image{
  position:relative;
}
.mwi-service-card .elementor-widget-image::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%);
  background-size:220% 220%;
  background-position:130% -30%;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease, background-position .9s var(--mwi-ease-soft, ease);
}
.mwi-service-card:hover .elementor-widget-image::after{
  opacity:1;
  background-position:-30% 130%;
}
@media (prefers-reduced-motion: reduce){
  .mwi-service-card .elementor-widget-image::after{ display:none; }
}

/* ---------------------------------------------------------------------
   8. Fixed-size luxury album frame system -- portfolio listing cards
      (.mwi-portfolio-frame) and wedding-page Album photos
      (.mwi-gallery-frame, already positioned/rounded in section 6).
      Forces a uniform aspect-ratio + object-fit:cover so the grid never
      breaks regardless of each source photo's native orientation --
      this also makes it safe for real, mixed-orientation client photos
      uploaded later via the Media Library.
   --------------------------------------------------------------------- */
.mwi-gallery-frame,
.mwi-portfolio-frame{
  aspect-ratio:4 / 5;
}
.mwi-gallery-frame img,
.mwi-portfolio-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.mwi-portfolio-frame{
  position:relative;
  overflow:hidden;
  border-radius:4px;
}
.mwi-portfolio-frame::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(36,26,18,0) 55%, rgba(36,26,18,0.28) 100%);
  opacity:0;
  transition:opacity .5s var(--mwi-ease-soft, ease);
}
.mwi-portfolio-frame:hover::after{
  opacity:1;
}
@media (max-width:600px){
  .mwi-gallery-frame,
  .mwi-portfolio-frame{
    aspect-ratio:1 / 1;
  }
}

/* Ken-Burns readiness: img gets a scale headroom so the slow cinematic
   zoom driven by mwi-cinematic.js (ScrollTrigger, see mwi-kb-zoom) never
   reveals the frame edge while scaling. */
.mwi-gallery-frame img,
.mwi-portfolio-frame img{
  transform:scale(1.0001);
  will-change:transform;
}

/* ---------------------------------------------------------------------
   9. Quicknav tiles -- each quick-nav item (Portfolio/Blog/Services) is
      now an image tile instead of a plain pill button. Fixed square
      frame so the row never breaks regardless of source photo shape;
      a painterly filter treatment (desaturate + warm sepia + soft grain
      vignette) gives the photos a gouache-illustration feel without
      needing separately-generated artwork. Isolated classes, doesn't
      touch the existing .elementor-widget-button hover system (section
      36/53 in mwi-motion.css) since these are no longer button widgets.
   --------------------------------------------------------------------- */
.mwi-quicknav-tile{
  text-decoration:none;
  cursor:pointer;
  transition:transform .5s var(--mwi-ease-silk, ease);
}
.mwi-quicknav-tile:hover{
  transform:translateY(-4px);
}
.mwi-quicknav-img{
  position:relative;
  width:84px;
  height:84px;
  border-radius:18px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(185,146,78,.55),
    0 0 0 5px rgba(185,146,78,.12),
    0 18px 34px -18px rgba(36,26,18,.5);
  transition:box-shadow .5s var(--mwi-ease-silk, ease);
}
.mwi-quicknav-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  /* Painterly gouache treatment: muted warm tone, softened detail */
  filter:saturate(.55) sepia(.22) contrast(1.04) brightness(1.03) blur(.2px);
  transform:scale(1.06);
  transition:transform .6s var(--mwi-ease-silk, ease), filter .5s ease;
}
.mwi-quicknav-img::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 120% at 50% 20%, rgba(246,241,231,.22), transparent 55%),
    radial-gradient(140% 140% at 50% 100%, rgba(36,26,18,.30), transparent 60%);
  mix-blend-mode:multiply;
}
.mwi-quicknav-img::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.mwi-quicknav-tile:hover .mwi-quicknav-img{
  box-shadow:
    0 0 0 1px rgba(185,146,78,.85),
    0 0 0 7px rgba(185,146,78,.18),
    0 22px 40px -18px rgba(36,26,18,.55);
}
.mwi-quicknav-tile:hover .mwi-quicknav-img img{
  transform:scale(1.12);
  filter:saturate(.62) sepia(.18) contrast(1.06) brightness(1.06) blur(.2px);
}
.mwi-quicknav-label{
  transition:color .4s var(--mwi-ease-silk, ease);
}
.mwi-quicknav-tile:hover .mwi-quicknav-label .elementor-heading-title{
  color:var(--mwi-gold, #B9924E) !important;
}
@media (max-width:600px){
  .mwi-quicknav-img{ width:68px; height:68px; border-radius:14px; }
}
@media (prefers-reduced-motion: reduce){
  .mwi-quicknav-tile, .mwi-quicknav-img, .mwi-quicknav-img img{ transition:none !important; }
  .mwi-quicknav-tile:hover{ transform:none !important; }
  .mwi-quicknav-tile:hover .mwi-quicknav-img img{ transform:scale(1.06) !important; }
}

/* ---------------------------------------------------------------------
   11. Elementor editor/preview compatibility -- force-visible fallback.
       .mwi-reveal (opacity:0 by default, mwi-motion.css) and
       .mwi-gsap-reveal (opacity driven purely by JS) both depend on a
       script (IntersectionObserver / GSAP ScrollTrigger) running inside
       the page to reveal them. Inside the Elementor edit/preview iframe
       that script does not reliably fire (the iframe's own scroll/resize
       lifecycle differs from a normal page load), which was leaving card
       titles and descriptions permanently blank while editing even
       though the text itself is present and unharmed in the database.
       body.mwi-editor-ctx is already added server-side (mwi-motion-
       loader.php) specifically for wp-admin/elementor-preview context,
       and is never present for a real site visitor, so this rule can
       never affect the live front-end -- it only guarantees text is
       always visible while you are editing.
   --------------------------------------------------------------------- */
body.mwi-editor-ctx .mwi-reveal,
body.mwi-editor-ctx .mwi-gsap-reveal{
  opacity:1 !important;
  transform:none !important;
}

/* ---------------------------------------------------------------------
   12. Hero text legibility + luxury entrance -- scoped ONLY to the hero
       container's own heading + text-editor (textbox) widgets. Buttons,
       spacers, the container background and everything else in the hero
       are untouched. Selectors use two classes max (specificity 0,2,0),
       deliberately lower than Elementor's own generated per-widget rules
       (0,4,0) -- so any Typography/Style-tab value (color, shadow, size,
       family, weight) set on these widgets inside Elementor still wins.
       This only supplies a default when nothing else is set. No !important
       anywhere in this section.
   --------------------------------------------------------------------- */
.mwi-hero-zoom .elementor-heading-title{
  text-shadow:0 2px 4px rgba(0,0,0,.5), 0 10px 34px rgba(0,0,0,.4);
}
.mwi-hero-zoom .elementor-widget-text-editor,
.mwi-hero-zoom .elementor-widget-text-editor p{
  text-shadow:0 1px 3px rgba(0,0,0,.5), 0 6px 22px rgba(0,0,0,.35);
}

/* Textbox has no existing entrance effect (eyebrow already uses .mwi-reveal,
   main heading already uses Elementor's native entrance animation + the
.mwi-hero-wipe gold curtain -- intentionally not touched here to avoid a
   second, competing animation on either of those two). Pure CSS, no JS
   dependency, so it behaves identically in the Elementor editor/preview
   iframe and on the live site -- nothing to fail silently in either
   context. */
@keyframes mwiHeroTextboxRise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
.mwi-hero-zoom .elementor-widget-text-editor{
  animation:mwiHeroTextboxRise 1s var(--mwi-ease-soft, ease) .5s both;
}

@media (prefers-reduced-motion: reduce){
  .mwi-hero-zoom .elementor-widget-text-editor{
    animation:none; opacity:1; transform:none;
  }
}

/* ---------------------------------------------------------------------
   14. Luxury container framing system -- OPT-IN ONLY, added only via
       Elementor's Advanced > CSS Classes on specific content-section
       containers. Every selector below is a single class (or its own
       ::before/::after) -- no !important, no element-type selectors,
       no targeting of Elementor's own classes. Removing the class
       removes the framing entirely. Layout, spacing, typography and
       responsive behaviour for the container itself stay fully owned
       by Elementor -- these classes only add thin decorative lines /
       corner marks / background treatment on top.
   --------------------------------------------------------------------- */

/* -- Services: delicate botanical corner sprigs (line-art) with a soft
   rose-gold echo layer that breathes -- replaces the earlier simple
   corner-bracket version entirely (superseded, not layered on top of). -- */
.mwi-corner-frame{ position:relative; }
.mwi-corner-frame::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3Cdefs%3E%3Cpath%20id='lf'%20d='M0,0%20C-6,-11%20-6,-25%200,-34%20C6,-25%206,-11%200,0%20Z'/%3E%3C/defs%3E%3Cg%20fill='none'%20stroke='%2523E7A9A0'%20stroke-width='1.1'%20stroke-linecap='round'%20transform='translate%284%205%29'%3E%3Cpath%20d='M138,12%20C118,30%20104,46%2088,64%20C72,82%2058,96%2042,112'/%3E%3Cuse%20href='%23lf'%20transform='translate%28132,16%29%20rotate%2848%29%20scale%280.8%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%28118,32%29%20rotate%2835%29%20scale%281.05%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%28100,50%29%20rotate%2820%29%20scale%281.15%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%2882,66%29%20rotate%28200%29%20scale%281.0%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%2862,86%29%20rotate%28215%29%20scale%280.9%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%2846,104%29%20rotate%28230%29%20scale%280.7%29'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3Cdefs%3E%3Cpath%20id='lf'%20d='M0,0%20C-6,-11%20-6,-25%200,-34%20C6,-25%206,-11%200,0%20Z'/%3E%3C/defs%3E%3Cg%20fill='none'%20stroke='%2523E7A9A0'%20stroke-width='1.1'%20stroke-linecap='round'%20transform='translate%28-4%20-5%29%20rotate%28180%2075%2075%29'%3E%3Cpath%20d='M138,12%20C118,30%20104,46%2088,64%20C72,82%2058,96%2042,112'/%3E%3Cuse%20href='%23lf'%20transform='translate%28132,16%29%20rotate%2848%29%20scale%280.8%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%28118,32%29%20rotate%2835%29%20scale%281.05%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%28100,50%29%20rotate%2820%29%20scale%281.15%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%2882,66%29%20rotate%28200%29%20scale%281.0%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%2862,86%29%20rotate%28215%29%20scale%280.9%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%2846,104%29%20rotate%28230%29%20scale%280.7%29'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat;
  background-position:top right, bottom left;
  background-size:110px 110px, 110px 110px;
  opacity:.5;
  animation:mwiCornerRoseGoldBreathe 7s ease-in-out infinite;
  pointer-events:none;
}
.mwi-corner-frame::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3Cdefs%3E%3Cpath%20id='lf'%20d='M0,0%20C-6,-11%20-6,-25%200,-34%20C6,-25%206,-11%200,0%20Z'/%3E%3C/defs%3E%3Cg%20fill='none'%20stroke='%25232B2420'%20stroke-width='1.1'%20stroke-linecap='round'%20transform=''%3E%3Cpath%20d='M138,12%20C118,30%20104,46%2088,64%20C72,82%2058,96%2042,112'/%3E%3Cuse%20href='%23lf'%20transform='translate%28132,16%29%20rotate%2848%29%20scale%280.8%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%28118,32%29%20rotate%2835%29%20scale%281.05%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%28100,50%29%20rotate%2820%29%20scale%281.15%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%2882,66%29%20rotate%28200%29%20scale%281.0%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%2862,86%29%20rotate%28215%29%20scale%280.9%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%2846,104%29%20rotate%28230%29%20scale%280.7%29'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3Cdefs%3E%3Cpath%20id='lf'%20d='M0,0%20C-6,-11%20-6,-25%200,-34%20C6,-25%206,-11%200,0%20Z'/%3E%3C/defs%3E%3Cg%20fill='none'%20stroke='%25232B2420'%20stroke-width='1.1'%20stroke-linecap='round'%20transform='rotate%28180%2075%2075%29'%3E%3Cpath%20d='M138,12%20C118,30%20104,46%2088,64%20C72,82%2058,96%2042,112'/%3E%3Cuse%20href='%23lf'%20transform='translate%28132,16%29%20rotate%2848%29%20scale%280.8%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%28118,32%29%20rotate%2835%29%20scale%281.05%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%28100,50%29%20rotate%2820%29%20scale%281.15%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%2882,66%29%20rotate%28200%29%20scale%281.0%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%2862,86%29%20rotate%28215%29%20scale%280.9%29'/%3E%3Cuse%20href='%23lf'%20transform='translate%2846,104%29%20rotate%28230%29%20scale%280.7%29'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat;
  background-position:top right, bottom left;
  background-size:110px 110px, 110px 110px;
  pointer-events:none;
}
@keyframes mwiCornerRoseGoldBreathe{
  0%, 100%{ opacity:.32; }
  50%{ opacity:.75; }
}
@media (prefers-reduced-motion: reduce){
  .mwi-corner-frame::before{ animation:none; opacity:.45; }
}

/* -- Portfolio/Gallery: single inset hairline, like a photo album mat -- */
.mwi-editorial-frame{ position:relative; }
.mwi-editorial-frame::before{
  content:'';
  position:absolute;
  inset:20px;
  border:1px solid rgba(185,146,78,.32);
  pointer-events:none;
}

/* -- Floral/Collection/intro: delicate top+bottom rule, no box at all -- */
.mwi-luxury-frame{ position:relative; }
.mwi-luxury-frame::before,
.mwi-luxury-frame::after{
  content:'';
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:64px;
  height:1px;
  background:rgba(185,146,78,.5);
  pointer-events:none;
}
.mwi-luxury-frame::before{ top:0; }
.mwi-luxury-frame::after{ bottom:0; }

/* -- Testimonials/Info over a photo: frosted glass card -- */
.mwi-glass-frame{
  position:relative;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.28);
}

/* Tablet: reduce visual intensity */
@media (max-width:1024px){
  .mwi-corner-frame::before,
  .mwi-corner-frame::after{ background-size:80px 80px, 80px 80px; }
  .mwi-editorial-frame::before{ inset:12px; }
  .mwi-luxury-frame::before,
  .mwi-luxury-frame::after{ width:48px; }
  .mwi-glass-frame{ backdrop-filter:blur(10px) saturate(1.3); -webkit-backdrop-filter:blur(10px) saturate(1.3); }
}

/* Mobile: keep only the subtlest corner/border cue */
@media (max-width:767px){
  .mwi-corner-frame::before,
  .mwi-corner-frame::after{ background-size:56px 56px, 56px 56px; }
  .mwi-corner-frame::before{ animation:none; opacity:.4; }
  .mwi-editorial-frame::before{ inset:8px; border-color:rgba(185,146,78,.24); }
  .mwi-luxury-frame::before,
  .mwi-luxury-frame::after{ width:32px; }
  .mwi-glass-frame{ backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

  /* Mobile-only: flatten the large parent SECTION frames -- remove the 16%
     radius + drop-shadow (both set via Elementor on these exact section
     containers) so framed sections run clean edge-to-edge on phones.
     Doubled class = specificity (0,2,0), beats Elementor's element selector
     without !important. Scoped strictly to these opt-in SECTION classes --
     never images, cards, portfolio items or child containers. */
  .mwi-luxury-frame.mwi-luxury-frame,
  .mwi-corner-frame.mwi-corner-frame,
  .mwi-editorial-frame.mwi-editorial-frame{ border-radius:0; box-shadow:none; }
}