:root{
  --ivory:#f5f5f5;
  --cream:#fbf7f1;
  --porcelain:#fffdf9;
  --taupe:#d7ccc8;
  --espresso:#3e2723;
  --espresso-deep:#1d0f0c;
  --black:#050505;
  --dusty-pink:#f2d6da;
  --rose:#a9686d;
  --greige:#beb2aa;
  --gold:#b39364;
  --line:rgba(62,39,35,.16);
  --line-dark:rgba(62,39,35,.31);
  --text-soft:rgba(62,39,35,.70);
  --shadow:0 38px 110px rgba(62,39,35,.17);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Inter', Arial, sans-serif;

  --img-face:url('images/hero-face.webp');
  --img-jewelry:url('images/Jewelry.webp');
  --img-interior:url('images/luxury-interior.webp');
  --img-skin:url('images/mirel-visual-standard-jewelry.webp');
  --img-gold:url('images/gold-pour.webp');
  --img-clinic:url('images/spa-lobby.webp');
  --img-serum:url('images/mirel-premium-skincare-scene.webp');
  --img-necklace:url('images/gold-necklace.webp');
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:
    radial-gradient(circle at 15% 0%,rgba(242,214,218,.48),transparent 30%),
    linear-gradient(120deg,#f8f4ed 0%,#f5f5f5 47%,#efe5dd 100%);
  color:var(--black);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

.site-shell{
  max-width:1760px;
  margin:0 auto;
  background:var(--cream);
  box-shadow:0 0 0 1px rgba(62,39,35,.05);
}

/* NAVIGATION */

.nav{
  position:sticky;
  top:0;
  z-index:1000;
  height:96px;
  display:grid;
  grid-template-columns:230px 1fr auto;
  align-items:center;
  gap:34px;
  padding:0 72px;
  background:rgba(251,247,241,.78);
  backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(62,39,35,.10);
  transition:height .35s ease, background .35s ease;
}

.nav.scrolled{
  height:82px;
  background:rgba(251,247,241,.92);
}

.brand{
  display:inline-flex;
  flex-direction:column;
  line-height:.9;
  letter-spacing:.36em;
  font-family:var(--serif);
  font-weight:600;
  color:var(--espresso-deep);
}

.brand span{
  font-size:33px;
}

.brand small{
  margin-top:9px;
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.48em;
  font-weight:500;
}

.nav-links{
  display:flex;
  justify-content:center;
  gap:42px;
  font-size:13px;
  font-weight:450;
  color:rgba(0,0,0,.86);
}

.nav-links a{
  position:relative;
  padding:39px 0;
}

.nav-links a:after{
  content:'';
  position:absolute;
  left:0;
  bottom:29px;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,var(--espresso),var(--rose));
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .38s ease;
}

.nav-links a:hover:after,
.nav-links a.active:after{
  transform:scaleX(1);
  transform-origin:left;
}

.nav-actions,
.hero-buttons{
  display:flex;
  align-items:center;
  gap:14px;
}

.mobile-menu-toggle{
  display:none;
}

.mobile-menu{
  display:none;
}

/* BUTTONS */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:45px;
  padding:0 24px;
  border:1px solid var(--line-dark);
  font-size:12px;
  font-weight:650;
  letter-spacing:-.01em;
  transition:
    transform .32s ease,
    background .32s ease,
    border-color .32s ease,
    color .32s ease,
    box-shadow .32s ease;
  white-space:nowrap;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 19px 50px rgba(62,39,35,.17);
}

.btn-dark{
  background:linear-gradient(135deg,var(--espresso-deep),var(--espresso));
  color:#fff;
  border-color:var(--espresso-deep);
}

.btn-light,
.btn-outline{
  background:rgba(255,253,249,.55);
  color:var(--espresso);
  border-color:rgba(62,39,35,.22);
}

.btn-light:hover,
.btn-outline:hover{
  background:rgba(242,214,218,.55);
  border-color:rgba(169,104,109,.42);
}

.btn-large{
  min-height:58px;
  padding:0 34px;
}

