/* M4U shared site styles — plain CSS file, linked normally from every standalone .aspx page.
   No Master Page, no server-side injection: this file only holds the header/navigation
   look and the site-wide premium motion utilities that every page opts into with a
   normal <link rel="stylesheet"> tag. Page-specific layout stays in each .aspx file. */

/* ---------- Site navigation (identical markup expected on every page — see snippets/nav.html) ---------- */
.m4u-nav{height:82px;background:#f8f1e6;color:#2c211c;display:block;position:fixed;top:0;left:0;right:0;z-index:1000;font-family:'DM Sans',Poppins,Arial,sans-serif;box-shadow:0 1px 0 rgba(44,33,28,.08),0 10px 26px rgba(44,33,28,.05);transition:box-shadow .35s ease,height .35s ease}
.m4u-nav.is-scrolled{box-shadow:0 1px 0 rgba(44,33,28,.12),0 14px 34px rgba(44,33,28,.1)}
body.m4u-page-body{padding-top:82px}
@media(max-width:1220px){body.m4u-page-body{padding-top:70px}}
.m4u-nav__inner{height:100%;width:100%;max-width:1180px;margin:auto;padding:0 24px;display:flex;align-items:center;gap:24px}
.m4u-nav__brand{display:flex;align-items:center;gap:14px;min-width:250px;color:#2c211c;text-decoration:none}
.m4u-nav__brand img{width:52px;height:52px;object-fit:contain}
.m4u-nav__brand span{font-size:9px;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;color:#8c7b6f}
.m4u-nav__links{display:flex;align-items:center;justify-content:center;gap:34px;flex:1}
.m4u-nav__links a,.m4u-nav__consult{color:#4a382f;text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.105em;text-transform:uppercase;white-space:nowrap}
.m4u-nav__links a{position:relative}
.m4u-nav__links a:after{content:'';position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:#b34e16;transition:right .45s cubic-bezier(.2,.8,.2,1)}
.m4u-nav__links a:hover,.m4u-nav__links a.is-active{color:#b34e16}
.m4u-nav__links a:hover:after,.m4u-nav__links a.is-active:after{right:0}
.m4u-nav__consult{color:#b34e16;display:flex;align-items:center;gap:8px}
.m4u-nav__consult i{width:8px;height:8px;border-radius:50%;background:#b34e16;display:block}
.m4u-nav__account{color:#4a382f;font-size:15px;display:flex;align-items:center;margin-left:6px}
.m4u-nav__account:hover{color:#b34e16}
.m4u-nav__logout{display:none;color:#8c7b6f;font-size:14px;align-items:center;margin-left:2px}
.m4u-nav__logout.is-visible{display:flex}
.m4u-nav__logout:hover{color:#b34e16}
.m4u-nav__mobile-toggle{display:none;background:none;border:0;color:#2c211c;font-size:20px;margin-left:auto;cursor:pointer}
.m4u-nav__mobile{display:none;position:absolute;right:0;left:0;top:100%;background:#f8f1e6;border-top:1px solid rgba(44,33,28,.1);padding:13px 18px;flex-direction:column;gap:2px;box-shadow:0 14px 30px rgba(44,33,28,.08)}
.m4u-nav__mobile.is-open{display:flex}
.m4u-nav__mobile a{display:block;padding:12px 6px;color:#4a382f;text-decoration:none;font-size:11px;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid rgba(44,33,28,.08)}
.m4u-nav__mobile a:last-child{border-bottom:0}
.m4u-nav__mobile a.is-active{color:#b34e16}
@media(max-width:1320px){.m4u-nav__inner{padding:0 26px;gap:16px}.m4u-nav__links{gap:16px}.m4u-nav__brand{min-width:0}.m4u-nav__brand span{display:none}}
@media(max-width:1220px){.m4u-nav{height:70px}.m4u-nav__inner{padding:0 18px}.m4u-nav__brand img{width:46px;height:46px}.m4u-nav__brand span,.m4u-nav__links,.m4u-nav__consult{display:none}.m4u-nav__mobile-toggle{display:block}}

/* ---------- Shared page rhythm (kept intentionally light — each page still owns its own layout) ---------- */
.m4u-page-body{background:#f3efe7;margin:0}
.m4u-page-body .footer{background:#f0e6d8}

/* ---------- Premium motion: scroll reveal, hover lift, cinematic media, progress bar ---------- */
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  body.m4u-page-body{animation:m4uBodyIn .55s ease both}
  @keyframes m4uBodyIn{from{opacity:0}to{opacity:1}}

  [data-m4u-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
  [data-m4u-reveal].m4u-in{opacity:1;transform:translateY(0)}

  a,button,.btn,input[type=submit],input[type=button]{transition:color .3s ease,background-color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}

  .card,.panel,.query,.order,.appointment,.testimonial,.collection-card,.material,.process-item,[class*='card']:not(.form-card){transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
  .card:hover,.panel:hover,.query:hover,.order:hover,.appointment:hover,.testimonial:hover,.collection-card:hover,[class*='card']:not(.form-card):hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(30,20,15,.14)}

  .collection-card,.material,.hero-image,.campaign-media{overflow:hidden}
  .collection-card img,.material img,.hero-image img,.hero-image video,.campaign-media img,.campaign-media video{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
  .collection-card:hover img,.material:hover img{transform:scale(1.07)}
  .hero-image img,.hero-image video{animation:m4uKenburns 22s ease-in-out infinite alternate}
  @keyframes m4uKenburns{from{transform:scale(1)}to{transform:scale(1.08)}}

  #m4u-scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,#e77a32,#b34e16);z-index:2000;width:0;transition:width .1s linear;pointer-events:none}

  .m4u-spinner{--spin-track:rgba(36,28,26,.14);--spin-arc:var(--clay,#b34e16);display:inline-block;width:34px;height:34px;border-radius:50%;border:3px solid var(--spin-track);border-top-color:var(--spin-arc);animation:m4uSpin .85s cubic-bezier(.5,.2,.5,.8) infinite;flex:none}
  .m4u-spinner.is-small{width:20px;height:20px;border-width:2px}
  .m4u-spinner.on-dark{--spin-track:rgba(255,255,255,.22);--spin-arc:#e77a32}
  @keyframes m4uSpin{to{transform:rotate(360deg)}}
  .m4u-loading-row{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted,#776b62);font-size:13px}
  .m4u-skeleton{position:relative;overflow:hidden;background:#e9e1d5}
  .m4u-skeleton:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:m4uShimmer 1.4s ease-in-out infinite}
  @keyframes m4uShimmer{to{transform:translateX(100%)}}
}
@media(prefers-reduced-motion:reduce){[data-m4u-reveal]{opacity:1!important;transform:none!important}}
/* Cross-page view-transition CSS lives inline in each page's own <style> block, not here. */