/* ============================================================
   Mariam Fathy — Uniquely You
   Design tokens
   ============================================================ */
:root{
  --ink:            #1b1712;
  --ink-soft:       #4a4238;
  --gold:           #c69a3e;
  --gold-deep:      #a97e28;
  --gold-pale:      #e9d6ab;
  --cream:          #faf6ee;
  --paper:          #ffffff;
  --sage:           #8b9574;
  --line:           #e6ddc9;
  --shadow:         0 20px 50px -25px rgba(27,23,18,.35);
  --radius:         2px;
  --ease:           cubic-bezier(.23,1,.32,1);
  --header-h:       92px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
[dir="rtl"] body{ font-family:'Cairo', sans-serif; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:'Cormorant Garamond', serif; font-weight:600; margin:0; }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{ font-family:'Cairo', sans-serif; font-weight:700; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

.container{
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:28px;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:500;
}
[dir="rtl"] .eyebrow{ letter-spacing:.05em; font-weight:600;}
.eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--gold-deep);
  display:inline-block;
}


/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-delay-1.in-view{ transition-delay:.08s; }
.reveal-delay-2.in-view{ transition-delay:.16s; }
.reveal-delay-3.in-view{ transition-delay:.24s; }
.reveal-delay-4.in-view{ transition-delay:.32s; }
.reveal-delay-5.in-view{ transition-delay:.40s; }
.reveal-delay-6.in-view{ transition-delay:.48s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ============================================================
   Skip link
   ============================================================ */
.skip-link{
  position:absolute; inset-inline-start:-999px; top:0;
  background:var(--ink); color:var(--cream); padding:12px 20px; z-index:999;
}
.skip-link:focus{ inset-inline-start:12px; top:12px; }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:fixed; top:0; inset-inline:0; z-index:500;
  height:var(--header-h);
  background:rgba(250,246,238,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--ease), background .4s var(--ease);
}
.site-header.scrolled{
  box-shadow:var(--shadow);
  background:rgba(250,246,238,.98);
}
.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{
  display:flex; align-items:center; gap:14px;
  flex-shrink:0;
}
.brand img{ height:48px; width:auto; }
.brand-title{
  display:flex; flex-direction:column; line-height:1.15;
  border-inline-start:1px solid var(--line);
  padding-inline-start:14px;
}
.brand-title strong{
  font-family:'Cormorant Garamond', serif;
  font-size:19px; letter-spacing:.05em; font-weight:600; color:var(--ink);
}
[dir="rtl"] .brand-title strong{ font-family:'Cairo', sans-serif; font-weight:700; letter-spacing:0; }
.brand-title span{
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-deep); margin-top:3px;
}
[dir="rtl"] .brand-title span{ letter-spacing:.08em; }

.hotline{
  display:flex; align-items:center; gap:10px;
  padding:6px 8px 6px 6px;
  border:1px solid var(--line);
  border-radius:999px;
  transition:border-color .3s, transform .3s;
}
[dir="rtl"] .hotline{ padding:6px 6px 6px 8px; }
.hotline:hover{ border-color:var(--gold); transform:translateY(-1px); }
.hotline img{ height:26px; width:auto; border-radius:999px; }
.hotline-text{ display:flex; flex-direction:column; line-height:1.1; }
.hotline-text small{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.hotline-text b{ font-size:13px; letter-spacing:.03em; }

.lang-switch{
  flex-shrink:0;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--ink);
  padding:9px 16px;
  border-radius:999px;
  transition:background .3s, color .3s;
  white-space:nowrap;
}
.lang-switch:hover{ background:var(--ink); color:var(--cream); }

@media (max-width:760px){
  :root{ --header-h:78px; }
  .brand img{ height:36px; }
  .brand-title{ display:none; }
  .hotline-text{ display:none; }
  .hotline img{ height:30px; }
  .lang-switch{ padding:8px 12px; font-size:11px; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  margin-top:var(--header-h);
  height:min(88vh, 780px);
  min-height:460px;
  overflow:hidden;
  display:flex; align-items:flex-end;
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 25%;
  animation:kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.08) translate(-1%,-1%); }
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(27,23,18,.05) 0%, rgba(27,23,18,.15) 55%, rgba(27,23,18,.72) 100%);
}
.hero-content{
  position:relative; z-index:2;
  width:100%;
  padding-bottom:64px;
  color:var(--cream);
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-pale); margin-bottom:18px;
}
[dir="rtl"] .hero-eyebrow{ letter-spacing:.08em; font-weight:600; }
.hero-eyebrow::before{ content:""; width:38px; height:1px; background:var(--gold-pale); }