.btn-pink{
  background:linear-gradient(135deg,#f5d7dc,#e6bdc4);
  color:var(--espresso-deep);
  border-color:#e2b9c0;
  min-height:56px;
  padding:0 48px;
}

/* HERO */

.hero{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  min-height:835px;
  padding:78px 72px 74px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,#fbf7f1 0%,#fbf7f1 48%,#efe2da 100%);
  position:relative;
  overflow:hidden;
}

.hero:before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 8% 18%,rgba(242,214,218,.50),transparent 28%),
    radial-gradient(circle at 92% 8%,rgba(62,39,35,.10),transparent 32%),
    linear-gradient(115deg,transparent 0 54%,rgba(179,147,100,.10) 54% 55%,transparent 55%);
  pointer-events:none;
}

.hero-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:650px;
  padding-right:52px;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.38em;
  font-size:12px;
  font-weight:650;
  color:#8d6e63;
  margin:0 0 34px;
}

.hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:88px;
  line-height:.91;
  letter-spacing:-.052em;
  color:var(--espresso-deep);
  margin:0 0 34px;
}

.hero h1 em,
.section-title em,
.difference h2 em{
  font-style:italic;
  font-weight:400;
  color:var(--rose);
}

.hero-subtitle{
  font-size:17px;
  line-height:1.82;
  color:var(--text-soft);
  max-width:570px;
  margin:0 0 34px;
}

.hero-note{
  margin-top:100px;
  display:flex;
  align-items:center;
  gap:34px;
  text-transform:uppercase;
  letter-spacing:.27em;
  font-size:11px;
  color:var(--espresso);
  max-width:560px;
}

.hero-note i{
  display:block;
  flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--line-dark),transparent);
}

.hero-editorial{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.08fr .72fr;
  gap:12px;
  align-self:center;
  height:670px;
}

.editorial-main,
.editorial-card,
.lookbook-img,
.difference-image,
.final-cta{
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
}

.editorial-main,
.editorial-card{
  box-shadow:
    inset 0 0 0 1px rgba(62,39,35,.16),
    0 30px 90px rgba(62,39,35,.14);
}

.editorial-main:after,
.editorial-card:after,
.lookbook-img:after,
.difference-image:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(62,39,35,.02),rgba(62,39,35,.20));
  mix-blend-mode:multiply;
  pointer-events:none;
}

.editorial-main span,
.editorial-card span{
  position:absolute;
  left:24px;
  bottom:22px;
  z-index:2;
  color:rgba(255,255,255,.84);
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:10px;
}

.editorial-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:12px;
}

.img-face{
  background-image:var(--img-face);
  background-position:center top;
}

.img-jewelry{
  background-image:var(--img-jewelry);
  background-position:center 45%;
}

.img-interior{
  background-image:var(--img-interior);
}

/* AUTHORITY */

