/* MIJUONE v1.7 — non-destructive homepage composition fix.
 * Hero imagery is full-bleed, with no partial-width vertical image boundary.
 * Business tiles are true split layouts: text never sits on photography.
 * Carousel controls and category navigation occupy independent vertical space.
 */
:root{--mi17-blue:#1267ec;--mi17-ink:#0b2757;--mi17-glow:#64d7ff}
#miHeroCarousel.mi-hero-carousel{
  height:412px;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(115deg,#e5f2ff,#94c7fa);
  box-shadow:0 10px 28px rgba(20,68,134,.08);
}
#miHeroCarousel::before,
#miHeroCarousel::after{display:none}
#miHeroCarousel .mi-carousel-stage{height:100%}
#miHeroCarousel .mi-carousel-slide{background:linear-gradient(120deg,#edf5ff,#a8ceff)}
#miHeroCarousel .mi-carousel-slide::before,
#miHeroCarousel .mi-carousel-slide::after{display:none}
/* Slide 1 has a panoramic source: cover the whole canvas rather than
   starting its image at 40% of the viewport. */
#miHeroCarousel .mi-carousel-image{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  opacity:1;
  background-image:var(--mi-slide-image);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  filter:none;
  transform:scale(1.012);
  transition:transform 5.8s cubic-bezier(.2,.75,.25,1);
  will-change:transform;
}
#miHeroCarousel .mi-carousel-slide.is-active .mi-carousel-image{transform:scale(1.035)}
/* Most secondary images are approximately 2.27:1. Keep the complete photo
   visible on the right over an atmospheric blurred version of the same art. */
#miHeroCarousel .mi-carousel-slide:not([data-mi-slide="0"]) .mi-carousel-image{
  background-image:none;
  background:linear-gradient(100deg,#dcecff,#97bcf5);
  transform:none;
}
#miHeroCarousel .mi-carousel-slide:not([data-mi-slide="0"]) .mi-carousel-image::before{
  content:"";
  position:absolute;
  inset:-25px;
  background-image:var(--mi-slide-image);
  background-size:cover;
  background-position:center center;
  filter:blur(22px) saturate(.82);
  opacity:.36;
  transform:scale(1.04);
}
#miHeroCarousel .mi-carousel-slide:not([data-mi-slide="0"]) .mi-carousel-image::after{
  content:"";
  position:absolute;
  inset:0 0 0 46%;
  background-image:var(--mi-slide-image);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center right;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 11%,#000 23%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 11%,#000 23%);
  filter:saturate(1.03) contrast(1.03);
}
#miHeroCarousel .mi-carousel-wash{
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,
    rgba(240,247,255,.985) 0%,
    rgba(239,247,255,.982) 23%,
    rgba(234,244,255,.95) 33%,
    rgba(225,238,255,.84) 42%,
    rgba(220,236,255,.37) 57%,
    rgba(220,236,255,.06) 73%,transparent 91%);
}
#miHeroCarousel .mi-carousel-wash::after{
  background:linear-gradient(0deg,rgba(10,54,134,.1),transparent 23%);
  opacity:.6;
}
#miHeroCarousel .mi-carousel-content{
  height:100%;
  display:flex;
  align-items:center;
  z-index:3;
}
#miHeroCarousel .mi-carousel-copy{
  position:relative;
  width:min(100%,605px);
  max-width:605px;
  margin:0 0 14px 48px;
  padding:12px 18px 12px 0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:#0b2958;
}
#miHeroCarousel .mi-carousel-copy::before{
  content:"";display:block;width:50px;height:3px;margin-bottom:17px;
  background:linear-gradient(90deg,#0a66f2,#56d4ff);
  border-radius:10px;box-shadow:0 0 15px rgba(24,142,248,.32);
}
#miHeroCarousel .mi-carousel-kicker{
  margin:0 0 12px;font-size:10px;font-weight:850;
  letter-spacing:.17em;color:#2c64aa;
}
#miHeroCarousel .mi-carousel-copy h1{
  margin:0 0 13px;
  color:#092659;
  font-size:clamp(29px,2.55vw,43px);
  font-weight:900;
  line-height:1.17;
  letter-spacing:-.061em;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  text-wrap:pretty;
}
#miHeroCarousel .mi-carousel-copy h1 em{color:#0966ee}
#miHeroCarousel .mi-carousel-copy p{
  margin:0 0 18px;
  color:#426087;
  font-size:13px;
  line-height:1.66;
  font-weight:650;
}
#miHeroCarousel .mi-carousel-chips{gap:6px;margin:0 0 18px}
#miHeroCarousel .mi-carousel-chips span{
  padding:6px 11px;
  font-size:10px;
  color:#2562b2;
  border:1px solid rgba(131,177,230,.5);
  background:rgba(255,255,255,.52);
  box-shadow:none;
}
#miHeroCarousel .mi-carousel-actions{gap:11px}
#miHeroCarousel .mi-carousel-actions .btn{
  min-height:43px;
  border-radius:11px;
  padding:11px 18px;
  font-size:12px;
  box-shadow:0 8px 22px rgba(19,98,222,.14);
}
#miHeroCarousel .mi-carousel-actions .btn-white{
  color:#1c64d5;
  border:1px solid rgba(69,127,235,.46);
  background:rgba(255,255,255,.83);
}
#miHeroCarousel .mi-carousel-arrow{
  width:40px;height:40px;
  background:rgba(9,63,152,.26);
  border-color:rgba(255,255,255,.56);
  box-shadow:0 5px 16px rgba(25,73,148,.14);
  z-index:6;
}
#miHeroCarousel .mi-carousel-prev{left:14px}
#miHeroCarousel .mi-carousel-next{right:14px}
/* Controls are inside the hero with 20px of breathing room, independent of
   the category navigation below. */