.hero-title{
  font-size:clamp(44px, 8vw, 96px);
  letter-spacing:.06em;
  color:var(--paper);
  margin-bottom:10px;
}
[dir="rtl"] .hero-title{ letter-spacing:0; }
.hero-sub{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
  font-size:clamp(16px,2.6vw,22px);
  color:var(--gold-pale);
  margin-bottom:22px;
}
[dir="rtl"] .hero-sub{ font-family:'Cairo',sans-serif; font-style:normal; font-weight:400; }
.hero-desc{
  max-width:520px;
  font-size:16px; line-height:1.75; font-weight:300;
  color:rgba(250,246,238,.86);
  margin-bottom:34px;
}
.hero-cta{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--gold);
  color:var(--ink);
  padding:16px 30px;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  border-radius:999px;
  transition:background .35s var(--ease), transform .35s var(--ease), letter-spacing .35s var(--ease);
}
[dir="rtl"] .hero-cta{ letter-spacing:.04em; font-weight:700; }
.hero-cta svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
.hero-cta:hover{ background:var(--paper); transform:translateY(-2px); letter-spacing:.28em; }
[dir="rtl"] .hero-cta:hover{ letter-spacing:.04em; }
.hero-cta:hover svg{ transform:translateX(4px); }
[dir="rtl"] .hero-cta:hover svg{ transform:translateX(-4px) scaleX(-1); }
[dir="rtl"] .hero-cta svg{ transform:scaleX(-1); }

/* scroll cue */
.scroll-cue{
  position:absolute; bottom:26px; inset-inline-end:36px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--gold-pale);
}
.scroll-cue span{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; writing-mode:vertical-rl; }
[dir="rtl"] .scroll-cue span{ writing-mode:vertical-rl; }
.scroll-cue .dash{
  width:1px; height:40px; background:linear-gradient(var(--gold-pale), transparent);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }
@media (max-width:640px){ .scroll-cue{ display:none; } }

/* ============================================================
   Signature divider (silhouette thread line)
   ============================================================ */
.thread-divider{
  width:100%;
  display:flex; justify-content:center;
  margin-block:8px 0;
  overflow:hidden;
}
.thread-divider svg{ width:220px; height:64px; }
.thread-path{
  fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:340; stroke-dashoffset:340;
  transition:stroke-dashoffset 1.6s var(--ease);
}
.thread-divider.in-view .thread-path{ stroke-dashoffset:0; }

/* ============================================================
   Section: intro
   ============================================================ */
.section{ padding-block:96px; }
.section-head{
  text-align:center;
  max-width:640px;
  margin-inline:auto;
  margin-bottom:64px;
}
.section-head .eyebrow{ justify-content:center; margin-bottom:18px; }
.section-title{
  font-size:clamp(34px,5vw,54px);
  letter-spacing:.02em;
  margin-bottom:18px;
}
.section-desc{
  font-size:16px; line-height:1.8; color:var(--ink-soft); font-weight:300;
}
[dir="rtl"] .section-desc{ font-weight:400; }

/* ============================================================
   Product grid
   ============================================================ */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid{ grid-template-columns:1fr; } }

.card{
  position:relative;
  background:var(--paper);
  display:block;
  overflow:hidden;
  isolation:isolate;
}
.card-frame{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--cream);
}
.card-frame img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease), filter .6s ease;
}
.card:hover .card-frame img{ transform:scale(1.07); }

.card-frame::before,.card-frame::after{
  content:"";
  position:absolute; z-index:2;
  width:26px; height:26px;
  border-color:var(--gold);
  opacity:0; transition:opacity .45s var(--ease), width .45s var(--ease), height .45s var(--ease);
}
.card-frame::before{
  top:14px; inset-inline-start:14px;
  border-top:2px solid; border-inline-start:2px solid;
}
.card-frame::after{
  bottom:14px; inset-inline-end:14px;
  border-bottom:2px solid; border-inline-end:2px solid;
}
.card:hover .card-frame::before,
.card:hover .card-frame::after{ opacity:1; width:34px; height:34px; }