.authority-strip{
  display:grid;
  grid-template-columns:.7fr 1fr 1fr;
  gap:36px;
  align-items:center;
  padding:52px 72px;
  background:linear-gradient(90deg,var(--espresso-deep),var(--espresso));
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.authority-strip p,
.authority-strip span{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.75;
}

.authority-strip strong{
  font-family:var(--serif);
  font-size:42px;
  line-height:1.02;
  font-weight:500;
  color:#fff;
}

.authority-strip span{
  border-left:1px solid rgba(255,255,255,.18);
  padding-left:34px;
}

/* WHY */

.why{
  padding:78px 72px 84px;
  background:linear-gradient(135deg,#f1e7df,#fbf7f1 58%,rgba(242,214,218,.24));
  border-bottom:1px solid var(--line);
}

.section-title{
  text-align:center;
  font-family:var(--serif);
  font-size:46px;
  line-height:1.05;
  margin:0 0 60px;
  color:var(--espresso-deep);
}

.reason-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  max-width:1260px;
  margin:0 auto;
}

.reason-grid article{
  padding:12px 58px 6px;
  border-right:1px solid var(--line);
  min-height:158px;
}

.reason-grid article:last-child{
  border-right:0;
}

.reason-grid span{
  display:block;
  font-family:var(--serif);
  font-size:31px;
  color:var(--rose);
  margin-bottom:16px;
}

.reason-grid h3{
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:12px;
  color:var(--espresso);
  margin:0 0 18px;
}

.reason-grid p{
  font-size:14px;
  line-height:1.8;
  color:var(--text-soft);
  margin:0;
  max-width:300px;
}

/* SHOWCASE */

.editorial-showcase{
  display:grid;
  grid-template-columns:360px 1fr;
  border-bottom:1px solid var(--line);
  background:var(--porcelain);
}

.showcase-intro{
  padding:86px 58px 80px;
}

.showcase-intro h2,
.metrics h2,
.difference h2,
.qualification h2{
  font-family:var(--serif);
  font-weight:500;
  color:var(--espresso-deep);
  letter-spacing:-.038em;
}

.showcase-intro h2{
  font-size:48px;
  line-height:.98;
  margin:0 0 22px;
}

.showcase-intro p:not(.eyebrow){
  font-size:14px;
  color:var(--text-soft);
  line-height:1.86;
  margin:0 0 36px;
}

.text-link{
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:11px;
  font-weight:650;
  color:var(--espresso);
  display:inline-flex;
  gap:14px;
  align-items:center;
}

.text-link span{
  transition:transform .3s ease;
}

.text-link:hover span{
  transform:translateX(6px);
}

.lookbook-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr 1fr;
  gap:6px;
}

.lookbook-img{
  min-height:390px;
  filter:saturate(.92) sepia(.08);
}

.lookbook-img.tall{
  min-height:390px;
}

.img-skin{
  background-image:var(--img-skin);
}

.img-gold{
  background-image:var(--img-gold);
}

.img-clinic{
  background-image:var(--img-clinic);
}

.img-serum{
  background-image:var(--img-serum);
}

/* CONVERSION MAP */

.conversion-map{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:64px;
  padding:88px 72px;
  background:linear-gradient(90deg,#fbf7f1,#f5ede7);
  border-bottom:1px solid var(--line);
}

.map-copy h2{
  font-family:var(--serif);
  font-size:58px;
  line-height:1;
  letter-spacing:-.04em;
  font-weight:500;
  margin:0 0 26px;
  color:var(--espresso-deep);
}

.map-copy p:not(.eyebrow){
  font-size:15px;
  line-height:1.9;
  color:var(--text-soft);
  max-width:520px;
}

.map-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-left:1px solid var(--line);
}

.map-steps article{
  padding:18px 30px 8px;
  border-right:1px solid var(--line);
  min-height:240px;
}

.map-steps span{
  font-family:var(--serif);
  font-size:42px;
  color:var(--rose);
}

.map-steps h3{
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:12px;
  color:var(--espresso);
  margin:24px 0 18px;
}

.map-steps p{
  font-size:13px;
  line-height:1.75;
  color:var(--text-soft);
  margin:0;
}

/* METRICS */

.metrics{
  display:grid;
  grid-template-columns:350px 1fr;
  gap:70px;
  padding:88px 72px;
  background:#fbf7f1;
  border-bottom:1px solid var(--line);
}

.metrics-copy h2{
  font-size:45px;
  line-height:1;
  margin:0 0 24px;
}

.metrics-copy p{
  font-size:14px;
  line-height:1.9;
  color:var(--text-soft);
  margin:0 0 28px;
}

.metric-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-left:1px solid var(--line);
  align-items:center;
}

