/* WATEEN_WELCOME_SINGLE_OWNER=1 | WATEEN_WELCOME_SLIDER_PRODUCTION=1
   Single visual owner for the homepage hero on desktop and mobile. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;margin:20px 0 12px;
  border:1px solid #e4eeef;border-radius:30px;background:#f4f9f9;
  color:#16333b;box-shadow:none;
}
.s652welcome{display:block;min-height:360px;padding:0;touch-action:pan-y}
.s652track{display:grid;min-height:360px}
.s652slideview{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease}
.s652slideview.on{opacity:1;visibility:visible;pointer-events:auto}
.s652launch-slide{position:relative;overflow:hidden;min-height:360px;aspect-ratio:1600/560;background:#f7fbfb}
.s652launch-picture{display:block;width:100%;height:100%}
.s652launch-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 44%}
.s652homeview{
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  align-items:center;gap:clamp(26px,4vw,58px);min-height:360px;padding:clamp(30px,4vw,50px);
  overflow:hidden;
}
.s652homeview--beauty{background:linear-gradient(120deg,#f6fbfb 0%,#fff 54%,#fff1f4 100%)}
.s652homeview::before,.s652homeview::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.s652homeview::before{
  width:370px;height:310px;left:-95px;top:-110px;border:28px solid #dcecef;
  border-radius:48% 52% 62% 38%;transform:rotate(-24deg);
}
.s652homeview::after{
  width:116px;height:150px;left:33%;bottom:-112px;border:14px solid #ffd9de;
  border-radius:50%;transform:rotate(25deg);
}
.s652homeview--beauty::before{border-color:#e1eff1}
.s652homeview--beauty::after{left:auto;right:12%;border-color:#ffcfd7}
.s652welcome-copy{position:relative;z-index:2;min-width:0;text-align:right}
.s652welcome-copy small{display:block;margin:0 0 10px;color:#0b5e72;font-size:13px;line-height:1.6;font-weight:800}
.s652welcome-copy h1{margin:0;color:#083f4d;font-size:clamp(32px,3.55vw,50px);font-weight:900;line-height:1.32;letter-spacing:-.7px}
.s652welcome-copy h1 b{color:#e7253c;font-weight:900}
.s652welcome-copy p{max-width:470px;margin:14px 0 22px;color:#536d74;font-size:15px;line-height:1.9}
.s652welcome-button{
  display:inline-flex;align-items:center;justify-content:center;min-width:155px;min-height:49px;max-width:100%;
  padding:12px 25px;border:0;border-radius:14px;background:#e7253c;color:#fff!important;
  font:inherit;font-size:14px;font-weight:800;box-shadow:none;cursor:pointer;transition:background-color .16s ease,transform .16s ease;
}
.s652welcome-button:hover{background:#ce1830;transform:translateY(-1px)}
.s652welcome-button:focus-visible{outline:3px solid #0b5e72;outline-offset:4px}
.s652welcome-media{position:relative;z-index:2;min-width:0}
.s652beauty-product{
  min-width:0;min-height:0;overflow:hidden;display:grid;place-items:center;
  padding:9px;background:#fff;border:1px solid #e4edef;border-radius:18px;
}
.s652beauty-product img{display:block;width:100%;height:100%;object-fit:contain}
.s652beauty-gallery{direction:ltr;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:450px;margin:auto}
.s652beauty-product{aspect-ratio:1;padding:12px;background:linear-gradient(145deg,#fff,#fff8f9);border-color:#ecdfe2}
.s652beauty-product span{font-size:54px;filter:saturate(.8)}
.s652arrow{
  position:absolute;z-index:8;top:50%;transform:translateY(-50%);width:40px;height:40px;
  border:1px solid #dfeaec;border-radius:50%;background:#fffffff2;color:#0b5e72;
  font-size:27px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 7px 20px #0b5e7212;
}
.s652arrow.prev{right:10px}.s652arrow.next{left:10px}
.s652dots{position:absolute;z-index:9;bottom:13px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
.s652dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#b6cdd2;cursor:pointer}
.s652dots button.on{width:26px;border-radius:999px;background:#e7253c}
.s652arrow:focus-visible,.s652dots button:focus-visible{outline:3px solid #0b5e72;outline-offset:3px}

/* Existing configured studio slides keep their own layout. */
.s652hero:not(.s652welcome){display:block;padding:0;min-height:300px}
.s652hero:not(.s652welcome) .s652track{min-height:300px}
.s652hero:not(.s652welcome) .s652slideview{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(160px,.8fr);align-items:center;
  gap:26px;padding:38px 46px;min-height:300px;background-size:cover;background-position:center;
}
.s652copy{position:relative;min-width:0;z-index:2}
.s652copy small{display:block;margin-bottom:8px;color:#0b5e72;font-weight:800}
.s652copy h1{margin:0;color:#083f4d;font-size:clamp(28px,3vw,42px);line-height:1.35}
.s652copy h1 b{color:#e7253c}
.s652copy p{max-width:650px;color:#536d74;line-height:1.9}
.s652media{display:grid;place-items:center;position:relative;z-index:2;min-width:0}
.s652picture{display:block;width:100%}.s652picture img{display:block;width:100%;max-height:260px;object-fit:contain;border-radius:18px}
.s652art{font-size:72px}
.s652slideview:has(.s652copy>h1:empty){grid-template-columns:1fr!important;padding:0!important;gap:0!important;background:none!important;min-height:0!important}
.s652slideview:has(.s652copy>h1:empty) .s652copy{display:none}
.s652slideview:has(.s652copy>h1:empty) .s652media{grid-column:1/-1;width:100%;min-height:0}
.s652slideview:has(.s652copy>h1:empty) .s652picture img{width:100%;height:auto;max-height:none;object-fit:contain;border-radius:0}


/* WATEEN_TECHNOLOGY_SLIDE_V3=1 — desktop copy occupies the artwork's left safe area; mobile keeps its own asset. */
@media(min-width:761px){
  .s652homeview--technology{
    direction:ltr;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    min-height:360px;
    background:#050914 url('/wateen-technology-desktop.webp') center 58%/cover no-repeat;
  }
  .s652homeview--technology::before,.s652homeview--technology::after{display:none}
  .s652homeview--technology .s652welcome-copy{
    grid-column:1;
    justify-self:start;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
    direction:rtl;
    text-align:right;
    width:min(100%,470px);
    max-width:470px;
    margin:0;
    padding-inline:clamp(6px,1vw,16px);
  }
  .s652homeview--technology .s652welcome-copy small{color:#65d8ff}
  .s652homeview--technology .s652welcome-copy h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)}
  .s652homeview--technology .s652welcome-copy h1 b{color:#ff4155}
  .s652homeview--technology .s652welcome-copy p{color:#d3dde5}
  .s652homeview--technology .s652welcome-button{
    align-self:flex-end;
    width:max-content;
    min-width:170px;
    margin-left:0;
    margin-right:auto;
  }
  .s652homeview--technology .s652technology-media{display:none}
}

/* WATEEN_BEAUTY_DESKTOP_ART_V1=1 — designer asset is the slide canvas on desktop only. */
@media(min-width:761px){
  .s652homeview--beauty{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    min-height:0;
    aspect-ratio:1600/560;
    padding:clamp(26px,3vw,42px);
    background:#f7f9f9 url('/wateen-beauty-desktop.webp') center/100% 100% no-repeat;
  }
  .s652homeview--beauty::before,.s652homeview--beauty::after{display:none}
  .s652homeview--beauty .s652welcome-media{display:none}
  .s652homeview--beauty .s652welcome-copy{
    grid-column:1;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    max-width:470px;
    padding-block:4px;
  }
  .s652homeview--beauty .s652welcome-copy small{display:none}
  .s652homeview--beauty .s652welcome-copy h1{
    max-width:440px;
    font-size:clamp(30px,3.1vw,46px);
    line-height:1.28;
    text-shadow:0 1px 0 rgba(255,255,255,.72);
  }
  .s652homeview--beauty .s652welcome-copy p{
    max-width:430px;
    margin:10px 0 0;
    color:#4f6c73;
    font-size:14px;
    line-height:1.75;
  }
  .s652homeview--beauty .s652welcome-button{
    align-self:flex-start;
    margin-top:auto;
    min-width:190px;
  }
}

@media(max-width:760px){
  .s652homeview--technology{
    min-height:0;
    aspect-ratio:3/4;
    padding:22px 18px 34px;
    background:#030611 url('/wateen-technology-mobile.webp') center/cover no-repeat;
    overflow:hidden;
  }
  .s652homeview--technology::before,.s652homeview--technology::after{display:none}
  .s652homeview--technology .s652welcome-media{display:none}
  .s652homeview--technology .s652welcome-copy{
    position:static;
    z-index:2;
    width:100%;
    min-height:48%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    direction:rtl;
    text-align:right;
    padding:18px 4px 0;
  }
  .s652homeview--technology .s652welcome-copy small{color:#65d8ff;font-size:12px;margin:0 0 8px}
  .s652homeview--technology .s652welcome-copy h1{
    width:100%;
    max-width:100%;
    margin:0;
    color:#fff;
    text-shadow:0 2px 16px rgba(0,0,0,.35);
    font-size:clamp(27px,7.3vw,34px);
    line-height:1.28;
  }
  .s652homeview--technology .s652welcome-copy h1 b{color:#ff4155}
  .s652homeview--technology .s652welcome-copy p{
    width:92%;
    margin:9px 0 14px;
    color:#d3dde5;
    font-size:clamp(12px,3.3vw,14px);
    line-height:1.65;
  }
  .s652homeview--technology .s652welcome-button{
    position:absolute;
    z-index:4;
    top:12%;
    left:50%;
    transform:translateX(-50%);
    align-self:auto!important;
    width:max-content!important;
    min-width:158px;
    max-width:76%;
    min-height:45px;
    margin:0!important;
    padding:10px 18px;
    font-size:13px;
  }
}

@media(max-width:760px){
  .hero{margin:14px 0 8px;border-radius:23px}
  .s652launch-slide{min-height:0;aspect-ratio:3/4}
  .s652launch-picture img{object-position:center 46%}
  /* WATEEN_BEAUTY_MOBILE_DRIVE_V2=1 */
  .s652homeview--beauty{min-height:0;aspect-ratio:3/4;padding:clamp(22px,6vw,34px) 18px 34px;background:#f6e7df url('/wateen-beauty-mobile.webp') center/cover no-repeat;overflow:hidden}
  .s652homeview--beauty::before,.s652homeview--beauty::after{display:none}
  .s652homeview--beauty .s652welcome-media{display:none}
  .s652homeview--beauty .s652welcome-copy{position:static;z-index:2;width:100%;max-width:100%;min-height:45%;display:flex;flex-direction:column;align-items:stretch;justify-content:center;text-align:right;direction:rtl;padding:0 4px 8px}
  .s652homeview--beauty .s652welcome-copy small{display:none}
  .s652homeview--beauty .s652welcome-copy h1{width:100%;max-width:100%;margin:0;text-align:right;direction:rtl;font-size:clamp(25px,7vw,32px);line-height:1.3;color:#073f4c;text-shadow:0 1px 0 rgba(255,255,255,.72)}
  .s652homeview--beauty .s652welcome-copy h1 b{color:#e7253c}
  .s652homeview--beauty .s652welcome-copy p{width:100%;max-width:100%;margin:9px 0 13px;text-align:right;direction:rtl;color:#5d6668;font-size:clamp(12px,3.25vw,14px);line-height:1.65}
  .s652homeview--beauty .s652welcome-button{position:absolute;z-index:4;top:12%;left:50%;transform:translateX(-50%);align-self:auto!important;width:max-content!important;min-width:184px;max-width:78%;min-height:45px;margin:0!important;padding:10px 18px;font-size:13px}
  .s652welcome,.s652track{min-height:0}
  .s652homeview{grid-template-columns:1fr;min-height:0;gap:17px;padding:23px 18px 42px}
  .s652welcome-copy h1{font-size:clamp(29px,8.2vw,39px);letter-spacing:-.35px;line-height:1.34}
  .s652welcome-copy small{margin-bottom:7px;font-size:12px}
  .s652welcome-copy p{max-width:100%;margin:10px 0 16px;font-size:14px;line-height:1.8}
  .s652welcome-button{min-height:47px;padding:11px 20px;font-size:13px}
      .s652beauty-product{aspect-ratio:1;padding:6px;border-radius:13px}
  .s652beauty-product span{font-size:34px}
  .s652homeview::before{width:230px;height:200px;left:-120px;top:-125px;border-width:20px}
  .s652homeview::after{left:auto;right:-30px;bottom:-100px}
  .s652arrow{width:34px;height:34px;font-size:23px;top:auto;bottom:9px;transform:none}
  .s652arrow.prev{right:12px}.s652arrow.next{left:12px}
  .s652dots{bottom:17px}
  .s652hero:not(.s652welcome),.s652hero:not(.s652welcome) .s652track{min-height:0}
  .s652hero:not(.s652welcome) .s652slideview{grid-template-columns:1fr;gap:14px;padding:26px 24px 38px;min-height:0;text-align:right}
  .s652media{min-height:120px}.s652picture img{max-height:150px}.s652art{font-size:50px}
}
@media(max-width:420px){
  .s652homeview{padding:21px 14px 42px;gap:15px}
  .s652welcome-copy h1{font-size:29px}
  .s652welcome-copy p{font-size:13px}
  .s652welcome-button{width:100%}
  .s652beauty-gallery{gap:5px}
  .s652beauty-product span{font-size:28px}
}
@media(prefers-reduced-motion:reduce){.s652welcome-button,.s652slideview{transition:none}}