#miHeroCarousel .mi-carousel-toolbar{
  left:50%;bottom:18px;
  transform:translateX(-50%);
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:100px;
  background:rgba(10,48,108,.56);
  box-shadow:0 9px 22px rgba(9,50,109,.16);
  backdrop-filter:blur(15px);
  z-index:8;
}
#miHeroCarousel .mi-carousel-progress-track{height:3px;z-index:6;bottom:0}
/* Remove the negative margin which previously placed the nav on top of
   carousel dots / controls. */
.page-home .mi-service-wrap,
.mi-service-wrap{margin-top:17px!important;position:relative;z-index:4}
.page-home .mi-service-grid{
  border-radius:18px;
  min-height:82px;
  padding:9px 10px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(206,221,244,.82);
  box-shadow:0 14px 32px rgba(42,83,153,.065);
}
.page-home .mi-service-grid>a{border-radius:11px}
.page-home .mi-workspace{margin-top:17px}

/* Three genuine side-by-side editorial tiles. Text is NEVER on top of image. */
.page-home .mi-solutions{
  min-width:0;
  padding:1px 0 2px;
}
.page-home .mi-solutions-heading{
  display:flex;align-items:end;justify-content:space-between;gap:14px;
  margin:0 2px 13px;
}
.page-home .mi-solutions-heading .mi-eyebrow{
  display:block;color:#176ded;font-size:9px;font-weight:900;
  line-height:1.4;letter-spacing:.13em;
}
.page-home .mi-solutions-heading h2{
  margin:3px 0 0;
  font-size:20px;line-height:1.3;
  font-weight:900;letter-spacing:-.05em;
  color:#112b5b;
}
.page-home .mi-solutions-sub{
  padding-bottom:2px;
  color:#788aa4;font-weight:600;font-size:11px;
  white-space:nowrap;
}
.page-home .mi-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.page-home .mi-feature-grid .mi-feature-card{
  display:grid;
  grid-template-columns:minmax(0,58%) minmax(0,42%);
  align-items:stretch;
  position:relative;
  width:100%;height:205px;min-height:205px;
  border-radius:17px;
  overflow:hidden;
  border:1px solid #d7e5fb;
  background:#f5f9ff;
  box-shadow:0 7px 23px rgba(22,70,149,.085);
  isolation:isolate;
  text-decoration:none;
  transition:transform .32s cubic-bezier(.22,.8,.22,1),box-shadow .32s ease,border-color .32s ease;
}
.page-home .mi-feature-card::before,
.page-home .mi-feature-card::after,
.page-home .mi-feature-card .mi-feature-content::before{display:none!important;content:none!important}
.page-home .mi-feature-grid .mi-feature-card:hover{
  transform:translateY(-5px);
  border-color:#97bbf5;
  box-shadow:0 18px 35px rgba(22,70,149,.14);
}
.page-home .mi-feature-grid .mi-feature-content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  height:100%;
  min-width:0;
  padding:19px 13px 17px 17px;
  background:transparent;
}
.page-home .mi-feature-grid .mi-feature-kicker{
  margin:0 0 17px;
  font-size:9px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.095em;
  opacity:.74;
}
.page-home .mi-feature-grid h3{
  display:block;
  margin:0 0 12px;
  font-size:clamp(15px,1.09vw,17px);
  line-height:1.25;
  font-weight:900;
  letter-spacing:-.046em;
  white-space:normal;
  overflow-wrap:break-word;
  color:inherit;
}
.page-home .mi-feature-grid h3 span{
  display:inline-block;
  font-size:10px;
  letter-spacing:-.01em;
  font-weight:800;
  opacity:.73;
  vertical-align:2px;
}
.page-home .mi-feature-grid .mi-feature-content p{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0;
  padding:0;
  max-width:100%;
  font-size:11px;
  line-height:1.54;
  font-weight:590;
  color:inherit;
  opacity:.83;
}
.page-home .mi-feature-grid .mi-feature-action{
  position:relative;
  z-index:1;
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border-radius:9px;
  font-size:10.5px;
  line-height:1.15;
  font-weight:840;
  white-space:nowrap;
  border:1px solid rgba(77,132,233,.27);
  background:rgba(255,255,255,.9);
  color:#155cc6;
  box-shadow:0 4px 12px rgba(24,80,163,.08);
}
.page-home .mi-feature-action .icon{width:13px;height:13px;transition:transform .22s}
.page-home .mi-feature-card:hover .mi-feature-action .icon{transform:translateX(3px)}
.page-home .mi-feature-grid .mi-feature-visual{
  position:relative;
  z-index:0;
  display:block;
  width:100%;height:100%;
  overflow:hidden;
  align-self:stretch;
}
.page-home .mi-feature-visual img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .45s ease;
}
.page-home .mi-feature-card:hover .mi-feature-visual img{transform:scale(1.065);filter:saturate(1.08)}
.page-home .mi-feature-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(245,249,255,.52),transparent 32%);
  pointer-events:none;
}
.page-home .mi-feature-grid .mi-feature-b2b{
  background:linear-gradient(120deg,#0c326c,#123e84);
  color:#fff;
  border-color:#2c5494;
}
.page-home .mi-feature-b2b .mi-feature-content p{color:#d9e7ff}
.page-home .mi-feature-b2b .mi-feature-visual::after{background:linear-gradient(90deg,rgba(13,47,100,.6),transparent 38%)}
.page-home .mi-feature-b2b .mi-feature-action{color:#0f4ba2;background:#fff;border-color:transparent}
.page-home .mi-feature-grid .mi-feature-crm{
  background:linear-gradient(145deg,#f4f9ff,#e9f3ff);
  color:#152f65;
}
.page-home .mi-feature-grid .mi-feature-ads{
  background:linear-gradient(145deg,#f9f6ff,#f0eaff);
  color:#322565;
  border-color:#e7dcfb;
}
.page-home .mi-feature-ads .mi-feature-visual::after{background:linear-gradient(90deg,rgba(248,245,255,.52),transparent 34%)}

/* Stronger visible motion with restraint. */
@keyframes mi17Float{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-4px,0)}
}
#miHeroCarousel .mi-carousel-copy::before{animation:mi17Float 4s ease-in-out infinite}
.page-home .mi-service-grid>a .icon{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.page-home .mi-service-grid>a:hover .icon{transform:translateY(-3px) scale(1.08)}

@media(max-width:1400px){
  #miHeroCarousel.mi-hero-carousel{height:385px}
  #miHeroCarousel .mi-carousel-copy{margin-left:35px;max-width:545px}
  #miHeroCarousel .mi-carousel-copy h1{font-size:clamp(29px,2.6vw,37px)}
  .page-home .mi-feature-grid .mi-feature-card{height:199px;min-height:199px}
  .page-home .mi-feature-grid .mi-feature-content{padding:17px 9px 15px 12px}
  .page-home .mi-feature-grid h3{font-size:15px}
  .page-home .mi-feature-grid .mi-feature-kicker{font-size:8px;margin-bottom:13px}
  .page-home .mi-feature-grid .mi-feature-content p{font-size:10.5px}
}
@media(max-width:1120px){
  #miHeroCarousel .mi-carousel-copy{max-width:485px;margin-left:30px}
  #miHeroCarousel .mi-carousel-copy h1{font-size:32px}
  .page-home .mi-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-home .mi-feature-grid .mi-feature-card:last-child{grid-column:span 2;height:180px;min-height:180px;grid-template-columns:58% 42%}
  .page-home .mi-feature-grid .mi-feature-card{height:182px;min-height:182px}
}
@media(max-width:800px){
  #miHeroCarousel.mi-hero-carousel{height:390px}
  #miHeroCarousel .mi-carousel-copy{margin-left:14px;max-width:440px}
  #miHeroCarousel .mi-carousel-copy h1{font-size:29px}
  #miHeroCarousel .mi-carousel-slide:not([data-mi-slide="0"]) .mi-carousel-image::after{inset:0 0 0 34%}
  #miHeroCarousel .mi-carousel-wash{background:linear-gradient(90deg,rgba(238,246,255,.98),rgba(238,246,255,.92) 39%,rgba(232,244,255,.45) 73%,transparent 100%)}
  .page-home .mi-solutions-heading{align-items:center}
  .page-home .mi-solutions-sub{display:none}
  .page-home .mi-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  #miHeroCarousel.mi-hero-carousel{height:410px}
  #miHeroCarousel .mi-carousel-image{background-position:67% center;opacity:.66}
  #miHeroCarousel .mi-carousel-slide:not([data-mi-slide="0"]) .mi-carousel-image::after{inset:0 -7% 0 0;opacity:.7;background-position:center center}
  #miHeroCarousel .mi-carousel-wash{background:linear-gradient(90deg,rgba(239,247,255,.96),rgba(236,246,255,.92) 48%,rgba(233,245,255,.75))}
  #miHeroCarousel .mi-carousel-copy{margin:0 24px 32px;padding:0 4px;max-width:none;width:calc(100% - 48px)}
  #miHeroCarousel .mi-carousel-copy::before{margin-bottom:12px;width:38px}
  #miHeroCarousel .mi-carousel-kicker{font-size:8px;margin-bottom:9px;letter-spacing:.12em}
  #miHeroCarousel .mi-carousel-copy h1{font-size:clamp(23px,6vw,30px);line-height:1.22;margin-bottom:10px}
  #miHeroCarousel .mi-carousel-copy p{font-size:10.7px;line-height:1.6;margin-bottom:11px}
  #miHeroCarousel .mi-carousel-chips{gap:5px;margin-bottom:12px}
  #miHeroCarousel .mi-carousel-chips span{font-size:9px;padding:5px 7px}
  #miHeroCarousel .mi-carousel-actions .btn{min-height:35px;padding:8px 10px;font-size:10px}
  #miHeroCarousel .mi-carousel-prev{left:4px}
  #miHeroCarousel .mi-carousel-next{right:4px}
  #miHeroCarousel .mi-carousel-arrow{width:27px;height:27px}
  #miHeroCarousel .mi-carousel-toolbar{bottom:13px}
  .page-home .mi-service-wrap{margin-top:12px!important}
  .page-home .mi-service-grid{padding:6px;min-height:80px}
  .page-home .mi-solutions-heading h2{font-size:18px}
  .page-home .mi-feature-grid{grid-template-columns:1fr;gap:10px}
  .page-home .mi-feature-grid .mi-feature-card,
  .page-home .mi-feature-grid .mi-feature-card:last-child{
    grid-column:auto;
    grid-template-columns:59% 41%;
    min-height:166px;height:166px;
  }
  .page-home .mi-feature-grid .mi-feature-content{padding:15px 12px 13px 16px}
  .page-home .mi-feature-grid .mi-feature-kicker{margin-bottom:12px}
  .page-home .mi-feature-grid h3{font-size:16px;margin-bottom:8px}
  .page-home .mi-feature-grid .mi-feature-content p{font-size:10.8px;-webkit-line-clamp:2}
  .page-home .mi-feature-grid .mi-feature-action{font-size:10px;padding:7px 10px}
}
@media(prefers-reduced-motion:reduce){
  #miHeroCarousel .mi-carousel-image,
  #miHeroCarousel .mi-carousel-copy::before,
  .page-home .mi-feature-card,
  .page-home .mi-feature-visual img,
  .page-home .mi-service-grid>a .icon{animation:none!important;transition:none!important;transform:none!important}
}



/* MIJUONE v1.8 — pristine 2,560 px first artwork; keep whole-hero sharpness. */
#miHeroCarousel .mi-carousel-slide[data-mi-slide="0"] .mi-carousel-image{
  background-size:cover;
  background-position:center top;
  image-rendering:auto;
  filter:none;
}
@media(min-width:1600px){
  #miHeroCarousel .mi-carousel-slide[data-mi-slide="0"] .mi-carousel-image{background-position:center top}
}
@media(max-width:620px){
  #miHeroCarousel .mi-carousel-slide[data-mi-slide="0"] .mi-carousel-image{background-position:72% center;opacity:.65}
}