.metric-grid article{
  padding:32px 36px;
  min-height:178px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

.metric-grid strong{
  font-family:var(--serif);
  font-size:54px;
  font-weight:500;
  color:var(--espresso-deep);
  line-height:1;
}

.metric-grid span{
  display:block;
  margin-top:15px;
  font-size:13px;
  line-height:1.6;
  color:var(--text-soft);
}

/* DIFFERENCE */

.difference{
  display:grid;
  grid-template-columns:1fr 1.34fr;
  min-height:560px;
  border-bottom:1px solid var(--line);
  background:#fbf7f1;
}

.difference-image{
  background-image:var(--img-necklace);
  background-position:center 38%;
  min-height:560px;
}

.difference-copy{
  position:relative;
  padding:98px 104px 88px;
  background:radial-gradient(circle at 88% 46%,rgba(242,214,218,.45),transparent 22%),#fbf7f1;
}

.difference-copy .eyebrow{
  margin-bottom:30px;
}

.difference h2{
  font-size:55px;
  line-height:1.03;
  margin:0 0 28px;
  max-width:740px;
}

.difference p:not(.eyebrow){
  font-size:15px;
  line-height:1.9;
  color:var(--text-soft);
  max-width:590px;
  margin:0 0 26px;
}

.proof-list{
  list-style:none;
  margin:0 0 34px;
  padding:0;
  max-width:620px;
}

.proof-list li{
  position:relative;
  padding:12px 0 12px 34px;
  border-top:1px solid rgba(62,39,35,.10);
  font-size:14px;
  color:var(--text-soft);
}

.proof-list li:before{
  content:'✦';
  position:absolute;
  left:0;
  color:var(--rose);
}

.seal{
  position:absolute;
  right:88px;
  top:106px;
  width:162px;
  height:162px;
  border:1px solid rgba(169,104,109,.26);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--serif);
  font-size:84px;
  color:rgba(169,104,109,.25);
}

/* QUALIFICATION */

.qualification{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  padding:72px;
  background:linear-gradient(135deg,#fbf7f1,#f3e9e3 72%,rgba(242,214,218,.42));
  border-bottom:1px solid var(--line);
}

.qualification h2{
  font-size:54px;
  line-height:1.02;
  margin:0;
}

.qualification-list p{
  font-size:16px;
  line-height:1.9;
  color:var(--text-soft);
  max-width:620px;
  margin:0 0 30px;
}

/* FINAL CTA */

.final-cta{
  min-height:340px;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  background:
    linear-gradient(rgba(29,15,12,.70),rgba(29,15,12,.80)),
    url('images/home-page-serum-mirel.webp') center/cover no-repeat;
}

.final-cta .eyebrow{
  color:rgba(255,255,255,.84);
  margin-bottom:18px;
}

.final-cta h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:60px;
  line-height:1;
  letter-spacing:-.038em;
  color:#fffaf7;
  margin:0 0 14px;
}

.final-cta p:not(.eyebrow){
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:11px;
  margin:0 0 34px;
  color:rgba(255,255,255,.86);
}

/* FOOTER */

.footer{
  height:124px;
  display:grid;
  grid-template-columns:260px 1fr auto auto auto;
  align-items:center;
  gap:48px;
  padding:0 72px;
  background:#fbf7f1;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--text-soft);
}

.footer .brand span{
  font-size:28px;
}

.footer .brand small{
  font-size:9px;
}

.footer a:hover{
  color:var(--espresso);
}

/* REVEAL */

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s ease,transform .9s ease;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* TABLET */

@media (max-width:1180px){

  .nav{
    grid-template-columns:190px 1fr;
    padding:0 34px;
  }

  .nav-actions{
    display:none;
  }

  .nav-links{
    gap:25px;
  }

  .hero{
    grid-template-columns:1fr;
    padding:62px 34px;
  }

  .hero-copy{
    max-width:780px;
    padding-right:0;
  }

  .hero h1{
    font-size:72px;
  }

  .hero-editorial{
    margin-top:48px;
    height:590px;
  }

  .authority-strip,
  .conversion-map,
  .metrics,
  .difference,
  .editorial-showcase,
  .qualification{
    grid-template-columns:1fr;
  }

  .authority-strip span{
    border-left:0;
    padding-left:0;
  }

  .showcase-intro{
    padding:62px 34px;
  }

  .conversion-map,
  .metrics,
  .qualification{
    gap:40px;
    padding:62px 34px;
  }

  .difference-copy{
    padding:72px 50px;
  }

  .seal{
    display:none;
  }

  .footer{
    grid-template-columns:1fr 1fr;
    gap:22px;
    height:auto;
    padding:34px;
  }
}

