/* design reset (from the design files) */
:root{box-sizing:border-box}
body{margin:0;padding:0;font-size:14px;background:#faf9f5;color:#141413}
img{max-width:100%;height:auto}
[hidden]:not([hidden=until-found i]){display:none!important}

/* ============================================================
   Layout concept: a right-to-left editorial skincare page built
   as a slow vertical procession — full-bleed hero slider, then
   alternating light/sand/olive bands, each one a single idea.
   Token system drawn from the Reserva Natural brand guidelines.
   ============================================================ */
:root{
  /* color */
  --gold:#B28D4A;
  --olive:#41521F;
  --sand:#EADCC6;
  --greige:#D6D0C4;
  --off:#F7F6F2;
  --ink:#222222;
  --plum:#4A2350;
  --bg:var(--off);
  --fg:var(--ink);
  --card-bg:#FFFFFF;
  --border:rgba(34,34,34,.12);
  color-scheme: light only;

  /* type */
  --f-display:'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --f-ar-display:'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --f-body:'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
}
/* Light design only: dark-mode variant removed so phones in dark mode show the brand colours. */

*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--f-body); direction:rtl; text-align:right;
  line-height:1.85; padding-inline:0 !important;
}
img{max-width:100%; display:block}
h1,h2,h3{font-family:var(--f-ar-display); font-weight:700; margin:0; text-wrap:balance}
p{margin:0}
.en{font-family:var(--f-display); font-style:normal; font-weight:400; direction:ltr; display:block; unicode-bidi:isolate;}
.wrap{max-width:1180px; margin-inline:auto; padding-inline:20px}
.eyebrow{font-size:.78rem; letter-spacing:.14em; font-weight:700; color:var(--gold); text-transform:uppercase; direction:ltr; display:inline-block}
section{padding-block:64px}
@media (max-width:640px){ section{padding-block:44px} }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  border-radius:2px; padding:14px 26px; font-weight:700; font-size:.95rem;
  cursor:pointer; border:1px solid transparent; min-height:44px; text-decoration:none;
  font-family:var(--f-body);
}
.btn-olive{background:var(--gold); color:#fff}
.btn-olive:hover{background:#9A7638}
.btn-ghost{background:transparent; border-color:currentColor; color:inherit}
.btn-link{background:none; border:none; padding:0; color:var(--gold); text-decoration:underline; text-underline-offset:4px; font-weight:700; cursor:pointer}

/* icons */
.ic{width:26px; height:26px; flex:none}
.ic path,.ic circle{stroke:currentColor}

/* ---------- header ---------- */
header.site{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:var(--off); border-bottom:1px solid var(--border);
}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:14px; min-width:0}
.brand{display:flex; align-items:center; gap:10px; flex:none}
.brand img{height:34px; width:auto}
nav.primary{display:flex; align-items:center; gap:0; font-size:.9rem; font-weight:500}
nav.primary > a, .nav-drop > a{display:inline-flex; align-items:center; gap:5px; color:var(--fg); text-decoration:none; padding:10px 7px; position:relative; white-space:nowrap}
nav.primary > a::after, .nav-drop > a::after{content:""; position:absolute; inset-inline:7px; bottom:4px; height:1px; background:var(--gold); transform:scaleX(0); transition:transform .25s ease}
nav.primary > a:hover::after, .nav-drop:hover > a::after, .nav-drop:focus-within > a::after, nav.primary > a.current::after{transform:scaleX(1)}
nav.primary > a.current{font-weight:700}
.nav-drop{position:relative}
.nav-drop .chev{width:10px; height:10px; transition:transform .2s ease}
.nav-drop:hover .chev, .nav-drop:focus-within .chev{transform:rotate(180deg)}
.drop-menu{
  position:absolute; top:100%; inset-inline-start:0; min-width:220px; padding:8px;
  background:var(--card-bg); border:1px solid var(--border); border-top:2px solid var(--gold);
  box-shadow:0 14px 30px rgba(34,34,34,.08); display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu{opacity:1; visibility:visible; transform:none}
.drop-menu a{color:var(--fg); text-decoration:none; padding:10px 12px; font-size:.92rem; border-radius:2px}
.drop-menu a:hover{background:var(--off); color:var(--olive)}
.drop-menu a.all{border-top:1px solid var(--border); margin-top:4px; padding-top:12px; font-weight:700; color:var(--gold)}
.utility{display:flex; align-items:center; gap:18px; flex:none}
.lang-link{font-size:.88rem; font-weight:500; color:var(--fg); text-decoration:none; opacity:.8; direction:ltr; padding:8px 2px; border-bottom:1px solid transparent}
.lang-link:hover{opacity:1; border-bottom-color:var(--gold)}
.utility .btn{padding:8px 16px; min-height:38px; font-size:.85rem}
.menu-btn{display:none; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:1px solid var(--border); border-radius:2px; color:var(--fg); cursor:pointer}
.menu-btn svg{width:20px; height:20px}
.mobile-nav{display:none; border-top:1px solid var(--border); background:var(--off)}
header.site.open .mobile-nav{display:block}
.mobile-nav .wrap{display:flex; flex-direction:column; padding-block:8px 16px}
.mobile-nav a, .mobile-nav summary{color:var(--fg); text-decoration:none; padding:13px 0; border-bottom:1px solid var(--border); font-size:1rem; font-weight:500; cursor:pointer; min-height:44px}
.mobile-nav summary{list-style:none; display:flex; justify-content:space-between; align-items:center}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav details[open] .chev{transform:rotate(180deg)}
.mobile-nav .chev{width:12px; height:12px; transition:transform .2s ease}
.mobile-nav .sub{display:flex; flex-direction:column; padding-inline-start:16px}
.mobile-nav .sub a{font-size:.94rem; opacity:.85}
.mobile-nav .sub a.all{color:var(--gold); font-weight:700; opacity:1}
.mobile-nav .m-lang{direction:ltr; text-align:right; border-bottom:none; opacity:.8}
@media (max-width:640px){ nav.primary{display:none} .menu-btn{display:inline-flex} }
@media (min-width:641px) and (max-width:940px){
  .nav-row{flex-wrap:wrap; row-gap:0; padding-bottom:0}
  nav.primary{order:3; width:100%; justify-content:center; border-top:1px solid var(--border); margin-top:12px; padding-block:2px}
}
@media (max-width:1040px){ .nav-row{gap:12px} .utility{gap:12px} .brand img{height:30px} }
@media (max-width:560px){ .utility .lang-link, .utility .btn{display:none} .brand img{height:30px} }

/* ---------- hero slider ---------- */
.hero{position:relative; overflow:hidden; background:#ECE8E2}
.slides{position:relative; height:clamp(460px,62vw,600px)}
@media (max-width:760px){ .slides{height:760px} }
.slide{
  position:absolute; inset:0; opacity:0; transition:opacity .9s ease;
  background:var(--slide-bg,#ECE8E2); color:var(--ink);
}
.slide.active{opacity:1; z-index:1}
.slide-inner{height:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:40px; padding-block:40px 64px; padding-inline:clamp(20px,7vw,80px)}
.slide-media{display:flex; justify-content:center; align-items:center; height:100%; min-height:0; padding-block:12px}
.slide-media img{
  width:auto; height:100%; max-height:470px; aspect-ratio:4/5; object-fit:cover;
  border-radius:240px 240px 6px 6px;
  box-shadow:0 0 0 9px rgba(255,255,255,.4), 0 0 0 10px rgba(178,141,74,.35), 0 24px 44px -26px rgba(60,45,20,.4);
}
.slide-content{position:relative; z-index:2; max-width:500px}
.slide-content .eyebrow{color:#8A6A30; white-space:nowrap}
.slide-content h2{font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1.35; margin-block:12px 8px; color:var(--ink)}
.slide-content .en{color:#5a5347; font-size:1.1rem; margin-bottom:24px}
.slide-content .btn{background:var(--gold); color:#fff}
.slide-content .btn:hover{background:#9A7638}
@media (max-width:760px){
  .hero-arrows{display:none}
  .slide-inner{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); gap:8px; padding-block:24px 56px; text-align:center}
  .slide-media{order:-1}
  .slide-media img{max-height:360px; height:auto; width:min(100%,360px)}
  .slide-content{margin-inline:auto}
}
.advisory-pill{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.6);
  border:1px solid rgba(34,34,34,.18); color:var(--ink); font-size:.78rem; font-weight:500;
  padding:7px 14px; border-radius:999px; margin-top:16px;
}
.hero-arrows{position:absolute; inset-inline:0; top:50%; transform:translateY(-50%); display:flex; justify-content:space-between; padding-inline:14px; z-index:3; pointer-events:none}
.hero-arrows button{pointer-events:auto; background:rgba(255,255,255,.55); border:1px solid rgba(34,34,34,.2); color:var(--ink); width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center}
.hero-dots{position:absolute; bottom:22px; inset-inline:0; display:flex; justify-content:center; gap:8px; z-index:3}
.hero-dots button{width:8px; height:8px; border-radius:50%; background:rgba(34,34,34,.25); border:none; cursor:pointer; padding:0}
.hero-dots button.active{background:var(--gold); width:22px; border-radius:5px}

/* ---------- credibility strip ---------- */
.cred{background:var(--sand); color:var(--ink)}
.cred-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-block:26px}
@media (max-width:760px){ .cred-row{grid-template-columns:repeat(3,1fr); gap:12px} }
.cred-item{display:flex; align-items:center; gap:12px; justify-content:center; text-align:center; flex-direction:column; font-size:.85rem; font-weight:700}
.cred-item .ic{color:var(--olive); width:30px; height:30px}

/* ---------- section headers ---------- */
.sec-head{max-width:640px; margin-inline:auto; text-align:center; margin-bottom:40px}
.sec-head h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.sec-head .en{margin-top:8px; color:var(--gold); font-size:1.05rem}
.sec-head p.sub{margin-top:14px; opacity:.8}

/* ---------- choose your path ---------- */
.paths{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width:760px){ .paths{grid-template-columns:1fr} }
.ing-strip{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:36px 24px; max-width:1100px; margin:0 auto 64px}
@media (max-width:900px){ .ing-strip{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:520px){ .ing-strip{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 16px} }
.ing-ph{width:100%; aspect-ratio:1/1; border-radius:4px; display:flex; align-items:center; justify-content:center; padding:10px; text-align:center; background:repeating-linear-gradient(135deg,#EFE9DD 0 10px,#E8E0D0 10px 20px); box-shadow:0 0 0 7px rgba(255,255,255,.7), 0 0 0 8px rgba(178,141,74,.35)}
.ing-ph span{font:500 .72rem/1.4 ui-monospace,Menlo,monospace; color:#6b604c; direction:ltr}
.ing-latin{display:block; direction:ltr; font-size:.78rem; color:#6b604c; margin-top:2px}
.ing{margin:0; text-align:center}
.ing img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:4px; box-shadow:0 0 0 7px rgba(255,255,255,.7), 0 0 0 8px rgba(178,141,74,.35), 0 20px 36px -24px rgba(60,45,20,.4)}
.ing-name{margin-top:18px; font-weight:700; font-size:.95rem; line-height:1.5; color:var(--olive)}
.path-card{transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease}
.path-card:hover{transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(60,45,20,.45); border-color:rgba(178,141,74,.55)}
.path-card .path-top{display:flex; align-items:center; gap:18px; padding:30px 28px; position:relative; overflow:hidden}
.path-top::after{content:""; position:absolute; inset-inline:0; bottom:0; height:3px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.path-card:hover .path-top::after{transform:scaleX(1)}
.path-ic{flex:none; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid currentColor; transition:background .45s ease, color .45s ease, border-color .45s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.path-ic svg{width:28px; height:28px; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.path-top.comfort .path-ic{color:#E9D9B6; border-color:rgba(233,217,182,.5)}
.path-top.renewal .path-ic{color:var(--gold); border-color:rgba(178,141,74,.5)}
.path-card:hover .path-ic{background:var(--gold); color:#fff; border-color:var(--gold); transform:scale(1.08)}
.path-card:hover .path-ic svg{transform:rotate(-12deg)}
.path-card .path-top.renewal{border-bottom:1px solid var(--border)}
.path-card .btn{transition:background .3s ease, transform .3s ease}
.path-card:hover .btn{transform:translateX(-4px)}
@media (prefers-reduced-motion:reduce){ .path-card,.path-ic,.path-ic svg,.path-top::after,.path-card .btn{transition:none} .path-card:hover,.path-card:hover .path-ic,.path-card:hover .path-ic svg,.path-card:hover .btn{transform:none} }
.path-card{border-radius:4px; overflow:hidden; border:1px solid var(--border); background:var(--card-bg); display:flex; flex-direction:column}
.path-top{padding:22px 24px; color:#fff}
.path-top.comfort{background:var(--plum)}
.path-top.renewal{background:linear-gradient(180deg,#fff,#fff); color:var(--ink); border-bottom:4px solid var(--gold)}
.path-body{padding:26px 24px; display:flex; flex-direction:column; gap:14px; flex:1}
.path-body h3{font-size:1.3rem}
.tier-tag{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; opacity:.85; direction:ltr; display:block}

/* ---------- product sections ---------- */
.prod-sec{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start}
@media (max-width:820px){ .prod-sec{grid-template-columns:1fr} }
@media (min-width:821px){ .prod-sec-rev > img{order:2} }
.prod-sec img{border-radius:4px; width:100%; aspect-ratio:4/5; object-fit:cover}
.claim-box{border-right:3px solid var(--gold); padding:10px 22px; font-size:1.15rem; font-weight:500; margin-block:16px}
:root[dir] .claim-box{border-right:3px solid var(--gold); border-left:none}
.ingredient-list{display:grid; gap:14px; margin-block:18px}
.ingredient-item{display:flex; gap:12px; align-items:flex-start}
.ingredient-item .ic{color:var(--olive); margin-top:2px}
.ingredient-item b{display:block; font-size:.98rem}
.ingredient-item span{opacity:.82; font-size:.92rem}
.who{font-size:.9rem; opacity:.75; margin-top:6px}
.cta-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:20px}
.advisory-box{background:var(--sand); border:1px solid var(--border); border-radius:4px; padding:16px 18px; font-size:.92rem; font-weight:600; margin-block:18px; display:flex; gap:10px}
.advisory-box .ic{color:var(--olive); flex:none; margin-top:2px}
.accordion summary{cursor:pointer; font-weight:700; color:var(--gold); list-style:none; margin-top:10px}
.accordion summary::-webkit-details-marker{display:none}
.accordion[open] summary{margin-bottom:8px}
.accordion .panel{font-size:.88rem; opacity:.85; line-height:1.9}

.renewal-block{margin-bottom:56px}
.renewal-block:last-child{margin-bottom:0}
.renewal-serum{background:#EFE6D6; box-shadow:0 0 0 100vmax #EFE6D6; clip-path:inset(0 -100vmax); padding-block:72px}
section:has(.renewal-serum:last-child){padding-bottom:0}
.renewal-divider{height:1px; background:var(--border); margin-block:56px}

/* science cards */
.science-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:900px){ .science-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .science-grid{grid-template-columns:1fr} }
.sci-card{background:var(--card-bg); border:1px solid var(--border); border-radius:4px; padding:22px; display:flex; flex-direction:column; gap:10px; min-height:100%}
.sci-card .num{font-family:var(--f-display); font-size:1.6rem; color:var(--gold); direction:ltr}
.sci-card p{font-size:.92rem; opacity:.88}
.sci-card.source{background:var(--olive); color:#F7F6F2; border-color:var(--olive)}
.sci-card.source p{opacity:.92}

/* nature banner */
.nature-banner{position:relative; border-radius:4px; overflow:hidden; min-height:260px; display:flex; align-items:center}
.nature-banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.6)}
.nature-banner .content{position:relative; z-index:2; color:#fff; padding:40px; max-width:520px}
.nature-banner h3{color:#fff; font-size:1.6rem}

/* radiance protocol */
.protocol-tabs{display:flex; gap:10px; justify-content:center; margin-bottom:28px}
.protocol-tabs button{background:transparent; border:1px solid var(--border); border-radius:999px; padding:9px 20px; font-weight:700; font-size:.88rem; cursor:pointer; color:var(--fg)}
.protocol-tabs button.active{background:var(--olive); color:#fff; border-color:var(--olive)}
.routine{display:none}
.routine.active{display:block}
.steps{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; font-size:1.05rem; font-weight:700}
.steps .step{background:var(--card-bg); border:1px solid var(--border); border-radius:999px; padding:12px 20px}
.steps .arrow{color:var(--gold); font-size:1.2rem}
.time-label{text-align:center; font-weight:700; color:var(--gold); margin-bottom:10px; letter-spacing:.06em; font-size:.85rem; text-transform:uppercase; direction:ltr}
.routine-advisory{max-width:520px; margin:22px auto 0; text-align:center; font-size:.88rem; opacity:.8; border-top:1px solid var(--border); padding-top:14px}

/* blog */
.blog-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
@media (max-width:900px){ .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .blog-grid{grid-template-columns:1fr} }
.blog-card{display:flex; flex-direction:column; background:var(--card-bg); border:1px solid var(--border); border-radius:4px; overflow:hidden; color:var(--fg); text-decoration:none; transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease}
.blog-card:hover{transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(60,45,20,.45); border-color:rgba(178,141,74,.55)}
.blog-img{overflow:hidden}
.blog-img img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.blog-card:hover .blog-img img{transform:scale(1.05)}
.blog-body{padding:22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1}
.blog-meta{display:flex; gap:12px; align-items:center; font-size:.8rem; color:#6b604c}
.blog-tag{color:var(--gold); font-weight:700}
.blog-body h3{font-size:1.15rem; line-height:1.55; text-wrap:pretty}
.blog-body p{font-size:.92rem; opacity:.8; line-height:1.8}
.blog-more{margin-top:auto; color:var(--gold); font-weight:700; font-size:.9rem}
@media (prefers-reduced-motion:reduce){ .blog-card,.blog-img img{transition:none} .blog-card:hover,.blog-card:hover .blog-img img{transform:none} }
/* story */
.story{background:var(--olive); color:#F0ECDF; position:relative; overflow:hidden}
.story .wrap{position:relative; z-index:2; max-width:780px}
.story-mark{position:absolute; inset-inline-end:-40px; top:-30px; opacity:.08; width:340px; z-index:1}
.story h2{color:#fff; font-size:clamp(1.7rem,3.6vw,2.4rem)}
.story .locked-line{font-family:var(--f-display); font-style:italic; font-size:1.2rem; color:var(--sand); margin-top:10px; direction:ltr}
.story-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; margin-top:28px}
@media (max-width:760px){ .story-grid{grid-template-columns:1fr} }
.story-grid img{border-radius:4px; aspect-ratio:4/5; object-fit:cover}
.story p.body{opacity:.92; margin-top:16px}
.story .support{margin-top:16px; font-weight:700; color:var(--sand)}

/* newsletter */
.newsletter{background:var(--sand)}
.nl-row{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.nl-copy h3{font-size:1.25rem}
.nl-copy p{opacity:.8; margin-top:4px; font-size:.92rem}
.nl-form{display:flex; gap:10px; flex-wrap:wrap}
.nl-form input{
  border:1px solid var(--border); border-radius:2px; padding:12px 14px; font-family:inherit;
  min-height:44px; min-width:220px; background:var(--card-bg); color:var(--fg);
}
.nl-note{font-size:.8rem; opacity:.7; margin-top:10px; display:none}
.nl-note.show{display:block}

/* footer */
footer.site{background:var(--olive); color:#EFEAE0; padding-block:env(safe-area-inset-bottom,0px)}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:28px; padding-block:48px}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }
.foot-grid h4{font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sand); margin-bottom:14px; font-weight:700}
.foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.9rem}
.foot-grid ul a{color:#EFEAE0; text-decoration:none; opacity:.85}
.foot-grid ul a:hover{opacity:1}
.foot-logo img{height:32px; margin-bottom:12px}
.foot-grid p{font-size:.88rem; opacity:.8; line-height:1.8}
.contact-line{direction:ltr; text-align:right; unicode-bidi:isolate; display:inline-block}
.compliance{border-top:1px solid rgba(255,255,255,.15)}
.compliance .wrap{display:flex; flex-wrap:wrap; gap:14px 24px; padding-block:18px; font-size:.8rem; opacity:.82; align-items:center}
.compliance a{color:#EFEAE0; text-decoration:underline; text-underline-offset:3px}
.compliance .legal{margin-inline-start:auto; direction:ltr}
@media (max-width:640px){ .compliance .legal{margin-inline-start:0; width:100%} }