/*
Theme Name: Rasan Rose Ladies Salon
Author: Rasan Rose Ladies Salon
Description: A premium, responsive salon theme for Rasan Rose Ladies Salon in Dubai.
Version: 2.0.0
Text Domain: rasan-theme
*/
:root {
  --ivory:#fbf7f3; --blush:#f1dfdd; --rose:#c17883; --rose-dark:#8e273d;
  --wine:#451522; --wine-deep:#260d18; --champagne:#d6ae82; --ink:#24151a;
  --muted:#77666a; --line:rgba(69,21,34,.16); --serif:Georgia,"Times New Roman",serif;
  --sans:Arial,Helvetica,sans-serif; --script:"Brush Script MT","Segoe Script",cursive;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ivory); color:var(--ink); font-family:var(--sans); line-height:1.65; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.container { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@keyframes rasan-fade-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes rasan-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes rasan-logo-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes rasan-drop-down { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:translateY(0); } }
.eyebrow { display:inline-block; color:var(--rose-dark); font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.section-intro { max-width:560px; margin-bottom:45px; }
.section-intro--center { margin-left:auto; margin-right:auto; text-align:center; }
.section-intro h2,.about-copy h2,.promise-section h2,.contact-copy h2,.map-copy h2 { margin:12px 0 16px; font:500 clamp(2.7rem,6vw,5rem)/.94 var(--serif); letter-spacing:-.045em; }
.section-intro h2 { color:var(--wine); }
.section-intro p,.about-copy p,.map-copy p { color:var(--muted); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:13px 22px; border:1px solid var(--wine); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; transition:background .25s ease,color .25s ease,transform .25s ease; }
.button:hover,.button:focus-visible { background:var(--wine); color:var(--ivory); transform:translateY(-2px); }
.button--primary { border-color:var(--rose-dark); background:var(--rose-dark); color:#fff; }
.button--primary:hover,.button--primary:focus-visible { background:var(--wine-deep); border-color:var(--wine-deep); }
.button--light { border-color:#f8e9e5; color:#fff; }
.button--light:hover,.button--light:focus-visible { background:#f8e9e5; color:var(--wine); }
.button--outline { border-color:var(--rose-dark); color:var(--rose-dark); }
.button--outline:hover,.button--outline:focus-visible { background:var(--rose-dark); }
.text-link { display:inline-flex; gap:10px; margin-top:35px; color:var(--rose-dark); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.text-link:hover { color:var(--wine); }
.text-link--light { color:#edc8c7; }

.utility-bar { background:var(--wine-deep); color:#f3dfe0; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; }
.utility-inner { display:flex; align-items:center; justify-content:space-between; min-height:35px; gap:15px; }
.utility-links { display:flex; gap:20px; }
.utility-links a:hover { color:var(--champagne); }
.site-header { position:relative; z-index:10; background:var(--wine); color:#fff6f1; border-bottom:1px solid #a16b7955; animation:rasan-drop-down .55s ease both; }
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:94px; gap:20px; }
.brand-logo { display:flex; align-items:center; width:115px; height:82px; }
.brand-logo img { width:100%; max-height:82px; height:auto; object-fit:contain; }
.brand-logo { animation:rasan-logo-in .55s ease both; }
.menu-toggle { display:block; border:0; background:transparent; color:#fff6f1; font-size:1.5rem; cursor:pointer; }
.site-nav { display:none; position:absolute; top:94px; left:20px; right:20px; z-index:11; padding:20px; background:var(--wine); color:#fff6f1; box-shadow:0 18px 35px #260d1826; }
.site-nav.is-open { display:grid; gap:4px; }
.site-nav a { padding:11px 8px; font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.site-nav a:hover,.site-nav a:focus-visible { color:var(--champagne); }
.site-nav .nav-book { margin-top:8px; background:var(--rose); color:#fff; text-align:center; }
.site-nav a { position:relative; }
.site-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:3px; height:1px; background:var(--champagne); transition:right .25s ease; }
.site-nav a:hover::after,.site-nav a:focus-visible::after { right:0; }
.site-nav > a,.site-nav li { animation:rasan-fade-up .45s ease both; }
.site-nav > a:nth-last-child(1) { animation-delay:.22s; }

.hero { position:relative; min-height:690px; display:flex; align-items:center; overflow:hidden; background:var(--wine-deep); color:#fff; }
.hero-visual { position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(90deg,#260d18 0%,#260d18e8 34%,#260d1860 67%,#260d1840 100%),url('assets/images/hero-editorial.webp') center/cover; opacity:.98; }
.hero-visual { animation:rasan-fade-in .9s ease both; }
.hero-content { position:relative; z-index:1; padding:90px 0; }
.hero-copy { max-width:650px; }
.hero-copy:before { content:"صالون رسن روز للسيدات"; display:block; margin-bottom:10px; color:#edc8c7; font-size:.88rem; letter-spacing:.08em; }
.hero .eyebrow { color:#edc8c7; }
.hero h1 { max-width:590px; margin:17px 0 22px; font:500 clamp(3.5rem,9vw,7.4rem)/.83 var(--serif); letter-spacing:-.05em; }
.hero h1 em { display:block; color:#d88591; font:normal clamp(3.7rem,10vw,8rem)/.8 var(--script); letter-spacing:-.04em; }
.hero p { max-width:450px; color:#f4dede; font-size:1.03rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-copy:before,.hero-copy .eyebrow { animation:rasan-fade-up .55s ease .12s both; }
.hero-copy h1 { animation:rasan-fade-up .65s ease .2s both; }
.hero-copy p { animation:rasan-fade-up .55s ease .32s both; }
.hero-actions { animation:rasan-fade-up .55s ease .42s both; }
.hero-caption { position:absolute; right:25px; bottom:55px; z-index:1; pointer-events:none; color:#e8c0c0; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; writing-mode:vertical-rl; }

section { padding:92px 0; }
.services-section { display:none; }
.services-grid { display:grid; gap:12px; }
.service-card { position:relative; min-height:320px; overflow:hidden; border:1px solid var(--line); background:#fffaf7; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.service-card:hover { border-color:#c8898d; box-shadow:0 15px 30px #45152212; transform:translateY(-4px); }
.service-card-image { width:100%; height:105px; object-fit:cover; }
.service-card-content { position:relative; padding:20px 28px 25px; }
.service-icon { display:flex; align-items:center; justify-content:center; width:43px; height:43px; margin-bottom:17px; border:1px solid #dbb1ae; border-radius:50%; color:var(--rose-dark); font-size:1.35rem; }
.service-card h3 { margin:0 0 9px; color:var(--wine); font:600 1.5rem var(--serif); }
.service-card p { max-width:230px; margin:0; color:var(--muted); font-size:.86rem; }
.service-card > .service-card-content > a { position:absolute; right:25px; bottom:20px; color:var(--rose-dark); font-size:1.1rem; }

.about-section { background:var(--blush); }
.about-grid,.promise-grid,.contact-grid,.map-grid { display:grid; gap:45px; align-items:center; }
.about-visual { min-height:480px; display:flex; align-items:end; justify-content:center; padding:35px; background:linear-gradient(145deg,#c1878b44,#6f263d44),url('assets/images/rasan-rose.webp') center/cover; color:#ffe6e1; text-align:center; }
.about-copy { max-width:530px; }
.about-copy h2 { color:var(--wine); }
.about-copy .button { margin-top:20px; }

.work-section { background:var(--wine); color:#fff; }
.work-section .section-intro h2 { color:#fff; }
.work-section .section-intro p { color:#e8ccce; }
.work-section .eyebrow { color:#e3b5af; }
.gallery-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.filter-button { border:1px solid #a9767f; background:transparent; color:#f7dfe0; padding:8px 13px; cursor:pointer; font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.filter-button:hover,.filter-button:focus-visible,.filter-button.is-active { background:var(--rose); border-color:var(--rose); color:#fff; }
.gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.gallery-item { position:relative; min-height:190px; margin:0; overflow:hidden; background:#6c3242; }
.gallery-item--large { grid-row:span 2; min-height:388px; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-item:hover img { transform:scale(1.04); }
.gallery-item figcaption { position:absolute; left:12px; bottom:10px; color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; text-shadow:0 2px 8px #000; }
.gallery-item.is-hidden { display:none; }

.promise-section { position:relative; overflow:hidden; background:#f8e9e5; }
.promise-section::before { content:none; }
.promise-section > .container { position:relative; z-index:1; }
.promise-section h2 { color:var(--wine); }
.promise-copy { max-width:390px; }
.promise-copy p { max-width:330px; color:var(--muted); }
.promise-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.promise-stats div { min-height:160px; display:flex; flex-direction:column; justify-content:center; padding:24px 20px; border-right:1px solid var(--line); }
.promise-stats div:last-child { border-right:0; }
.promise-stats strong { color:var(--wine); font:500 clamp(1.3rem,2.3vw,2rem) var(--serif); }
.promise-stats span { margin-top:7px; color:var(--muted); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; }

.reviews-section { background:linear-gradient(rgba(251,247,243,.72),rgba(251,247,243,.72)),url('assets/images/client-background.webp') center/cover; }
.reviews-layout { display:grid; gap:42px; align-items:center; }
.reviews-intro { max-width:360px; }
.reviews-intro h2 { margin:12px 0 16px; color:var(--wine); font:500 clamp(3rem,6vw,5rem)/.94 var(--serif); letter-spacing:-.045em; }
.reviews-intro p { color:var(--muted); }
.reviews-carousel { min-width:0; }
.reviews-viewport { overflow:hidden; }
.reviews-track { display:flex; gap:14px; transform:translate3d(0,0,0); transition:transform .55s ease; }
.review-slide { flex:0 0 100%; min-width:0; }
.review-card { height:100%; min-height:205px; padding:28px; border:1px solid rgba(69,21,34,.13); border-radius:3px; background:rgba(255,250,247,.9); box-shadow:0 14px 35px rgba(69,21,34,.08); }
.review-card { transition:transform .3s ease,box-shadow .3s ease; }
.review-card:hover { transform:translateY(-4px); box-shadow:0 18px 38px rgba(69,21,34,.12); }
.review-stars { color:var(--champagne); letter-spacing:.18em; }
.review-card p { min-height:65px; color:var(--muted); font:italic 1.05rem/1.45 var(--serif); }
.review-author { color:var(--rose-dark); font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.reviews-controls { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:20px; }
.review-control { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--rose-dark); border-radius:50%; background:transparent; color:var(--rose-dark); cursor:pointer; }
.review-control:hover,.review-control:focus-visible { background:var(--rose-dark); color:#fff; }
.review-dots { display:flex; gap:7px; }
.review-dot { width:7px; height:7px; padding:0; border:1px solid var(--rose-dark); border-radius:50%; background:transparent; cursor:pointer; }
.review-dot.is-active { background:var(--rose-dark); }

.contact-section { background:var(--wine); color:#fff; }
.contact-copy h2 { color:#fff; }
.contact-copy p { max-width:430px; color:#e8ccce; }
.contact-section .eyebrow { color:#e3b5af; }
.contact-details { display:grid; gap:20px; }
.contact-details > div { display:flex; flex-direction:column; gap:3px; padding-bottom:16px; border-bottom:1px solid #a16b7955; }
.contact-details a:hover { color:var(--champagne); }
.detail-label { color:#db9da5; font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.contact-details a,.contact-details span:not(.detail-label) { color:#fff3ef; font-size:.9rem; }
.contact-details a:last-child { color:#e5b6b4; }

.map-section { padding-top:0; background:var(--wine); color:#fff; }
.map-grid { align-items:stretch; }
.map-copy { padding:60px 0; }
.map-copy h2 { color:#fff; }
.map-copy p { color:#e6ccce; }
.map-copy .eyebrow { color:#e3b5af; }
.map-frame { min-height:390px; overflow:hidden; background:#5b2c3c; }
.map-frame iframe { width:100%; height:100%; min-height:390px; border:0; filter:saturate(.65) sepia(.12); }

.floating-whatsapp { position:fixed; right:18px; bottom:18px; z-index:20; display:flex; align-items:center; gap:7px; padding:12px 16px; border-radius:30px; background:#248b67; color:#fff; box-shadow:0 8px 24px #0003; font-size:1rem; }
.floating-whatsapp span { font-size:.67rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.floating-whatsapp:hover,.floating-whatsapp:focus-visible { background:#176c50; }
.site-footer { padding:70px 0 0; background:var(--wine-deep); color:#e8d4d3; }
.footer-grid { display:grid; gap:35px; }
.footer-brand img { width:165px; height:auto; margin:0 0 15px; }
.footer-brand p { max-width:250px; color:#cfaeb3; font-size:.84rem; }
.footer-social { color:#e4b5ae; font-size:.72rem; }
.footer-grid h3 { margin:0 0 15px; color:#fff1ed; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; }
.footer-grid > div:not(.footer-brand) { display:flex; flex-direction:column; gap:8px; }
.footer-grid a,.footer-grid span { color:#cfaeb3; font-size:.8rem; }
.contact-details a,.footer-grid a { overflow-wrap:anywhere; }
.footer-grid a:hover { color:var(--champagne); }
.footer-bottom { display:flex; justify-content:space-between; gap:15px; margin-top:55px; padding:20px 0; border-top:1px solid #a16b7945; color:#af8f95; font-size:.7rem; }
.footer-bottom a { color:#e4b5ae; }
html.has-js .reveal-on-scroll { opacity:0; transform:translateY(16px); transition:opacity .6s ease,transform .6s ease; transition-delay:var(--reveal-delay,0ms); }
html.has-js .reveal-on-scroll.is-visible { opacity:1; transform:none; }

@media (min-width:700px) {
  .container { width:min(1180px,calc(100% - 80px)); }
  .menu-toggle { display:none; }
  .site-nav { position:static; display:flex; align-items:center; gap:22px; padding:0; background:transparent; color:#fff6f1; box-shadow:none; }
  .site-nav a { padding:8px 0; font-size:.67rem; }
  .site-nav a:hover,.site-nav a:focus-visible { color:var(--champagne); }
  .site-nav .nav-book { margin:0; padding:12px 17px; background:var(--rose-dark); color:#fff; }
  .about-grid,.promise-grid,.contact-grid,.map-grid { grid-template-columns:1fr 1fr; }
  .promise-grid { gap:60px; }
  .about-copy { padding-right:45px; }
  .reviews-layout { grid-template-columns:.72fr 1.8fr; }
  .review-slide { flex-basis:calc((100% - 28px) / 3); }
  .footer-grid { grid-template-columns:1.4fr .8fr .9fr 1.2fr; }
}
@media (min-width:900px) {
  .hero-visual { background-position:center 25%; }
}
@media (min-width:1050px) {
  .brand-logo { width:145px; height:88px; }
  .brand-logo img { max-height:88px; }
  section { padding:125px 0; }
  .hero { min-height:780px; }
  .hero-content { padding-top:120px; padding-bottom:100px; }
  .about-visual { min-height:580px; }
  .gallery-grid { grid-template-columns:1.2fr .9fr .9fr; grid-template-rows:260px 260px; }
  .gallery-item--large { min-height:auto; }
  .map-copy { padding:80px 65px 80px 0; }
}
@media (max-width:899px) {
  .promise-grid,.reviews-layout { grid-template-columns:1fr; gap:38px; }
  .promise-copy,.reviews-intro { max-width:520px; }
  .review-slide { flex-basis:100%; }
}
@media (max-width:560px) {
  .hero-visual { background-image:linear-gradient(90deg,#260d18 0%,#260d18e8 34%,#260d1860 67%,#260d1840 100%),url('assets/images/hero-editorial-mobile.webp'); }
  .utility-inner { justify-content:center; flex-wrap:wrap; padding:7px 0; line-height:1.3; }
  .utility-inner > span { display:none; }
  .utility-links { justify-content:center; flex-wrap:wrap; gap:5px 12px; font-size:.56rem; }
  .brand-logo { width:100px; height:70px; }
  .brand-logo img { max-height:70px; }
  .hero { min-height:620px; }
  .hero-content { padding:72px 0 70px; }
  .hero h1 { font-size:clamp(2.8rem,13vw,4.4rem); line-height:.86; }
  .hero h1 em { font-size:clamp(3rem,14vw,4.8rem); }
  .hero p { max-width:34rem; font-size:.94rem; }
  .hero-actions { align-items:stretch; }
  .hero-actions .button { width:100%; }
  .hero-caption { display:none; }
  .menu-toggle { width:44px; height:44px; display:grid; place-items:center; }
  .site-nav a { min-height:44px; display:flex; align-items:center; }
  section { padding:72px 0; }
  .section-intro { margin-bottom:32px; }
  .section-intro h2,.about-copy h2,.promise-section h2,.contact-copy h2,.map-copy h2 { font-size:clamp(2.35rem,11vw,3.6rem); }
  .service-card { min-height:0; padding:0; }
  .service-card-image { height:100px; }
  .service-card-content { min-height:190px; padding:18px 22px 24px; }
  .service-card > .service-card-content > a { right:18px; bottom:16px; min-width:44px; min-height:44px; display:grid; place-items:center; }
  .gallery-item { min-height:170px; }
  .gallery-item--large { min-height:300px; }
  .filter-button { min-height:42px; padding:9px 12px; }
  .about-visual { min-height:330px; }
  .promise-grid,.contact-grid { gap:28px; }
  .promise-stats { grid-template-columns:1fr; }
  .promise-stats div { min-height:100px; border-right:0; border-bottom:1px solid var(--line); }
  .promise-stats div:last-child { border-bottom:0; }
  .map-copy { padding:44px 0; }
  .map-frame,.map-frame iframe { min-height:310px; }
  .floating-whatsapp { right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); padding:11px 14px; }
  .promise-stats strong { font-size:1.05rem; }
  .promise-stats span { font-size:.52rem; }
  .footer-bottom { flex-direction:column; }
}
@media (max-width:380px) {
  .container { width:calc(100% - 32px); }
  .utility-links { gap:4px 9px; font-size:.53rem; }
  .header-inner { min-height:82px; }
  .site-nav { top:82px; left:16px; right:16px; max-height:calc(100vh - 100px); overflow-y:auto; }
  .site-nav a { min-height:44px; display:flex; align-items:center; }
  .brand-logo { width:96px; height:66px; }
  .brand-logo img { max-height:66px; }
  .hero { min-height:590px; }
  .hero h1 { font-size:clamp(2.55rem,13vw,3.7rem); }
  .hero h1 em { font-size:clamp(2.8rem,14vw,4rem); }
  .promise-stats { grid-template-columns:1fr; }
  .promise-stats div { min-height:92px; border-right:0; border-bottom:1px solid var(--line); }
  .promise-stats div:last-child { border-bottom:0; }
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-item,.gallery-item--large { min-height:250px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reviews-track,.button,.service-card,.gallery-item img,.review-card,.site-nav a { transition:none; }
  .site-header,.brand-logo,.hero-visual,.hero-copy:before,.hero-copy .eyebrow,.hero-copy h1,.hero-copy p,.hero-actions,.site-nav > a,.site-nav li { animation:none; }
  html.has-js .reveal-on-scroll { opacity:1; transform:none; transition:none; }
}