/* MOBILE */

@media (max-width:760px){

  .site-shell{
    max-width:none;
  }

  .nav{
    height:86px;
    min-height:86px;
    grid-template-columns:1fr auto;
    padding:14px 22px;
    align-items:center;
    gap:14px;
    background:#fbf7f1;
    z-index:1000;
  }

  .nav.scrolled{
    height:76px;
    min-height:76px;
  }

  .brand{
    line-height:.82;
  }

  .brand span{
    font-size:27px;
  }

  .brand small{
    font-size:9px;
    margin-top:6px;
  }

  .nav-links,
  .nav-actions{
    display:none;
  }

  .mobile-menu-toggle{
    display:flex;
    width:54px;
    height:54px;
    align-items:center;
    justify-content:center;
    font-size:26px;
    border:1px solid rgba(62,39,35,.18);
    background:#fffdf9;
    color:var(--espresso-deep);
    cursor:pointer;
  }

  .mobile-menu{
    position:fixed;
    left:0;
    right:0;
    top:86px;
    bottom:0;
    z-index:999;
    display:flex;
    flex-direction:column;
    background:#fbf7f1;
    padding:28px 28px 40px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    transition:opacity .32s ease, transform .32s ease, visibility .32s ease;
    overflow-y:auto;
    box-shadow:0 30px 80px rgba(62,39,35,.10);
  }

  .nav.scrolled .mobile-menu{
    top:76px;
  }

  .mobile-menu.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .mobile-menu > a{
    display:block;
    padding:17px 0;
    border-bottom:1px solid rgba(62,39,35,.10);
    font-size:18px;
    font-weight:500;
    color:var(--espresso-deep);
  }

  .mobile-menu > a.active{
    color:var(--rose);
  }

  .mobile-menu-actions{
    display:grid;
    gap:14px;
    margin-top:28px;
  }

  .mobile-menu-actions .btn{
    width:100%;
    min-height:58px;
  }

  .mobile-menu-actions .btn-dark{
    color:#fff !important;
  }

  .mobile-menu-actions .btn-light{
    color:var(--espresso-deep) !important;
    background:#fffdf9;
  }

  .hero{
    padding:42px 22px 46px;
    min-height:auto;
  }

  .hero h1{
    font-size:53px;
    line-height:.96;
  }

  .eyebrow{
    font-size:10px;
    letter-spacing:.3em;
    margin-bottom:24px;
  }

  .hero-subtitle{
    font-size:14px;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-note{
    margin-top:48px;
    font-size:9px;
    letter-spacing:.2em;
  }

  .hero-editorial{
    grid-template-columns:1fr;
    height:auto;
  }

  .editorial-main{
    min-height:430px;
  }

  .editorial-side{
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
  }

  .editorial-card{
    min-height:210px;
  }

  .authority-strip{
    padding:42px 22px;
  }

  .authority-strip strong{
    font-size:34px;
  }

  .why{
    padding:52px 22px;
  }

  .section-title{
    font-size:36px;
  }

  .reason-grid{
    grid-template-columns:1fr;
  }

  .reason-grid article{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:30px 0;
  }

  .reason-grid article:last-child{
    border-bottom:0;
  }

  .lookbook-grid{
    grid-template-columns:1fr 1fr;
  }

  .lookbook-img{
    min-height:245px;
  }

  .showcase-intro h2,
  .map-copy h2,
  .qualification h2{
    font-size:39px;
  }

  .conversion-map{
    padding:52px 22px;
  }

  .map-steps{
    grid-template-columns:1fr;
    border-left:0;
  }

  .map-steps article{
    border-right:0;
    border-bottom:1px solid var(--line);
    min-height:auto;
    padding:28px 0;
  }

  .metrics{
    padding:52px 22px;
  }

  .metric-grid{
    grid-template-columns:1fr 1fr;
    border-left:0;
  }

  .metric-grid article{
    border:1px solid var(--line);
    margin:-1px 0 0 -1px;
    padding:26px 18px;
  }

  .metric-grid strong{
    font-size:38px;
  }

  .difference{
    grid-template-columns:1fr;
  }

  .difference-image{
    min-height:360px;
  }

  .difference-copy{
    padding:52px 22px;
  }

  .difference h2{
    font-size:38px;
  }

  .qualification{
    padding:52px 22px;
  }

  .final-cta{
    min-height:290px;
    padding:50px 22px;
  }

  .final-cta h2{
    font-size:42px;
  }

  .final-cta p:not(.eyebrow){
    font-size:9px;
    line-height:1.8;
  }

  .footer{
    grid-template-columns:1fr;
    text-align:left;
  }

  .btn-large,
  .btn{
    width:fit-content;
  }

  .hero-buttons .btn{
    width:100%;
  }
}

/* EMERGENCY MOBILE MENU FIX */

@media (max-width:760px){

  .nav{
    height:86px !important;
    min-height:86px !important;
    grid-template-columns:1fr auto !important;
    padding:14px 22px !important;
    align-items:center !important;
    background:#fbf7f1 !important;
    z-index:9999 !important;
  }

  .nav-links,
  .nav-actions{
    display:none !important;
  }

  .mobile-menu-toggle{
    display:flex !important;
    width:54px !important;
    height:54px !important;
    align-items:center !important;
    justify-content:center !important;
    background:#fffdf9 !important;
    border:1px solid rgba(62,39,35,.18) !important;
    color:var(--espresso-deep) !important;
    font-size:26px !important;
  }

  .mobile-menu{
    position:fixed !important;
    top:86px !important;
    left:0 !important;
    right:0 !important;
    bottom:auto !important;
    height:calc(100dvh - 86px) !important;
    max-height:none !important;
    overflow-y:auto !important;
    z-index:9998 !important;

    display:flex !important;
    flex-direction:column !important;

    background:#fbf7f1 !important;
    padding:28px !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-12px) !important;

    transition:.3s ease !important;
  }

  .mobile-menu.open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  .mobile-menu > a{
    display:block !important;
    padding:17px 0 !important;
    border-bottom:1px solid rgba(62,39,35,.10) !important;
    font-size:18px !important;
    color:var(--espresso-deep) !important;
  }

  .mobile-menu > a.active{
    color:var(--rose) !important;
  }

  .mobile-menu-actions{
    display:grid !important;
    gap:14px !important;
    margin-top:28px !important;
  }

  .mobile-menu-actions .btn{
    width:100% !important;
    min-height:58px !important;
  }

  .mobile-menu-actions .btn-dark{
    color:#fff !important;
  }

}