.card-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 55%, rgba(27,23,18,.62) 100%);
  opacity:0; transition:opacity .45s var(--ease);
}
.card:hover .card-overlay{ opacity:1; }

.card-body{
  padding:22px 24px 26px;
}
.card-num{
  font-size:11px; letter-spacing:.2em; color:var(--gold-deep); font-weight:500; margin-bottom:8px; display:block;
}
.card-name{
  font-size:21px; margin-bottom:8px; letter-spacing:.01em;
}
.card-desc{
  font-size:13.5px; line-height:1.65; color:var(--ink-soft); font-weight:300; margin-bottom:16px; min-height:44px;
}
[dir="rtl"] .card-desc{ font-weight:400; }
.card-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:3px;
  transition:gap .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
[dir="rtl"] .card-cta{ letter-spacing:.02em; font-weight:600; }
.card-cta svg{ width:13px; height:13px; transition:transform .3s var(--ease); }
[dir="rtl"] .card-cta svg{ transform:scaleX(-1); }
.card:hover .card-cta{ gap:12px; color:var(--gold-deep); border-color:var(--gold-deep); }
.card:hover .card-cta svg{ transform:translateX(3px); }
[dir="rtl"] .card:hover .card-cta svg{ transform:translateX(-3px) scaleX(-1); }

/* ============================================================
   Strip / trust band
   ============================================================ */
.strip{
  background:var(--ink);
  color:var(--gold-pale);
  padding-block:26px;
  overflow:hidden;
}
.strip-track{
  display:flex; gap:56px; white-space:nowrap;
  animation:marquee 26s linear infinite;
  width:max-content;
}
[dir="rtl"] .strip-track{ animation-direction:reverse; }
.strip-track span{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:19px; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:56px;
}
[dir="rtl"] .strip-track span{ font-family:'Cairo',sans-serif; font-style:normal; font-weight:500; }
.strip-track span::after{ content:"✦"; color:var(--gold); font-style:normal; margin-inline-start:56px; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--ink);
  color:var(--cream);
  padding-block:56px 28px;
  margin-top:0;
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-bottom:32px; border-bottom:1px solid rgba(250,246,238,.14);
}
.footer-brand{ display:flex; align-items:center; gap:14px; }
.footer-brand img{ height:34px; filter:brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(5deg); opacity:.92; }
.footer-brand-text strong{ font-family:'Cormorant Garamond', serif; font-size:18px; letter-spacing:.05em; display:block; }
[dir="rtl"] .footer-brand-text strong{ font-family:'Cairo',sans-serif; font-weight:700; }
.footer-brand-text span{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
[dir="rtl"] .footer-brand-text span{ letter-spacing:.08em; }

.home-link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(250,246,238,.3);
  padding:11px 20px; border-radius:999px;
  transition:border-color .3s, background .3s;
}
[dir="rtl"] .home-link{ letter-spacing:.02em; }
.home-link:hover{ border-color:var(--gold); background:rgba(198,154,62,.12); }
.home-link svg{ width:15px; height:15px; }
[dir="rtl"] .home-link svg{ transform:scaleX(-1); }

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-top:24px;
  font-size:12px; color:rgba(250,246,238,.6);
}
.powered{
  display:flex; align-items:center; gap:10px;
}
.powered img{ height:22px; width:auto; }
.powered a{ display:flex; align-items:center; gap:8px; transition:opacity .3s; }
.powered a:hover{ opacity:.75; }

@media (max-width:640px){
  .footer-inner, .footer-bottom{ flex-direction:column; align-items:flex-start; text-align:start; }
}

/* ============================================================
   Back to top
   ============================================================ */
.to-top{
  position:fixed; bottom:26px; inset-inline-end:26px; z-index:400;
  width:50px; height:50px; border-radius:50%;
  background:var(--ink); color:var(--gold-pale);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .3s, visibility .35s;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--gold); color:var(--ink); }
.to-top svg{ width:18px; height:18px; }