/* REFINED MOBILE MENU */

@media (max-width:760px){

  .nav{
    transition:transform .35s ease, background .35s ease !important;
  }

  .nav.hide{
    transform:translateY(-100%) !important;
  }

  .mobile-menu{
    top:86px !important;
    bottom:auto !important;
    min-height:auto !important;
    height:auto !important;
    max-height:none !important;

    padding:26px 28px 34px !important;
    background:#fbf7f1 !important;
    box-shadow:0 30px 80px rgba(62,39,35,.14) !important;
  }

  .mobile-menu > a{
    font-family:var(--sans) !important;
    font-size:16px !important;
    font-weight:450 !important;
    letter-spacing:-0.02em !important;
    padding:14px 0 !important;
  }

  .mobile-menu-actions{
    margin-top:22px !important;
    gap:12px !important;
  }

  .mobile-menu-actions .btn{
    min-height:52px !important;
    font-size:12px !important;
    font-weight:650 !important;
    letter-spacing:-0.01em !important;
  }

}

/* TABLET NAV FIX - keeps desktop-style navbar on tablets */

@media (min-width:761px) and (max-width:1180px){

  .nav{
    grid-template-columns:170px 1fr auto !important;
    padding:0 28px !important;
    gap:22px !important;
  }

  .brand span{
    font-size:30px !important;
  }

  .brand small{
    font-size:9px !important;
    letter-spacing:.42em !important;
  }

  .nav-links{
    display:flex !important;
    gap:22px !important;
    justify-content:center !important;
    font-size:12px !important;
  }

  .nav-links a{
    padding:34px 0 !important;
  }

  .nav-actions{
    display:flex !important;
    gap:10px !important;
  }

  .nav-actions .btn{
    min-height:40px !important;
    padding:0 16px !important;
    font-size:11px !important;
  }

  .mobile-menu-toggle{
    display:none !important;
  }

  .mobile-menu{
    display:none !important;
  }
}

/* FOOTER TABLET + MOBILE REFINEMENT */

@media (max-width:1180px){

  .footer{
    height:auto;
    padding:34px 34px;
    grid-template-columns:repeat(4, auto);
    justify-content:center;
    gap:54px;
    text-align:center;
  }

  .footer .brand{
    display:none;
  }

  .footer:after{
    content:"© 2026 Mirèl Partners. All rights reserved.";
    grid-column:1 / -1;
    font-size:12px;
    color:var(--text-soft);
    margin-top:4px;
  }

}

@media (max-width:760px){

  .footer{
    padding:34px 22px 38px;
    grid-template-columns:1fr 1fr;
    gap:0;
    text-align:center;
  }

  .footer a{
    display:flex;
    justify-content:center;
    align-items:center;

    padding:16px 8px;

    border-bottom:1px solid rgba(62,39,35,.10);
  }

  .footer:after{
    grid-column:1 / -1;
    margin-top:18px;
    padding-top:2px;
    font-size:11px;
  }

}
/* =====================================================
   GLOBAL NAVIGATION — CONTACT RETIRED
===================================================== */

.nav-links a[href="contact.html"],
.mobile-menu > a[href="contact.html"],
.footer a[href="contact.html"]{
  display:none !important;
}


/* ===================================================
   MIREL PERFORMANCE REFINEMENT — OCTOBER 2026
   Faster first paint without changing page layouts.
=================================================== */

/* Never hide the initial hero behind a reveal animation. */

.hero.reveal,
.book-hero.reveal,
.results-hero.reveal,
.about-hero .reveal,
.services-hero .reveal,
.systems-hero .reveal,
.resources-hero .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Keep subtle below-the-fold movement,
   but avoid the original near-one-second delay. */

.reveal {
  transition-duration: .3s !important;
}

/* Honor reduced-motion preferences. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ==========================================
   MIREL — UNIFIED MOBILE FOOTER
   Home page layout reference
   Centralized footer styling
========================================== */

@media (max-width: 760px) {

  #mirel-site-footer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto 1px auto auto !important;
    height: auto !important;
    padding: 34px 22px 38px !important;
    gap: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    background: #fbf7f1 !important;
    font-size: 12px !important;
    color: var(--text-soft) !important;
  }

  #mirel-site-footer > .brand {
    display: none !important;
  }

  #mirel-site-footer > a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 16px 8px !important;
    border-bottom: none !important;
  }

  #mirel-site-footer > a[href^="mailto:"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
    white-space: nowrap !important;
  }

  #mirel-site-footer > .footer-social {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
  }

  #mirel-site-footer .footer-social a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 10px 2px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    border-bottom: none !important;
  }

  #mirel-site-footer::before {
    content: "";
    display: block;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100%;
    height: 1px;
    background: rgba(62, 39, 35, .10);
  }

  #mirel-site-footer > a[href="privacy-policy.html"] {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  #mirel-site-footer > a[href="terms-and-conditions.html"] {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  #mirel-site-footer::after {
    content: "© 2026 Mirèl Partners. All rights reserved.";    
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    margin-top: 18px !important;
    padding-top: 2px !important;
    font-size: 11px !important;
    color: var(--text-soft) !important;
  }

}


/* ================================================
   MIRÈL SHARED NAVIGATION — VERSION 1
   Applies only to the new shared navigation.
   Existing page navigation remains unchanged.
   ================================================ */

.mirel-shared-nav {
  width: 100%;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: clamp(14px, 1.5vw, 25px);
  padding-inline: clamp(24px, 2.5vw, 40px);
}

.mirel-shared-nav .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(12px, 1.45vw, 25px);
  white-space: nowrap;
  font-size: 12px;
}

.mirel-shared-nav .nav-links a {
  white-space: nowrap;
}

.mirel-shared-nav .nav-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  white-space: nowrap;
}

.mirel-shared-nav .nav-actions .btn {
  padding-inline: 16px;
  font-size: 11px;
}

.mirel-shared-nav .mobile-menu-toggle {
  display: none;
}

/* Narrow desktops and tablets use the hamburger menu.
   This prevents navigation links from wrapping. */
@media (min-width: 761px) and (max-width: 1250px) {
  .mirel-shared-nav {
    grid-template-columns: 1fr auto !important;
    gap: 14px !important;
    padding-inline: 28px !important;
  }

  .mirel-shared-nav .nav-links,
  .mirel-shared-nav .nav-actions {
    display: none !important;
  }

  .mirel-shared-nav .mobile-menu-toggle {
    display: flex !important;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(62, 39, 35, .18);
    background: #fffdf9;
    color: #1d0f0c;
    font-size: 26px;
    cursor: pointer;
  }
}

/* Shared mobile menu for all screen widths
   where the hamburger button is used. */
@media (max-width: 1250px) {
  [data-mirel-navigation] {
    position: sticky;
    top: 0;
    z-index: 9999;
  }

  [data-mirel-navigation] .mobile-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: calc(100dvh - 76px) !important;
    overflow-y: auto !important;
    padding: 25px 28px 34px !important;
    background: #fbf7f1 !important;
    box-shadow: 0 30px 80px rgba(62, 39, 35, .12);
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-12px) !important;
    transition: opacity .25s ease,
                transform .25s ease,
                visibility .25s ease !important;
  }

  [data-mirel-navigation] .mobile-menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  [data-mirel-navigation] .mobile-menu > a {
    display: block !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(62, 39, 35, .10);
    font-size: 16px !important;
    color: #1d0f0c;
  }

  [data-mirel-navigation] .mobile-menu > a.active {
    color: #a9686d !important;
  }

  [data-mirel-navigation] .mobile-menu-actions {
    display: grid !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }

  [data-mirel-navigation] .mobile-menu-actions .btn {
    width: 100% !important;
    min-height: 52px !important;
  }
}

@media (max-width: 760px) {
  .mirel-shared-nav {
    grid-template-columns: 1fr auto !important;
    padding-inline: 22px !important;
  }

  .mirel-shared-nav .nav-links,
  .mirel-shared-nav .nav-actions {
    display: none !important;
  }

  .mirel-shared-nav .mobile-menu-toggle {
    display: flex !important;
  }
}

[data-mirel-navigation] a:focus-visible,
[data-mirel-navigation] button:focus-visible {
  outline: 3px solid #a9686d;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  [data-mirel-navigation] *,
  [data-mirel-navigation] *::before,
  [data-mirel-navigation] *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* MIRÈL PARTNERS — UNIFIED DESKTOP FOOTER ALIGNMENT */
/* Keep one centered footer row, matching the Systems page. */
/* Tablet and mobile copyright layouts remain unchanged. */

@media (min-width: 1181px) {
  #mirel-site-footer::after {
    content: none !important;
    display: none !important;
  }
}


/* MIRÈL PARTNERS — SMALL MOBILE FOOTER FIX */
/* Applies only to screens 359px and narrower. */

@media (max-width: 359px) {

  #mirel-site-footer {
    grid-template-rows: auto auto 1px auto auto !important;
  }

  #mirel-site-footer > a[href^="mailto:"] {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  #mirel-site-footer > .footer-social {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
  }

  #mirel-site-footer::before {
    grid-row: 3 !important;
  }

  #mirel-site-footer > a[href="privacy-policy.html"] {
    grid-row: 4 !important;
  }

  #mirel-site-footer > a[href="terms-and-conditions.html"] {
    grid-row: 4 !important;
  }

  #mirel-site-footer::after {
    grid-row: 5 !important;
  }

}