*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased} :root{ --gold:#C9A84C; --gold-light:#E2C575; --gold-deep:#8A6E28; --sage:#7BA08A; --sage-light:#A3C4B0; --sage-deep:#4A7260; --ivory:#F5F2EC; --cream:#E8E0D0; --bg:#070808; --bg2:#0B0C0B; --bg3:#101210; --bg4:#181A18; --line:rgba(201,168,76,0.13); --line-bright:rgba(201,168,76,0.35); --line-sage:rgba(123,160,138,0.22); --muted:rgba(245,242,236,0.38); --soft:rgba(245,242,236,0.68); --text:#F5F2EC; --overlay:rgba(7,8,8,.92); --sans:'Alexandria',sans-serif; --serif:'Cormorant Garamond',serif; } /* ============================================ LIGHT THEME - Day Mode Activated when [data-theme="light"] is on or ============================================ */ [data-theme="light"]{ --gold:#A07F1C; --gold-light:#C9A84C; --gold-deep:#6F5612; --sage:#5B8473; --sage-light:#7BA08A; --sage-deep:#3D5C4F; --ivory:#1A1814; --cream:#2A2620; --bg:#FAF6EE; --bg2:#F2EDE2; --bg3:#EBE5D6; --bg4:#DDD4C0; --line:rgba(160,127,28,0.18); --line-bright:rgba(160,127,28,0.45); --line-sage:rgba(91,132,115,0.25); --muted:rgba(26,24,20,0.45); --soft:rgba(26,24,20,0.72); --text:#1A1814; --overlay:rgba(250,246,238,.92); } [data-theme="light"] body{background:var(--bg);color:var(--text)} [data-theme="light"] ::selection{background:var(--gold);color:#fff} /* Theme toggle button - icon visibility */ .theme-toggle{ position:relative; width:34px; height:34px; border:1px solid rgba(201,168,76,.35); background:transparent; cursor:none; display:inline-flex; align-items:center; justify-content:center; margin:0 .25rem; transition:all .3s; color:var(--gold); } .theme-toggle:hover{ background:rgba(201,168,76,.08); border-color:var(--gold); } .theme-toggle .theme-icon{ position:absolute; transition:opacity .35s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1); } .theme-toggle[data-theme="dark"] .theme-icon-sun{opacity:0;transform:rotate(-90deg) scale(.5)} .theme-toggle[data-theme="dark"] .theme-icon-moon{opacity:1;transform:rotate(0) scale(1)} .theme-toggle[data-theme="light"] .theme-icon-sun{opacity:1;transform:rotate(0) scale(1)} .theme-toggle[data-theme="light"] .theme-icon-moon{opacity:0;transform:rotate(90deg) scale(.5)} /* Light theme overrides for specific elements */ [data-theme="light"] #cur{mix-blend-mode:multiply} [data-theme="light"] #loader{background:var(--bg)} [data-theme="light"] .hero-bg::after{background:linear-gradient(180deg,rgba(250,246,238,.3) 0%,rgba(250,246,238,.7) 60%,var(--bg) 100%)} [data-theme="light"] .hero-vignette{background:radial-gradient(ellipse at center,transparent 40%,rgba(250,246,238,.4))} [data-theme="light"] nav,[data-theme="light"] nav.scrolled{background:rgba(250,246,238,.85);border-bottom-color:var(--line)} [data-theme="light"] .lang-switcher{background:rgba(250,246,238,.7)} [data-theme="light"] .lang-btn{color:var(--soft)} [data-theme="light"] .nav-logo-name{color:var(--gold-deep)} [data-theme="light"] .vapor-text span{color:var(--gold-deep)} [data-theme="light"] .hero-tag{background:rgba(250,246,238,.6);color:var(--gold-deep);border-color:var(--line-bright)} [data-theme="light"] .hero-side{color:var(--muted)} [data-theme="light"] .vignette,[data-theme="light"] .hero-vignette{display:none} /* Service cards in light mode */ [data-theme="light"] .service-card, [data-theme="light"] .product-card, [data-theme="light"] .benefit-card, [data-theme="light"] .blog-card, [data-theme="light"] .ba-card{ background:#fff; border-color:var(--line); box-shadow:0 4px 24px rgba(160,127,28,.06); } [data-theme="light"] .service-card:hover, [data-theme="light"] .product-card:hover, [data-theme="light"] .benefit-card:hover, [data-theme="light"] .blog-card:hover{ background:#fff; border-color:var(--gold); box-shadow:0 12px 36px rgba(160,127,28,.12); } /* Cart panel light mode */ [data-theme="light"] .cart-drawer{background:#FAF6EE;border-left-color:var(--line)} [data-theme="light"] .cart-footer{background:#F2EDE2} [data-theme="light"] .aseel-toast{background:rgba(250,246,238,.98);border-color:var(--gold)} /* Footer light mode */ [data-theme="light"] footer{background:var(--bg2);border-top-color:var(--line)} /* Section backgrounds */ [data-theme="light"] section{background:var(--bg)} [data-theme="light"] .stats-section, [data-theme="light"] .about-section{background:var(--bg2)} [data-theme="light"] .testimonials, [data-theme="light"] .cta-section{background:var(--bg)} [data-theme="light"] .page-header{background:radial-gradient(ellipse at top,rgba(160,127,28,.05),transparent 60%)} /* Pre-built backgrounds */ [data-theme="light"] .orb{opacity:.3;filter:blur(60px)} /* Buttons in light mode */ [data-theme="light"] .btn-gold, [data-theme="light"] .book-btn{background:var(--gold-deep);color:#fff} [data-theme="light"] .btn-gold:hover, [data-theme="light"] .book-btn:hover{background:var(--gold)} [data-theme="light"] .btn-outline{border-color:var(--gold);color:var(--gold-deep)} /* Form/input in light mode */ [data-theme="light"] input,[data-theme="light"] textarea{background:#fff;color:var(--text);border-color:var(--line)} [data-theme="light"] code{background:#EBE5D6;color:var(--gold-deep)} [data-theme="light"] pre{background:#EBE5D6;border-color:var(--line)} [data-theme="light"] ::-webkit-scrollbar-track{background:var(--bg2)} [data-theme="light"] ::-webkit-scrollbar-thumb{background:var(--gold)} html{scroll-behavior:smooth;background:var(--bg);transition:background .5s ease} body{background:var(--bg);color:var(--text);font-family:var(--sans);direction:ltr;overflow-x:hidden;cursor:none;font-weight:300;letter-spacing:.01em;transition:background .5s ease,color .5s ease} ::-webkit-scrollbar{width:3px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:var(--gold-deep)} ::selection{background:var(--gold);color:var(--bg)} #cur{position:fixed;width:6px;height:6px;background:var(--gold);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s,height .25s;mix-blend-mode:difference} #cur-ring{position:fixed;width:34px;height:34px;border:1px solid rgba(201,168,76,.4);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:left .14s ease,top .14s ease,width .22s,height .22s,opacity .22s} .cur-hover #cur{width:0;height:0} .cur-hover #cur-ring{width:58px;height:58px;border-color:rgba(201,168,76,.85);background:rgba(201,168,76,.05)} @media(max-width:768px){#cur,#cur-ring{display:none}body{cursor:auto}} body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9990;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} #loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 1s ease,visibility 1s ease} #loader.hide{opacity:0;visibility:hidden;pointer-events:none} .loader-logo{width:160px;height:auto;animation:loaderFade 1s ease} .loader-sub{font-size:.62rem;letter-spacing:.5em;color:var(--muted);margin-top:1rem;text-transform:uppercase;animation:loaderFade 1.2s ease .15s both} .loader-bar-wrap{width:200px;height:1px;background:rgba(201,168,76,.12);margin-top:2.5rem;overflow:hidden} .loader-bar{width:0;height:100%;background:linear-gradient(to right,var(--gold),var(--sage));animation:loaderProg 2.2s cubic-bezier(.4,0,.2,1) forwards} @keyframes loaderFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes loaderProg{to{width:100%}} .lang-switcher{position:fixed;top:1.5rem;left:3.5rem;z-index:600;display:flex;gap:0;background:rgba(7,8,7,.6);backdrop-filter:blur(12px);border:1px solid var(--line)} .lang-btn{padding:.45rem .95rem;font-size:.6rem;letter-spacing:.2em;font-weight:600;text-transform:uppercase;background:transparent;border:none;color:var(--muted);cursor:none;transition:all .3s;font-family:var(--sans)} .lang-btn.active{background:var(--gold);color:var(--bg)} .lang-btn:not(:last-child){border-right:1px solid var(--line)} @media(max-width:1100px){.lang-switcher{left:1.8rem;top:auto;bottom:5.5rem}} nav{position:fixed;top:0;left:0;right:0;z-index:500;padding:1.3rem 3.5rem 1.3rem 8rem;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(7,8,7,.88),transparent);transition:background .5s,backdrop-filter .5s,padding .4s,border-color .4s;border-bottom:1px solid transparent} nav.scrolled{background:rgba(7,8,7,.82);backdrop-filter:blur(22px) saturate(140%);border-bottom-color:var(--line);padding:1rem 3.5rem 1rem 8rem} .nav-logo{display:flex;align-items:center;gap:.8rem;text-decoration:none} .nav-logo-img{height:48px;width:auto;object-fit:contain} .nav-logo-text{display:flex;flex-direction:column} .nav-logo-name{font-family:var(--serif);font-size:1.5rem;font-style:italic;font-weight:500;color:var(--gold);letter-spacing:.04em;line-height:1} .nav-logo-sub{font-family:var(--sans);font-size:.48rem;font-weight:400;letter-spacing:.38em;color:var(--sage-light);margin-top:3px;text-transform:uppercase} .nav-links{display:flex;gap:2.4rem;list-style:none} .nav-links a{color:var(--soft);text-decoration:none;font-size:.7rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;position:relative;transition:color .35s;padding:.3rem 0} .nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--gold);transition:width .4s cubic-bezier(.4,0,.2,1)} .nav-links a:hover{color:var(--gold)} .nav-links a:hover::after{width:100%} .nav-actions{display:flex;gap:.8rem;align-items:center} .nav-icon-btn{width:38px;height:38px;border:1px solid var(--line);background:transparent;color:var(--ivory);cursor:none;display:flex;align-items:center;justify-content:center;transition:all .35s;text-decoration:none} .nav-icon-btn:hover{border-color:var(--gold);color:var(--gold)} #hero{position:relative;height:100vh;min-height:720px;display:flex;align-items:center;justify-content:center;overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.26) saturate(.65) contrast(1.1);transform:scale(1.06)} .hero-vignette{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 80% 60% at 50% 50%,transparent 0%,rgba(7,8,7,.55) 75%,var(--bg) 100%),linear-gradient(180deg,rgba(7,8,7,.5) 0%,transparent 28%,transparent 68%,var(--bg) 100%)} .hero-content{position:relative;z-index:10;text-align:center;padding:0 1.5rem;max-width:1100px;width:100%;box-sizing:border-box} .hero-tag{display:inline-flex;align-items:center;gap:.7rem;border:1px solid var(--line-bright);padding:.4rem 1.4rem;font-size:.6rem;letter-spacing:.5em;font-weight:500;color:var(--gold);text-transform:uppercase;margin-bottom:2.5rem;backdrop-filter:blur(8px);background:rgba(201,168,76,.04);opacity:0;animation:fadeUp .9s ease .8s forwards} .hero-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(201,168,76,.6)}50%{opacity:.5;box-shadow:0 0 0 8px rgba(201,168,76,0)}} .vapor-stage{position:relative;height:clamp(110px,16vw,200px);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem} .vapor-text{position:absolute;font-family:var(--sans);font-size:clamp(1.8rem,5.5vw,5rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;display:flex;justify-content:center;align-items:center;width:100%;max-width:95vw;gap:.25em;flex-wrap:wrap;padding:0 1rem;box-sizing:border-box} .vapor-char{display:inline-block;color:var(--ivory);will-change:transform,opacity,filter;white-space:pre} .hero-sub-line{font-family:var(--serif);font-size:clamp(.95rem,1.5vw,1.3rem);font-style:italic;font-weight:300;color:var(--gold);letter-spacing:.05em;margin-bottom:.5rem;opacity:0;animation:fadeUp .9s ease 1.4s forwards} .hero-sub{font-size:clamp(.78rem,1.1vw,.92rem);font-weight:300;letter-spacing:.06em;color:var(--soft);max-width:520px;margin:0 auto 3rem;line-height:1.85;opacity:0;animation:fadeUp .9s ease 1.6s forwards} .hero-cta-group{display:flex;gap:1rem;justify-content:center;align-items:center;opacity:0;animation:fadeUp .9s ease 1.8s forwards;flex-wrap:wrap} .btn{position:relative;overflow:hidden;padding:1rem 2.4rem;font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;cursor:none;border:none;display:inline-flex;align-items:center;gap:.8rem;transition:transform .4s cubic-bezier(.4,0,.2,1);text-decoration:none} .btn:hover{transform:translateY(-3px)} .btn-fill{background:var(--gold);color:var(--bg)} .btn-fill::before{content:'';position:absolute;inset:0;background:var(--sage);transform:translateX(-101%);transition:transform .55s cubic-bezier(.4,0,.2,1)} .btn-fill:hover::before{transform:translateX(0)} .btn-fill span{position:relative;z-index:2} .btn-ghost{background:transparent;color:var(--ivory);border:1px solid var(--line-bright);transition:border-color .4s,color .4s,transform .4s} .btn-ghost:hover{border-color:var(--gold);color:var(--gold)} .btn-arrow{font-family:'Times New Roman',serif;font-size:1.1rem;transition:transform .35s} .btn:hover .btn-arrow{transform:translateX(4px)} .hero-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:.6rem;opacity:0;animation:fadeUp .9s ease 2.1s forwards} .hero-scroll-text{font-size:.55rem;letter-spacing:.45em;color:var(--muted);text-transform:uppercase} .hero-scroll-line{width:1px;height:50px;background:linear-gradient(to bottom,var(--gold) 0%,transparent 100%);position:relative;overflow:hidden} .hero-scroll-line::after{content:'';position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--ivory);animation:scrollLine 2.2s ease-in-out infinite} @keyframes scrollLine{0%{top:-50%}100%{top:100%}} @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} .hero-side{position:absolute;top:50%;transform:translateY(-50%);z-index:5;font-size:.6rem;letter-spacing:.4em;color:var(--muted);text-transform:uppercase;writing-mode:vertical-rl} .hero-side-r{right:2rem} .hero-side-l{left:2rem} .orb{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(201,168,76,.08) 0%,transparent 70%);animation:orbFloat 12s ease-in-out infinite alternate} @keyframes orbFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,-30px) scale(1.1)}} .marquee-wrap{background:var(--ivory);color:var(--bg);overflow:hidden;white-space:nowrap;position:relative;z-index:5} .marquee{display:inline-flex;animation:marquee 38s linear infinite;padding:1.3rem 0} .marquee-item{display:inline-flex;align-items:center;gap:2.5rem;font-size:.68rem;font-weight:700;letter-spacing:.42em;text-transform:uppercase;padding:0 2.5rem} .marquee-item::after{content:'✦';color:var(--gold);font-size:.9rem} @keyframes marquee{to{transform:translateX(-50%)}} .section-head{text-align:center;margin-bottom:5rem;padding:0 2rem} .section-tag{display:inline-block;font-size:.58rem;letter-spacing:.55em;font-weight:600;color:var(--gold);text-transform:uppercase;margin-bottom:1.2rem;position:relative;padding:0 2rem} .section-tag::before,.section-tag::after{content:'';position:absolute;top:50%;width:22px;height:1px;background:var(--line-bright)} .section-tag::before{left:-10px} .section-tag::after{right:-10px} .section-title{font-family:var(--sans);font-size:clamp(2rem,5.5vw,4.8rem);font-weight:200;letter-spacing:-.02em;line-height:1.05} .section-title em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold)} .section-title strong{font-weight:700} .section-sub{font-size:.86rem;color:var(--soft);font-weight:300;max-width:520px;margin:1.2rem auto 0;line-height:1.85} #services{padding:9rem 3.5rem 8rem;background:var(--bg)} .services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;max-width:1380px;margin:0 auto} .service-card{position:relative;overflow:hidden;background:var(--bg2);cursor:none} .service-img-wrap{position:relative;overflow:hidden;aspect-ratio:4/5} .service-img{width:100%;height:100%;object-fit:contain;object-position:center;position:relative;z-index:1;transition:transform .9s cubic-bezier(.4,0,.2,1)} .service-card:hover .service-img{transform:scale(1.04)} .service-img-overlay{display:none} .service-badge{position:absolute;top:1.1rem;left:1.1rem;z-index:2;background:var(--gold);color:var(--bg);font-size:.5rem;font-weight:700;letter-spacing:.3em;padding:.28rem .75rem;text-transform:uppercase} .service-body{padding:1.3rem 1.4rem 1.6rem;border:1px solid var(--line);border-top:none;transition:border-color .4s} .service-card:hover .service-body{border-color:var(--line-bright)} .service-cat{font-size:.5rem;letter-spacing:.45em;color:var(--sage-light);text-transform:uppercase;margin-bottom:.5rem} .service-name{font-family:var(--serif);font-size:1.3rem;font-weight:500;margin-bottom:.4rem;line-height:1.1} .service-desc{font-size:.74rem;color:var(--soft);font-weight:300;line-height:1.68;margin-bottom:1.2rem;min-height:2.5em} .service-foot{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;border-top:1px solid var(--line);gap:.5rem} .service-book{background:transparent;border:1px solid var(--line-bright);color:var(--gold);font-family:var(--sans);font-size:.56rem;font-weight:600;letter-spacing:.22em;padding:.55rem .95rem;text-transform:uppercase;cursor:none;transition:all .35s;text-decoration:none;white-space:nowrap} .service-card:hover .service-book{background:var(--gold);color:var(--bg);border-color:var(--gold)} .service-book.sage{border-color:var(--line-sage);color:var(--sage-light)} .service-card:hover .service-book.sage{background:var(--sage);color:var(--bg);border-color:var(--sage)} #beforeafter{padding:9rem 3.5rem;background:var(--bg2);border-top:1px solid var(--line)} .ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1300px;margin:0 auto} .ba-card{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--bg3);cursor:none} .ba-card:hover .ba-after{opacity:1} .ba-card:hover .ba-hover-hint{opacity:0} .ba-before,.ba-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s ease} .ba-before{object-fit:contain;padding:2.4rem;background:radial-gradient(ellipse at center,var(--bg3) 0%,var(--bg2) 100%)} .ba-after{opacity:0} .ba-label-before,.ba-label-after{position:absolute;z-index:3;font-size:.52rem;letter-spacing:.4em;font-weight:700;text-transform:uppercase;padding:.3rem .75rem;transition:opacity .4s} .ba-label-before{top:1rem;left:1rem;background:rgba(7,8,7,.65);color:var(--muted)} .ba-label-after{top:1rem;right:1rem;background:var(--gold);color:var(--bg);opacity:0} .ba-card:hover .ba-label-before{opacity:0} .ba-card:hover .ba-label-after{opacity:1} .ba-title{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:1.1rem 1.3rem;background:linear-gradient(to top,rgba(7,8,7,.9) 0%,transparent 100%);font-family:var(--serif);font-size:1.05rem;font-weight:500} .ba-hover-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;border:1px solid rgba(201,168,76,.45);padding:.4rem 1rem;font-size:.54rem;letter-spacing:.28em;color:var(--gold);background:rgba(7,8,7,.5);backdrop-filter:blur(8px);text-transform:uppercase;transition:opacity .4s;pointer-events:none} #about{padding:9rem 3.5rem;background:var(--bg);border-top:1px solid var(--line)} .story-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:6rem;align-items:center;max-width:1300px;margin:0 auto} .story-text{padding-left:1rem} .story-tag{font-size:.58rem;letter-spacing:.55em;font-weight:600;color:var(--gold);text-transform:uppercase;display:block;margin-bottom:1.5rem} .story-title{font-family:var(--sans);font-size:clamp(2rem,4.5vw,3.8rem);font-weight:200;line-height:1.08;letter-spacing:-.02em;margin-bottom:2rem} .story-title em{font-family:var(--serif);font-style:italic;color:var(--gold);font-weight:400} .story-body{font-size:.9rem;color:var(--soft);font-weight:300;line-height:1.95;margin-bottom:2.5rem;max-width:480px} .story-signature{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--gold);margin-bottom:.3rem} .story-signature-name{font-size:.58rem;letter-spacing:.35em;color:var(--muted);text-transform:uppercase;margin-bottom:3rem} .story-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)} .stat-block{padding:1.5rem 0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding-left:1.4rem} .stat-block:nth-child(2n){border-right:none;padding-left:0;padding-right:1.4rem;text-align:right} .stat-num{font-family:var(--serif);font-size:2.5rem;font-weight:500;color:var(--gold);line-height:1} .stat-num small{font-size:1.1rem;color:var(--soft)} .stat-lbl{font-size:.6rem;color:var(--muted);letter-spacing:.28em;margin-top:.5rem;text-transform:uppercase} .story-visual{position:relative;height:100%;min-height:560px} .story-img-1{position:absolute;width:78%;aspect-ratio:3/4;object-fit:cover;top:0;left:0;z-index:1;border:1px solid var(--line)} .story-img-2{position:absolute;width:50%;aspect-ratio:1/1;object-fit:cover;bottom:-2rem;right:-2rem;z-index:2;border:8px solid var(--bg);outline:1px solid var(--line)} .story-tape{position:absolute;top:18%;right:-3rem;z-index:3;background:var(--gold);color:var(--bg);font-family:var(--serif);font-style:italic;font-size:.82rem;padding:.4rem 1rem;font-weight:500} #stats{padding:7rem 3.5rem;background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:1200px;margin:0 auto} .stat-card{text-align:center;padding:2.5rem 1.5rem;border-left:1px solid var(--line)} .stat-card:first-child{border-left:none} .stat-card-ic{width:52px;height:52px;border:1px solid var(--line-bright);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.4rem;color:var(--gold);transition:transform .5s,border-color .4s} .stat-card:hover .stat-card-ic{transform:rotate(360deg);border-color:var(--gold)} .stat-card-ic svg{width:20px;height:20px;stroke-width:1.3} .stat-card-num{font-family:var(--serif);font-size:2.7rem;font-weight:500;color:var(--gold);line-height:1;margin-bottom:.5rem} .stat-card-lbl{font-size:.76rem;color:var(--ivory);font-weight:500;letter-spacing:.02em;margin-bottom:.3rem} .stat-card-desc{font-size:.64rem;color:var(--muted);letter-spacing:.18em;text-transform:uppercase} #shop{padding:9rem 3.5rem 8rem;background:var(--bg)} .products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.7rem;max-width:1380px;margin:0 auto} .product{position:relative;overflow:hidden;background:var(--bg2);cursor:none} .product-img-wrap{position:relative;overflow:hidden;aspect-ratio:1/1} .product-img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.4,0,.2,1),filter .6s;filter:brightness(.88) saturate(.92)} .product:hover .product-img{transform:scale(1.06);filter:brightness(1) saturate(1.08)} .product-img-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(7,8,7,.5) 100%);pointer-events:none} .product-badge{position:absolute;top:1.1rem;left:1.1rem;z-index:2;background:var(--gold);color:var(--bg);font-size:.5rem;font-weight:700;letter-spacing:.3em;padding:.28rem .75rem;text-transform:uppercase} .product-quick{position:absolute;top:1.1rem;right:1.1rem;z-index:2;width:32px;height:32px;background:rgba(7,8,7,.65);backdrop-filter:blur(8px);border:1px solid rgba(201,168,76,.3);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:.9rem;cursor:none;opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s,background .3s} .product:hover .product-quick{opacity:1;transform:translateY(0)} .product-quick:hover{background:var(--gold);color:var(--bg)} .product-body{padding:1.3rem 1.4rem 1.6rem;border:1px solid var(--line);border-top:none;transition:border-color .4s} .product:hover .product-body{border-color:var(--line-bright)} .product-cat{font-size:.5rem;letter-spacing:.45em;color:var(--sage-light);text-transform:uppercase;margin-bottom:.5rem} .product-name{font-family:var(--serif);font-size:1.25rem;font-weight:500;margin-bottom:.3rem;line-height:1.1} .product-foot{display:flex;justify-content:space-between;align-items:flex-end;padding-top:1rem;border-top:1px solid var(--line);margin-top:.8rem} .product-price{font-family:var(--serif);font-size:1.35rem;color:var(--gold);font-weight:500;line-height:1} .product-price small{font-size:.62rem;font-family:var(--sans);letter-spacing:.15em;color:var(--soft);font-weight:400} .product-add{background:transparent;border:1px solid var(--line-bright);color:var(--gold);font-family:var(--sans);font-size:.56rem;font-weight:600;letter-spacing:.2em;padding:.55rem 1rem;text-transform:uppercase;cursor:none;transition:all .35s;text-decoration:none;white-space:nowrap} .product:hover .product-add{background:var(--gold);color:var(--bg);border-color:var(--gold)} #fullbanner{position:relative;height:72vh;min-height:500px;overflow:hidden;display:flex;align-items:center;justify-content:center} .fullbanner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.28) saturate(.6) contrast(1.1);transform:scale(1.04)} .fullbanner-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--bg) 0%,rgba(7,8,7,.05) 18%,rgba(7,8,7,.05) 82%,var(--bg) 100%),radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(7,8,7,.55) 100%)} .fullbanner-frame{position:absolute;inset:3rem;z-index:2;pointer-events:none;border:1px solid var(--line)} .fullbanner-frame::before{content:'';position:absolute;top:-1px;right:-1px;width:28px;height:28px;border-top:1px solid var(--gold);border-right:1px solid var(--gold)} .fullbanner-frame::after{content:'';position:absolute;bottom:-1px;left:-1px;width:28px;height:28px;border-bottom:1px solid var(--gold);border-left:1px solid var(--gold)} .fullbanner-float{position:absolute;z-index:3;pointer-events:none;border:1px solid var(--line-bright);padding:.55rem 1.1rem;font-size:.57rem;letter-spacing:.28em;background:rgba(10,11,10,.55);backdrop-filter:blur(10px);color:var(--gold);text-transform:uppercase} .fb-tl{top:22%;right:8%;animation:floatTag 5s ease-in-out infinite} .fb-br{bottom:22%;left:8%;animation:floatTag 6s ease-in-out 1s infinite} @keyframes floatTag{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .fullbanner-content{position:relative;z-index:4;text-align:center;padding:0 2rem} .fullbanner-eyebrow{font-size:.58rem;letter-spacing:.55em;font-weight:600;color:var(--sage-light);text-transform:uppercase;margin-bottom:1.5rem;display:block} .fullbanner-title{font-family:var(--sans);font-size:clamp(2.8rem,9vw,9rem);font-weight:100;letter-spacing:-.03em;line-height:.96;margin-bottom:2rem} .fullbanner-title em{font-family:var(--serif);font-style:italic;color:var(--gold);font-weight:400} .fullbanner-title strong{display:block;font-weight:800} #testimonials{padding:9rem 3.5rem;background:var(--bg2);border-top:1px solid var(--line)} .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1280px;margin:0 auto} .testi{background:rgba(14,16,14,.6);backdrop-filter:blur(20px);border:1px solid var(--line);padding:2.5rem 2.2rem;position:relative;transition:border-color .4s,background .4s,transform .5s} .testi:hover{border-color:var(--line-bright);background:rgba(201,168,76,.04);transform:translateY(-8px)} .testi-quote{position:absolute;top:1.5rem;right:1.8rem;font-family:var(--serif);font-size:5rem;color:var(--gold);opacity:.12;line-height:.6} .testi-stars{color:var(--gold);font-size:.82rem;letter-spacing:.2em;margin-bottom:1.5rem} .testi-text{font-family:var(--serif);font-size:1.02rem;color:var(--ivory);font-weight:400;line-height:1.7;margin-bottom:1.5rem;font-style:italic} .testi-line{width:28px;height:1px;background:var(--gold);margin-bottom:1.4rem} .testi-author{display:flex;align-items:center;gap:.9rem} .testi-av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold-deep) 0%,var(--gold) 100%);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:.95rem;font-weight:600;color:var(--bg);flex-shrink:0} .testi-name{font-size:.8rem;font-weight:600;letter-spacing:.02em} .testi-where{font-size:.64rem;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;margin-top:.2rem} #faq{padding:9rem 3.5rem;background:var(--bg);border-top:1px solid var(--line)} .faq-wrap{max-width:820px;margin:0 auto} .faq-item{border-bottom:1px solid var(--line);overflow:hidden} .faq-q{display:flex;justify-content:space-between;align-items:center;padding:1.8rem 0;cursor:none;font-size:.86rem;font-weight:500;letter-spacing:.02em;transition:color .3s;gap:1rem} .faq-q:hover{color:var(--gold)} .faq-ic{width:28px;height:28px;border:1px solid var(--line-bright);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold);font-size:.8rem;transition:transform .4s,background .3s} .faq-item.open .faq-ic{transform:rotate(45deg);background:var(--gold);color:var(--bg)} .faq-a{max-height:0;overflow:hidden;font-size:.82rem;color:var(--soft);font-weight:300;line-height:1.85;transition:max-height .5s cubic-bezier(.4,0,.2,1),padding .4s} .faq-item.open .faq-a{max-height:260px;padding-bottom:1.8rem} #cta{position:relative;padding:11rem 3.5rem;background:var(--bg);text-align:center;overflow:hidden} .cta-glow{position:absolute;width:600px;height:600px;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(201,168,76,.08) 0%,transparent 70%);pointer-events:none} .cta-frame{position:absolute;top:3rem;bottom:3rem;left:3rem;right:3rem;border:1px solid var(--line);pointer-events:none} .cta-frame::before{content:'';position:absolute;top:-1px;left:-1px;width:28px;height:28px;border-top:1px solid var(--gold);border-left:1px solid var(--gold)} .cta-frame::after{content:'';position:absolute;bottom:-1px;right:-1px;width:28px;height:28px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold)} .cta-tag{font-size:.58rem;letter-spacing:.55em;font-weight:600;color:var(--gold);text-transform:uppercase;margin-bottom:1.5rem;display:block;position:relative} .cta-title{font-family:var(--sans);font-size:clamp(2.5rem,8vw,8rem);font-weight:100;letter-spacing:-.03em;line-height:.98;margin-bottom:1.5rem;position:relative} .cta-title em{font-family:var(--serif);font-style:italic;color:var(--gold);font-weight:400} .cta-title strong{font-weight:800;display:block} .cta-sub{font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--soft);font-weight:300;max-width:560px;margin:0 auto 3rem;line-height:1.6;position:relative} .cta-btns{display:flex;gap:1rem;justify-content:center;position:relative;flex-wrap:wrap} .cta-contact{display:flex;justify-content:center;gap:3rem;margin-top:3.5rem;flex-wrap:wrap;padding-top:3rem;border-top:1px solid var(--line);position:relative;max-width:700px;margin-left:auto;margin-right:auto} .cta-info-item{display:flex;align-items:center;gap:.8rem;font-size:.76rem;color:var(--soft);font-weight:300;text-decoration:none;transition:color .3s} .cta-info-item:hover{color:var(--gold)} .cta-info-item svg{width:15px;height:15px;color:var(--gold);flex-shrink:0} footer{background:var(--bg2);border-top:1px solid var(--line);padding:5rem 3.5rem 2rem} .footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:3rem;max-width:1340px;margin:0 auto 4rem} .footer-logo-img{height:64px;width:auto;object-fit:contain;margin-bottom:1rem} .footer-tag-sm{font-size:.6rem;letter-spacing:.38em;color:var(--muted);text-transform:uppercase;margin-bottom:1.5rem} .footer-desc{font-size:.76rem;color:var(--soft);line-height:1.85;font-weight:300;max-width:280px;margin-bottom:2rem} .footer-social{display:flex;gap:.6rem} .sm-btn{width:36px;height:36px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--soft);cursor:none;transition:all .35s;text-decoration:none} .sm-btn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)} .sm-btn svg{width:13px;height:13px;stroke-width:1.5} .footer-col h4{font-size:.6rem;font-weight:700;letter-spacing:.4em;color:var(--gold);text-transform:uppercase;margin-bottom:1.4rem} .footer-col ul{list-style:none} .footer-col li{margin-bottom:.82rem} .footer-col a{font-size:.76rem;color:var(--soft);font-weight:300;text-decoration:none;transition:color .3s,padding .3s;display:inline-block} .footer-col a:hover{color:var(--gold);padding-left:.35rem} .footer-contact-item{font-size:.76rem;color:var(--soft);font-weight:300;margin-bottom:.6rem;display:flex;align-items:center;gap:.6rem} .footer-contact-item svg{width:13px;height:13px;color:var(--gold);flex-shrink:0} .footer-bottom{max-width:1340px;margin:0 auto;padding-top:2rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem} .footer-copy{font-size:.63rem;color:var(--muted);letter-spacing:.15em} .footer-payment{display:flex;gap:.7rem} .payment-chip{font-size:.54rem;letter-spacing:.18em;border:1px solid var(--line);padding:.28rem .6rem;color:var(--muted);text-transform:uppercase} .footer-made{font-size:.63rem;color:var(--muted)} .footer-made a{color:var(--sage-light);text-decoration:none} .reveal{opacity:0;transform:translateY(36px);transition:opacity 1s cubic-bezier(.4,0,.2,1),transform 1s cubic-bezier(.4,0,.2,1)} .reveal.visible{opacity:1;transform:none} .wa-float{position:fixed;bottom:2rem;right:2rem;z-index:600;width:52px;height:52px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 24px rgba(37,211,102,.3);cursor:none;transition:transform .35s,box-shadow .35s;text-decoration:none} .wa-float:hover{transform:scale(1.1);box-shadow:0 8px 32px rgba(37,211,102,.5)} .wa-float svg{width:26px;height:26px;fill:white} /* BILINGUAL */ .hebrew-text{display:none} .lang-ar .english-text,.lang-ar .hebrew-text{display:none !important} .lang-en .arabic-text,.lang-en .hebrew-text{display:none !important} .lang-he .english-text,.lang-he .arabic-text{display:none !important} .lang-he .hebrew-text{display:inline} .lang-ar{direction:rtl} .lang-ar nav{direction:rtl;padding:1.3rem 8rem 1.3rem 3.5rem} .lang-ar nav.scrolled{padding:1rem 8rem 1rem 3.5rem} .lang-ar .nav-links a::after{left:auto;right:0} .lang-ar .btn-arrow{transform:scaleX(-1)} .lang-ar .btn:hover .btn-arrow{transform:scaleX(-1) translateX(4px)} .lang-ar .footer-col a:hover{padding-left:0;padding-right:.35rem} .lang-ar .stat-block{padding-left:0;padding-right:1.4rem;text-align:right;border-right:1px solid var(--line);border-left:none} .lang-ar .stat-block:nth-child(2n){border-right:none;border-left:1px solid var(--line);padding-right:0;padding-left:1.4rem;text-align:left} .lang-ar .story-text{padding-left:0;padding-right:1rem} .lang-ar .story-img-1{left:auto;right:0} .lang-ar .story-img-2{right:auto;left:-2rem} .lang-ar .story-tape{right:auto;left:-3rem} .lang-ar .lang-switcher{left:auto;right:3.5rem} .lang-ar .wa-float{right:auto;left:2rem} .lang-ar .service-badge,.lang-ar .product-badge{left:auto;right:1.1rem} .lang-ar .product-quick{right:auto;left:1.1rem} .lang-ar .ba-label-before{left:auto;right:1rem} .lang-ar .ba-label-after{right:auto;left:1rem} .lang-ar .hero-side-l{right:2rem;left:auto} .lang-ar .hero-side-r{left:2rem;right:auto} .lang-ar .fullbanner-frame::before{right:auto;left:-1px;border-top:1px solid var(--gold);border-left:1px solid var(--gold);border-right:none} .lang-ar .fullbanner-frame::after{left:auto;right:-1px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);border-left:none} .lang-ar .cta-frame::before{left:auto;right:-1px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);border-left:none} .lang-ar .cta-frame::after{right:auto;left:-1px;border-bottom:1px solid var(--gold);border-left:1px solid var(--gold);border-right:none} .lang-ar .fb-tl{right:auto;left:8%} .lang-ar .fb-br{left:auto;right:8%} .lang-he{direction:rtl} .lang-he nav{direction:rtl;padding:1.3rem 8rem 1.3rem 3.5rem} .lang-he nav.scrolled{padding:1rem 8rem 1rem 3.5rem} .lang-he .nav-links a::after{left:auto;right:0} .lang-he .btn-arrow{transform:scaleX(-1)} .lang-he .btn:hover .btn-arrow{transform:scaleX(-1) translateX(4px)} .lang-he .footer-col a:hover{padding-left:0;padding-right:.35rem} .lang-he .stat-block{padding-left:0;padding-right:1.4rem;text-align:right;border-right:1px solid var(--line);border-left:none} .lang-he .stat-block:nth-child(2n){border-right:none;border-left:1px solid var(--line);padding-right:0;padding-left:1.4rem;text-align:left} .lang-he .story-text{padding-left:0;padding-right:1rem} .lang-he .story-img-1{left:auto;right:0} .lang-he .story-img-2{right:auto;left:-2rem} .lang-he .story-tape{right:auto;left:-3rem} .lang-he .lang-switcher{left:auto;right:3.5rem} .lang-he .wa-float{right:auto;left:2rem} .lang-he .service-badge,.lang-he .product-badge{left:auto;right:1.1rem} .lang-he .product-quick{right:auto;left:1.1rem} .lang-he .ba-label-before{left:auto;right:1rem} .lang-he .ba-label-after{right:auto;left:1rem} .lang-he .hero-side-l{right:2rem;left:auto} .lang-he .hero-side-r{left:2rem;right:auto} .lang-he .fullbanner-frame::before{right:auto;left:-1px;border-top:1px solid var(--gold);border-left:1px solid var(--gold);border-right:none} .lang-he .fullbanner-frame::after{left:auto;right:-1px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);border-left:none} .lang-he .cta-frame::before{left:auto;right:-1px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);border-left:none} .lang-he .cta-frame::after{right:auto;left:-1px;border-bottom:1px solid var(--gold);border-left:1px solid var(--gold);border-right:none} .lang-he .fb-tl{right:auto;left:8%} .lang-he .fb-br{left:auto;right:8%} @media(max-width:1200px){ nav,nav.scrolled{padding:1.1rem 1.8rem} .lang-ar nav,.lang-ar nav.scrolled{padding:1.1rem 1.8rem} .lang-he nav,.lang-he nav.scrolled{padding:1.1rem 1.8rem} .nav-links{display:none} .services-grid,.products-grid{grid-template-columns:repeat(2,1fr)} .ba-grid,.testi-grid{grid-template-columns:repeat(2,1fr)} .stats-grid{grid-template-columns:repeat(2,1fr)} .stat-card:nth-child(2){border-left:1px solid var(--line)} .stat-card:nth-child(1),.stat-card:nth-child(2){border-bottom:1px solid var(--line)} .story-grid{grid-template-columns:1fr;gap:4rem} .story-visual{min-height:460px} .footer-top{grid-template-columns:1fr 1fr 1fr;gap:2.5rem} .footer-brand{grid-column:span 3} #services,#about,#stats,#shop,#testimonials,#cta,#beforeafter,#faq,footer,#fullbanner{padding-left:2rem;padding-right:2rem} } @media(max-width:680px){ .services-grid,.products-grid,.ba-grid,.testi-grid{grid-template-columns:1fr} .stats-grid{grid-template-columns:1fr} .stat-card{border-left:none;border-bottom:1px solid var(--line);padding:2rem} .stat-card:last-child{border-bottom:none} .hero-side{display:none} .footer-top{grid-template-columns:1fr 1fr;gap:2rem} .footer-brand{grid-column:span 2} .cta-frame,.fullbanner-frame{display:none} .story-tape{display:none} } /* ========== INNER PAGES ========== */ .page-header{padding:160px 4rem 80px;text-align:center;position:relative;border-bottom:1px solid var(--line);overflow:hidden;background:radial-gradient(ellipse at top,rgba(201,168,76,.07),transparent 60%)} .page-header::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:80px;background:linear-gradient(180deg,var(--gold),transparent)} .breadcrumb{font-family:var(--serif);font-size:.85rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;display:flex;justify-content:center;gap:.8rem;align-items:center} .breadcrumb a{color:var(--muted);text-decoration:none;transition:color .3s} .breadcrumb a:hover{color:var(--gold)} .breadcrumb span{color:var(--gold-deep)} .page-title{font-family:var(--sans);font-size:clamp(2.4rem,5vw,4.5rem);font-weight:200;letter-spacing:-.02em;line-height:1.05;margin-bottom:1rem} .page-title em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold);background:linear-gradient(180deg,var(--gold-light),var(--gold-deep));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .page-sub{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--soft);max-width:680px;margin:1rem auto 0;line-height:1.6} .page-content{padding:80px 4rem 120px;max-width:1300px;margin:0 auto} .prose{font-size:1.05rem;line-height:1.85;color:var(--soft);font-weight:300} .prose h2{font-family:var(--sans);font-size:2rem;font-weight:300;color:var(--ivory);margin:2.5rem 0 1rem;letter-spacing:-.01em} .prose h3{font-family:var(--sans);font-size:1.35rem;font-weight:400;color:var(--gold);margin:2rem 0 .8rem} .prose p{margin-bottom:1.2rem} .prose ul{list-style:none;padding:0;margin:1rem 0} .prose ul li{padding:.4rem 0 .4rem 1.8rem;position:relative;color:var(--soft)} .prose ul li::before{content:'';position:absolute;left:0;top:1.05rem;width:8px;height:1px;background:var(--gold)} .lang-ar .prose ul li,.lang-he .prose ul li{padding:.4rem 1.8rem .4rem 0} .lang-ar .prose ul li::before,.lang-he .prose ul li::before{left:auto;right:0} /* Service detail */ .service-hero{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;padding:140px 4rem 60px;max-width:1400px;margin:0 auto} .service-hero-img{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line)} .service-hero-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1) contrast(1.05)} .service-hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(7,8,8,.5));pointer-events:none} .service-info .breadcrumb{justify-content:flex-start;margin-bottom:1.2rem} .lang-ar .service-info .breadcrumb,.lang-he .service-info .breadcrumb{justify-content:flex-end} .service-info .page-title{text-align:left;font-size:clamp(2rem,4vw,3.4rem)} .lang-ar .service-info .page-title,.lang-he .service-info .page-title{text-align:right} .service-info .page-sub{text-align:left;margin-left:0} .lang-ar .service-info .page-sub,.lang-he .service-info .page-sub{text-align:right;margin-right:0;margin-left:auto} .service-meta{display:flex;gap:2.5rem;margin:2rem 0;padding:1.5rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .meta-item .meta-label{font-family:var(--serif);font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem} .meta-item .meta-val{font-family:var(--sans);font-size:1.1rem;color:var(--gold);font-weight:500} .benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin:3rem 0} .benefit-card{padding:2rem;border:1px solid var(--line);background:rgba(255,255,255,.01);transition:all .4s} .benefit-card:hover{border-color:var(--gold);background:rgba(201,168,76,.03);transform:translateY(-4px)} .benefit-num{font-family:var(--serif);font-size:2.5rem;color:var(--gold);font-style:italic;margin-bottom:1rem;display:block} .benefit-title{font-family:var(--sans);font-size:1.15rem;font-weight:500;color:var(--ivory);margin-bottom:.6rem} .benefit-desc{font-size:.95rem;color:var(--muted);line-height:1.7} /* Product detail */ .product-detail{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;padding:140px 4rem 80px;max-width:1400px;margin:0 auto} .product-img-frame{position:relative;aspect-ratio:1;background:linear-gradient(135deg,rgba(201,168,76,.04),rgba(123,160,138,.04));border:1px solid var(--line);overflow:hidden} .product-img-frame img{width:100%;height:100%;object-fit:contain;padding:3rem} .product-info-detail .page-title{text-align:left;font-size:clamp(2rem,3.5vw,3rem)} .lang-ar .product-info-detail .page-title,.lang-he .product-info-detail .page-title{text-align:right} .product-price-detail{font-family:var(--serif);font-size:2.8rem;color:var(--gold);margin:1.5rem 0;font-weight:400} .product-price-detail .currency{font-size:1.4rem;color:var(--muted);margin-right:.3rem} .lang-ar .product-price-detail .currency,.lang-he .product-price-detail .currency{margin-right:0;margin-left:.3rem} .product-desc-detail{color:var(--soft);line-height:1.85;font-size:1.05rem;margin-bottom:2rem} .product-features{margin:2rem 0;padding:1.5rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .feature-row{display:flex;justify-content:space-between;padding:.8rem 0;font-size:.95rem} .feature-row .feat-label{color:var(--muted);font-family:var(--serif);font-style:italic} .feature-row .feat-val{color:var(--ivory);font-weight:500} /* Shop grid */ .shop-filters{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin:2rem 0 4rem;padding:0 4rem} .filter-btn{padding:.7rem 1.5rem;background:transparent;border:1px solid var(--line);color:var(--soft);font-family:var(--sans);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;cursor:none;transition:all .3s} .filter-btn:hover,.filter-btn.active{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.04)} /* Blog */ .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2.5rem;padding:0 4rem;max-width:1400px;margin:0 auto} .blog-card{display:block;text-decoration:none;color:var(--ivory);background:rgba(255,255,255,.01);border:1px solid var(--line);overflow:hidden;transition:all .4s} .blog-card:hover{border-color:var(--gold);transform:translateY(-6px);background:rgba(201,168,76,.02)} .blog-img{aspect-ratio:16/10;overflow:hidden} .blog-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s} .blog-card:hover .blog-img img{transform:scale(1.05)} .blog-body{padding:1.8rem} .blog-date{font-family:var(--serif);font-size:.8rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:.7rem} .blog-title{font-family:var(--sans);font-size:1.25rem;font-weight:500;line-height:1.4;margin-bottom:.6rem;color:var(--ivory)} .blog-excerpt{color:var(--muted);font-size:.92rem;line-height:1.65} @media(max-width:900px){ .service-hero,.product-detail{grid-template-columns:1fr;gap:2.5rem;padding:120px 1.5rem 60px} .page-header,.page-content{padding-left:1.5rem;padding-right:1.5rem} .shop-filters,.blog-grid{padding-left:1.5rem;padding-right:1.5rem} .service-meta{flex-wrap:wrap;gap:1.2rem} } /* ============================================ CART SYSTEM STYLES ============================================ */ /* Cart Nav Button */ .cart-nav-btn{ background:transparent; border:none; color:var(--ivory); cursor:none; padding:.5rem; display:inline-flex; align-items:center; justify-content:center; position:relative; margin:0 1rem; transition:color .3s; } .cart-nav-btn:hover{color:var(--gold)} .cart-nav-btn svg{display:block} .cart-badge{ position:absolute; top:-4px; right:-6px; background:var(--gold); color:var(--bg); font-size:.65rem; font-weight:700; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--sans); } .lang-ar .cart-badge,.lang-he .cart-badge{right:auto;left:-6px} /* Toast (added to cart notification) */ .aseel-toast{ position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(120%); background:rgba(15,16,15,.97); backdrop-filter:blur(16px); border:1px solid var(--gold); padding:1rem 1.4rem; display:flex; align-items:center; gap:1rem; z-index:9999; opacity:0; transition:all .4s cubic-bezier(.2,.9,.3,1.4); max-width:90vw; box-shadow:0 12px 40px rgba(0,0,0,.6); } .aseel-toast.show{transform:translateX(-50%) translateY(0);opacity:1} .toast-icon{ width:36px; height:36px; background:var(--gold); color:var(--bg); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; flex-shrink:0; } .toast-body{display:flex;flex-direction:column;gap:.15rem;min-width:0} .toast-title{ font-family:var(--serif); font-style:italic; color:var(--gold); font-size:.85rem; letter-spacing:.05em; } .toast-product{ color:var(--ivory); font-size:.95rem; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; } .toast-view{ background:transparent; border:1px solid var(--line-bright); color:var(--gold); padding:.5rem .9rem; font-family:var(--sans); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; cursor:none; transition:all .3s; white-space:nowrap; } .toast-view:hover{background:var(--gold);color:var(--bg);border-color:var(--gold)} /* Cart Panel - Slide-in Drawer */ #aseel-cart-panel{ position:fixed; inset:0; z-index:9000; pointer-events:none; } #aseel-cart-panel.open{pointer-events:auto} .cart-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .4s; cursor:none; } #aseel-cart-panel.open .cart-overlay{background:rgba(0,0,0,.7);backdrop-filter:blur(6px)} .cart-drawer{ position:absolute; top:0; right:0; bottom:0; width:480px; max-width:100vw; background:var(--bg2); border-left:1px solid var(--line); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .5s cubic-bezier(.2,.9,.3,1); box-shadow:-20px 0 60px rgba(0,0,0,.5); } .lang-ar .cart-drawer,.lang-he .cart-drawer{ right:auto; left:0; border-left:none; border-right:1px solid var(--line); box-shadow:20px 0 60px rgba(0,0,0,.5); transform:translateX(-100%); } #aseel-cart-panel.open .cart-drawer{transform:translateX(0)} .cart-header{ padding:1.8rem 2rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .cart-title-text{ font-family:var(--sans); font-weight:300; font-size:1.6rem; letter-spacing:-.01em; color:var(--ivory); margin:0; } .cart-close{ background:transparent; border:1px solid var(--line); color:var(--soft); width:36px; height:36px; font-size:1.4rem; font-weight:200; cursor:none; transition:all .3s; display:flex; align-items:center; justify-content:center; } .cart-close:hover{border-color:var(--gold);color:var(--gold)} .cart-body{ flex:1; overflow-y:auto; padding:1rem 0; } .cart-body::-webkit-scrollbar{width:4px} .cart-body::-webkit-scrollbar-thumb{background:var(--gold-deep)} /* Cart Empty State */ .cart-empty{ padding:5rem 2rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.6rem; } .cart-empty-icon{ font-size:4rem; color:var(--gold-deep); margin-bottom:1rem; font-family:var(--serif); } .cart-empty-title{ font-family:var(--sans); font-size:1.3rem; color:var(--ivory); font-weight:300; } .cart-empty-sub{ color:var(--muted); font-family:var(--serif); font-style:italic; font-size:.95rem; margin-bottom:1.5rem; } .cart-empty-btn{ display:inline-block; padding:.9rem 2rem; background:var(--gold); color:var(--bg); text-decoration:none; font-family:var(--sans); font-size:.8rem; letter-spacing:.25em; text-transform:uppercase; transition:all .3s; margin-top:.5rem; } .cart-empty-btn:hover{background:var(--gold-light)} /* Cart Item */ .cart-item{ display:grid; grid-template-columns:80px 1fr auto; gap:1rem; padding:1.2rem 2rem; border-bottom:1px solid var(--line); align-items:center; } .cart-item-img{ width:80px; height:80px; background:rgba(255,255,255,.02); border:1px solid var(--line); overflow:hidden; display:flex; align-items:center; justify-content:center; } .cart-item-img img{ width:100%; height:100%; object-fit:contain; padding:.5rem; } .cart-item-info{display:flex;flex-direction:column;gap:.4rem;min-width:0} .cart-item-name{ font-family:var(--sans); font-size:.95rem; color:var(--ivory); font-weight:400; line-height:1.3; } .cart-item-price{ font-family:var(--serif); font-style:italic; color:var(--gold); font-size:.95rem; } .cart-item-qty{ display:inline-flex; align-items:center; gap:.7rem; border:1px solid var(--line); width:fit-content; padding:.15rem; } .cart-item-qty button{ width:26px; height:26px; background:transparent; border:none; color:var(--soft); font-size:1rem; cursor:none; transition:color .2s; } .cart-item-qty button:hover{color:var(--gold)} .cart-item-qty span{ min-width:24px; text-align:center; font-family:var(--sans); color:var(--ivory); font-size:.9rem; } .cart-item-actions{ display:flex; flex-direction:column; gap:.4rem; align-items:flex-end; } .lang-ar .cart-item-actions,.lang-he .cart-item-actions{align-items:flex-start} .cart-item-total{ font-family:var(--sans); color:var(--gold); font-weight:500; font-size:1rem; } .cart-item-remove{ background:transparent; border:none; color:var(--muted); font-family:var(--serif); font-style:italic; font-size:.78rem; text-decoration:underline; cursor:none; padding:0; transition:color .3s; } .cart-item-remove:hover{color:var(--gold-light)} /* Cart Footer */ .cart-footer{ border-top:1px solid var(--line); padding:1.5rem 2rem 2rem; background:var(--bg3); } .cart-totals{margin-bottom:1.3rem} .cart-row{ display:flex; justify-content:space-between; align-items:center; padding:.4rem 0; } .cart-row-sub{padding:0;margin-bottom:.7rem} .cart-label{color:var(--soft);font-size:.95rem} .cart-val{color:var(--ivory);font-family:var(--sans);font-weight:500;font-size:1rem} .cart-label-sm{ font-family:var(--serif); font-style:italic; color:var(--muted); font-size:.8rem; } .cart-row-total{ padding-top:1rem; border-top:1px solid var(--line); margin-top:.5rem; } .cart-label-total{ font-family:var(--sans); font-size:1.1rem; color:var(--ivory); font-weight:300; letter-spacing:.05em; } .cart-val-total{ font-family:var(--serif); font-size:1.8rem; color:var(--gold); font-weight:400; } .cart-checkout-btn{ width:100%; padding:1.2rem 1.5rem; background:#25D366; color:white; border:none; display:flex; align-items:center; justify-content:center; gap:.8rem; font-family:var(--sans); font-size:.95rem; font-weight:500; letter-spacing:.05em; cursor:none; transition:all .3s; } .cart-checkout-btn:hover{ background:#1ebe57; transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,.3); } .cart-checkout-btn svg{flex-shrink:0} /* Mobile */ @media(max-width:600px){ .cart-drawer{width:100%} .cart-header{padding:1.3rem 1.2rem} .cart-item{padding:1rem 1.2rem;grid-template-columns:60px 1fr auto;gap:.8rem} .cart-item-img{width:60px;height:60px} .cart-footer{padding:1.2rem 1.2rem 1.5rem} .cart-val-total{font-size:1.5rem} .aseel-toast{ bottom:1rem; left:1rem; right:1rem; max-width:none; transform:translateY(120%); } .aseel-toast.show{transform:translateY(0)} .toast-product{max-width:140px} } /* ============================================ RESPONSIVE FIXES for new sections ============================================ */ @media(max-width:900px){ .about-intro,.founder-section,.contact-hero{grid-template-columns:1fr !important;gap:2rem !important} .founder-section .reveal:first-child{order:2 !important} .founder-section .reveal:last-child{order:1 !important} } /* Make sure btn-gold works */ .btn-gold{display:inline-block;padding:1rem 2.5rem;background:var(--gold);color:var(--bg);text-decoration:none;font-family:var(--sans);font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;transition:all .3s;border:none;cursor:none} .btn-gold:hover{background:var(--gold-light);transform:translateY(-2px)} [data-theme="light"] .btn-gold{background:var(--gold-deep);color:#fff} [data-theme="light"] .btn-gold:hover{background:var(--gold)} /* ============================================ MODAL SYSTEM - Service/Product Details ============================================ */ #aseel-modal{ position:fixed; inset:0; z-index:10000; pointer-events:none; visibility:hidden; opacity:0; transition:opacity .35s ease,visibility 0s linear .35s; } #aseel-modal.open{ pointer-events:auto; visibility:visible; opacity:1; transition:opacity .35s ease,visibility 0s linear 0s; } .modal-overlay{ position:absolute; inset:0; background:rgba(7,8,8,.85); cursor:none; } .modal-dialog{ position:absolute; top:50%; left:50%; transform:translate(-50%,-45%) scale(.96); width:min(680px,calc(100vw - 2rem)); max-height:calc(100vh - 2rem); background:var(--bg2); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; transition:transform .4s cubic-bezier(.2,.9,.3,1); box-shadow:0 30px 80px rgba(0,0,0,.6); will-change:transform; } #aseel-modal.open .modal-dialog{ transform:translate(-50%,-50%) scale(1); } .modal-close{ position:absolute; top:1rem; right:1rem; width:38px; height:38px; background:rgba(15,16,15,.9); border:1px solid var(--line); color:var(--ivory); cursor:none; z-index:10; display:flex; align-items:center; justify-content:center; transition:all .3s; backdrop-filter:blur(10px); } .modal-close:hover{ background:var(--gold); border-color:var(--gold); color:var(--bg); transform:rotate(90deg); } .lang-ar .modal-close,.lang-he .modal-close{right:auto;left:1rem} .modal-content{ flex:1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--gold-deep) transparent; } .modal-content::-webkit-scrollbar{width:4px} .modal-content::-webkit-scrollbar-thumb{background:var(--gold-deep)} /* Hero section */ .modal-hero{ position:relative; height:280px; overflow:hidden; border-bottom:1px solid var(--line); } .modal-hero-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:2rem 2rem 1.8rem; background:linear-gradient(180deg,transparent 50%,rgba(7,8,8,.7)); text-align:center; } .modal-tagline{ font-family:var(--serif); font-style:italic; font-size:.85rem; letter-spacing:.35em; text-transform:uppercase; color:var(--gold); margin-bottom:.7rem; } .modal-tagline-light{ color:var(--gold); margin-bottom:.5rem; display:block; } .modal-title{ font-family:var(--sans); font-size:clamp(1.6rem,3.5vw,2.2rem); font-weight:200; letter-spacing:-.02em; line-height:1.1; color:var(--ivory); margin:0; } /* Product hero (image based, not SVG) */ .modal-product-hero{ height:280px; background:linear-gradient(135deg,rgba(201,168,76,.06),rgba(123,160,138,.05)); display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--line); position:relative; } .modal-product-img{ max-width:80%; max-height:85%; object-fit:contain; } /* Body */ .modal-body{padding:2rem 2.2rem 2.2rem} /* Meta info (duration/sessions) */ .modal-meta{ display:flex; align-items:center; justify-content:center; gap:2rem; padding:1rem 0; border-bottom:1px solid var(--line); margin-bottom:1.5rem; } .modal-meta-item{text-align:center} .modal-meta-label{ font-family:var(--serif); font-style:italic; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; } .modal-meta-val{ font-family:var(--sans); font-size:.95rem; color:var(--gold); font-weight:500; } .modal-meta-divider{ width:1px; height:30px; background:var(--line); } /* Description */ .modal-desc{ color:var(--soft); line-height:1.85; font-size:1rem; margin-bottom:1.8rem; } /* Section label */ .modal-section-label{ font-family:var(--serif); font-style:italic; font-size:.78rem; letter-spacing:.35em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; display:flex; align-items:center; gap:.8rem; } .modal-section-label::after{ content:''; flex:1; height:1px; background:linear-gradient(to right,var(--line),transparent); } .lang-ar .modal-section-label::after,.lang-he .modal-section-label::after{ background:linear-gradient(to left,var(--line),transparent); } /* Benefits */ .modal-benefits{ display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; margin-bottom:1.8rem; } .modal-benefit{ padding:1rem 1.2rem; background:rgba(255,255,255,.02); border:1px solid var(--line); display:flex; align-items:center; gap:.9rem; transition:all .3s; } .modal-benefit:hover{ border-color:var(--gold); background:rgba(201,168,76,.04); } .modal-benefit-num{ font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--gold); line-height:1; flex-shrink:0; } .modal-benefit-text{ font-size:.9rem; color:var(--soft); line-height:1.4; } /* Product features */ .modal-features{margin-bottom:1.8rem} .modal-feature-row{ display:flex; justify-content:space-between; align-items:center; padding:.85rem 0; border-bottom:1px solid var(--line); } .modal-feature-row:last-child{border-bottom:none} .modal-feature-label{ color:var(--muted); font-family:var(--serif); font-style:italic; font-size:.95rem; } .modal-feature-value{ color:var(--ivory); font-weight:500; font-size:.95rem; } /* Price (products) */ .modal-price{ font-family:var(--serif); font-size:2.2rem; color:var(--gold); font-weight:400; margin:1rem 0 1.5rem; display:flex; align-items:baseline; gap:.3rem; } .modal-price-curr{ font-size:1.2rem; color:var(--muted); } /* Actions */ .modal-actions{ display:flex; flex-direction:column; gap:.7rem; padding-top:1rem; border-top:1px solid var(--line); } .modal-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.8rem; padding:1.1rem 1.5rem; background:transparent; border:1px solid var(--line); color:var(--ivory); font-family:var(--sans); font-size:.85rem; letter-spacing:.15em; text-transform:uppercase; text-decoration:none; cursor:none; transition:all .3s; font-weight:500; } .modal-btn:hover{border-color:var(--gold);color:var(--gold)} .modal-btn-primary{ background:#25D366; border-color:#25D366; color:white; } .modal-btn-primary:hover{ background:#1ebe57; border-color:#1ebe57; color:white; transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,.3); } /* Mobile responsive */ @media(max-width:600px){ .modal-dialog{ width:100vw; height:100vh; max-height:100vh; top:0; left:0; transform:translateY(20px); } #aseel-modal.open .modal-dialog{ transform:translate(0,0) scale(1); } .modal-hero,.modal-product-hero{height:220px} .modal-body{padding:1.5rem 1.5rem 2rem} .modal-benefits{grid-template-columns:1fr} .modal-meta{gap:1.2rem} .modal-meta-divider{height:24px} } /* Light theme overrides */ [data-theme="light"] .modal-dialog{background:var(--bg)} [data-theme="light"] .modal-overlay{background:rgba(250,246,238,.85) !important} [data-theme="light"] #aseel-modal.open .modal-overlay{background:rgba(250,246,238,.92)} [data-theme="light"] .modal-benefit{background:rgba(160,127,28,.03)} [data-theme="light"] .modal-product-hero{background:linear-gradient(135deg,#fff,#F2EDE2)} /* ============================================================ AMEER ADD-ON — Offers, Videos, Product-detail video (matches dark luxury palette: gold #C9A84C / sage #7BA08A) ============================================================ */ #offers{padding:7rem 4rem;background:var(--bg2);position:relative} .offers-grid{max-width:1320px;margin:3.5rem auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem} .offer-card{background:var(--bg3);border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s,box-shadow .5s} .offer-card:hover{transform:translateY(-6px);border-color:var(--line-bright);box-shadow:0 24px 50px -20px rgba(0,0,0,.7)} .offer-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0a0807} .offer-img>img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1;transition:transform .8s cubic-bezier(.2,.8,.2,1)} .offer-img>img.offer-img-bg{position:absolute;inset:0;object-fit:cover;filter:blur(28px) brightness(.45) saturate(1.1);transform:scale(1.18);z-index:0;pointer-events:none;transition:none} .offer-card:hover .offer-img>img:not(.offer-img-bg){transform:scale(1.04)} .offer-img-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,8,0) 75%,rgba(7,8,8,.55));z-index:2;pointer-events:none} .offer-badge{position:absolute;top:14px;inset-inline-end:14px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#1a1407;font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.02em;padding:.42rem .8rem;border-radius:999px;box-shadow:0 6px 18px -6px rgba(201,168,76,.6)} .offer-badge.disc{background:linear-gradient(135deg,#d8584a,#a23226);color:#fff;box-shadow:0 6px 18px -6px rgba(210,80,60,.55)} .offer-body{padding:1.1rem 1.2rem 1.3rem} .offer-name{font-family:var(--serif);font-size:1.45rem;font-weight:500;color:var(--ivory);margin:0 0 .6rem;line-height:1.15} .offer-book{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--gold-light);text-decoration:none;border-bottom:1px solid var(--line-bright);padding-bottom:2px;transition:color .3s,border-color .3s} .offer-book:hover{color:var(--ivory);border-color:var(--gold)} #videos{padding:7rem 4rem;background:var(--bg);position:relative} .videos-grid{max-width:1000px;margin:3.5rem auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:2rem} .video-card{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#000;aspect-ratio:9/13;max-height:640px} .video-card .video-el{width:100%;height:100%;object-fit:cover;display:block} .video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:1px solid rgba(245,242,236,.5);background:rgba(7,8,8,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--ivory);font-size:1.05rem;cursor:pointer;transition:background .3s,transform .3s,opacity .3s;display:flex;align-items:center;justify-content:center;z-index:2} .video-play:hover{background:var(--gold);color:#1a1407;transform:translate(-50%,-50%) scale(1.08)} .video-play.hidden{opacity:0;pointer-events:none} .video-info{position:absolute;inset-inline:0;bottom:0;padding:1.4rem 1.4rem 1.5rem;background:linear-gradient(0deg,rgba(7,8,8,.92),rgba(7,8,8,0));display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;z-index:1} .video-name{font-family:var(--serif);font-size:1.5rem;font-weight:500;color:var(--ivory);margin:0;line-height:1.1} .video-link{font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--gold-light);text-decoration:none;white-space:nowrap;border:1px solid var(--line-bright);padding:.5rem .9rem;border-radius:999px;transition:all .3s} .video-link:hover{background:var(--gold);color:#1a1407;border-color:var(--gold)} .product-video{padding:.5rem 4rem 5rem;background:var(--bg)} .pv-inner{max-width:520px;margin:0 auto;text-align:center} .pv-el{width:100%;border-radius:18px;border:1px solid var(--line);background:#000;max-height:620px;object-fit:cover} .pv-cap{margin-top:1rem;font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--soft)} @media(max-width:1024px){.offers-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){ #offers,#videos{padding:4.5rem 1.3rem} .offers-grid{grid-template-columns:repeat(2,1fr);gap:1rem} .offer-name{font-size:1.18rem} .videos-grid{grid-template-columns:1fr;gap:1.4rem} .video-card{aspect-ratio:9/14;max-height:none} .product-video{padding:.5rem 1.3rem 3.5rem} } /* ===== SHOP PAGE grid + cards (Ameer add-on) ===== */ .shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem} .product-card{display:block;position:relative;background:var(--bg3);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s,box-shadow .5s} .product-card:hover{transform:translateY(-6px);border-color:var(--line-bright);box-shadow:0 24px 50px -20px rgba(0,0,0,.7)} .product-card .product-img{position:relative;aspect-ratio:1/1;overflow:hidden;margin:0;border:none} .product-card .product-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)} .product-card:hover .product-img img{transform:scale(1.06)} .product-card .product-badge{position:absolute;top:14px;inset-inline-start:14px;z-index:2;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#1a1407;font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.04em;padding:.34rem .7rem;border-radius:999px;box-shadow:0 6px 16px -6px rgba(201,168,76,.6)} .product-card .product-info{padding:1.1rem 1.2rem 1.3rem} .product-card .product-name{font-family:var(--serif);font-size:1.3rem;font-weight:500;color:var(--ivory);margin:0 0 .8rem;line-height:1.15} .product-card .product-meta{display:flex;align-items:center;justify-content:space-between;gap:.8rem} .product-card .product-price{font-family:var(--sans);font-weight:700;font-size:1.08rem;color:var(--gold-light);white-space:nowrap} .product-card .product-price .curr{font-size:.8rem;margin-inline-end:2px;opacity:.85} .product-card .product-add-btn{font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.03em;color:#1a1407;background:linear-gradient(135deg,var(--gold-light),var(--gold));border:none;border-radius:999px;padding:.5rem .9rem;cursor:pointer;transition:filter .3s,transform .3s;white-space:nowrap} .product-card .product-add-btn:hover{filter:brightness(1.08);transform:translateY(-1px)} @media(max-width:1024px){.shop-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){ .shop-grid{grid-template-columns:repeat(2,1fr);gap:1rem;padding:0 1.3rem !important} .product-card .product-name{font-size:1.08rem} .product-card .product-info{padding:.9rem 1rem 1.1rem} } /* fix: force square product image on shop cards (override inherited height:100%) */ .product-card .product-img{aspect-ratio:1/1;height:auto;position:relative} .product-card .product-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* hero focus: show face, not just mouth */ #heroImg{object-position:center 18%;} /* ============================================================ DYNAMIC PRODUCT MODAL (store.js) — same dark luxury palette ============================================================ */ .dyn-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:dynFade .2s} @keyframes dynFade{from{opacity:0}to{opacity:1}} .dyn-modal{background:var(--bg2);border:1px solid var(--line-bright);border-radius:18px;width:100%;max-width:880px;max-height:92vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;position:relative;animation:dynUp .25s cubic-bezier(.2,.8,.2,1)} @keyframes dynUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}} .dyn-close{position:absolute;top:12px;inset-inline-end:12px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid var(--line-bright);color:var(--ivory);font-size:1.3rem;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;transition:all .2s} .dyn-close:hover{background:var(--gold);color:#1a1407} .dyn-img{background:var(--bg3);aspect-ratio:1/1;overflow:hidden} .dyn-img img{width:100%;height:100%;object-fit:cover;display:block} .dyn-info{padding:2.2rem 2rem;display:flex;flex-direction:column;justify-content:center} .dyn-cat{font-family:var(--sans);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--soft);margin-bottom:.6rem} .dyn-name{font-family:var(--serif);font-size:1.9rem;font-weight:500;color:var(--ivory);line-height:1.15;margin:0 0 1rem} .dyn-desc{font-size:.95rem;line-height:1.6;color:var(--soft);margin-bottom:1.5rem} .dyn-price{font-family:var(--sans);font-size:2rem;font-weight:700;color:var(--gold);margin-bottom:1.5rem} .dyn-price small{font-size:1.1rem;opacity:.85;margin-inline-start:.3rem} .dyn-add{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#1a1407;font-family:var(--sans);font-size:.95rem;font-weight:700;letter-spacing:.04em;border:none;border-radius:99px;padding:.95rem 1.6rem;cursor:pointer;transition:filter .25s,transform .2s} .dyn-add:hover{filter:brightness(1.08);transform:translateY(-1px)} @media(max-width:720px){ .dyn-modal{grid-template-columns:1fr;max-width:480px} .dyn-img{aspect-ratio:1/1} .dyn-info{padding:1.5rem} .dyn-name{font-size:1.5rem} .dyn-price{font-size:1.6rem} } /* ===== Dynamic product modal (store.js) ===== */ .sp-overlay{position:fixed;inset:0;background:rgba(8,9,8,.85);backdrop-filter:blur(4px);z-index:9000;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .2s} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .sp-card{background:var(--bg2,#101110);border:1px solid var(--line2,rgba(255,255,255,.13));border-radius:18px;max-width:880px;width:100%;max-height:92vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:0;position:relative;animation:slideUp .3s} @keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}} .sp-close{position:absolute;top:14px;inset-inline-end:14px;width:36px;height:36px;border-radius:50%;background:rgba(7,8,8,.6);border:1px solid rgba(255,255,255,.2);color:var(--ivory,#F5F2EC);font-size:1.5rem;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .2s} .sp-close:hover{background:var(--gold,#C9A84C);color:#1a1407} .sp-img{background:var(--bg3,#181918);overflow:hidden;aspect-ratio:1/1;min-height:360px} .sp-img img{width:100%;height:100%;object-fit:cover;display:block} .sp-body{padding:2.2rem 2rem;display:flex;flex-direction:column;justify-content:center} .sp-cat{font-family:var(--sans,'Inter',sans-serif);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold,#C9A84C);margin-bottom:.6rem} .sp-name{font-family:var(--serif,serif);font-size:2rem;font-weight:500;line-height:1.15;color:var(--ivory,#F5F2EC);margin:0 0 .9rem} .sp-desc{color:var(--soft,#9a9688);font-size:1rem;line-height:1.7;margin-bottom:1.5rem} .sp-foot{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin-top:auto} .sp-price{font-family:var(--sans,'Inter',sans-serif);font-size:2.2rem;font-weight:700;color:var(--gold,#C9A84C);line-height:1} .sp-price small{font-size:1rem;font-weight:600;margin-inline-start:4px;opacity:.85} .sp-add{background:linear-gradient(135deg,var(--gold-l,#e0c06a),var(--gold,#C9A84C));color:#1a1407;font-family:var(--sans,'Inter',sans-serif);font-weight:700;font-size:.95rem;padding:.85rem 1.6rem;border:none;border-radius:99px;cursor:pointer;letter-spacing:.04em;transition:filter .25s,transform .2s} .sp-add:hover{filter:brightness(1.08)} .sp-add:active{transform:scale(.97)} @media(max-width:780px){ .sp-card{grid-template-columns:1fr;max-height:96vh} .sp-img{aspect-ratio:4/3;min-height:240px} .sp-body{padding:1.5rem} .sp-name{font-size:1.55rem} .sp-price{font-size:1.7rem} } /* ===== Service modal with real photo (full, uncropped) ===== */ .modal-hero-photo{height:380px;position:relative;overflow:hidden;background:#0a0807} .modal-hero-photo .mhp-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(28px) brightness(.4);transform:scale(1.18)} .modal-hero-photo .mhp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1} .modal-hero-photo .modal-hero-overlay{z-index:2} @media(max-width:600px){.modal-hero-photo{height:300px}} /* ===== Product card "Details" button (store.js) ===== */ .product-details-btn{display:inline-flex;align-items:center;gap:.35rem;background:transparent;border:1px solid var(--line-bright,rgba(201,168,76,.35));color:var(--gold-light,#e0c06a);font-family:var(--sans,'Inter',sans-serif);font-size:.74rem;font-weight:600;letter-spacing:.03em;padding:.42rem .8rem;border-radius:999px;cursor:pointer;transition:all .25s;white-space:nowrap} .product-details-btn:hover{background:var(--gold,#C9A84C);color:#1a1407;border-color:var(--gold,#C9A84C)} .product-foot-2{display:flex;align-items:center;gap:.5rem;margin-top:.6rem} .product-foot-2 .product-add,.product-foot-2 .product-add-btn{flex:1} /* Blurred backdrop behind service images so contain mode looks premium */ .service-img-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(28px) brightness(.45) saturate(1.1);transform:scale(1.18);z-index:0;pointer-events:none} /* ===== Results & Testimonials section ===== */ .results-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; max-width:1400px; margin:0 auto; padding:0 2rem; } .result-card{ position:relative; background:var(--bg2); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:transform .5s cubic-bezier(.2,.8,.2,1), border-color .5s, box-shadow .5s; } .result-card:hover{ transform:translateY(-6px); border-color:var(--line-bright); box-shadow:0 24px 50px -20px rgba(0,0,0,.7); } .result-img{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#0a0807; } .result-img>img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; transition:transform .8s cubic-bezier(.2,.8,.2,1); } .result-img>img.result-img-bg{ position:absolute; inset:0; object-fit:cover; filter:blur(28px) brightness(.45) saturate(1.1); transform:scale(1.18); z-index:0; pointer-events:none; transition:none; } .result-card:hover .result-img>img:not(.result-img-bg){ transform:scale(1.03); } .result-type{ position:absolute; top:14px; inset-inline-start:14px; z-index:3; font-family:var(--sans,'Inter',sans-serif); font-size:.72rem; font-weight:700; letter-spacing:.08em; padding:.36rem .8rem; border-radius:99px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .result-type-gold{ background:rgba(201,168,76,.85); color:#1a1407; } .result-type-sage{ background:rgba(123,160,138,.85); color:#0a1810; } .result-cap{ padding:1.2rem 1.3rem 1.4rem; border-top:1px solid var(--line); } .result-title{ font-family:var(--serif,serif); font-size:1.15rem; font-weight:500; color:var(--ivory,#F5F2EC); margin-bottom:.4rem; line-height:1.25; } .result-sub{ font-size:.85rem; color:var(--soft,#9a9688); line-height:1.5; } @media(max-width:1100px){ .results-grid{grid-template-columns:repeat(2,1fr); padding:0 1.5rem} } @media(max-width:600px){ .results-grid{grid-template-columns:1fr; gap:1.2rem; padding:0 1rem} .result-cap{padding:1rem 1.1rem 1.2rem} .result-title{font-size:1rem} .result-sub{font-size:.8rem} } /* ==== SAFE FIX BY AMEER/CHATGPT: show service images uncropped only ==== */ .service-img-wrap{ background:#0a0807 !important; } .service-img{ width:100% !important; height:100% !important; object-fit:contain !important; object-position:center center !important; display:block !important; } .service-img-bg{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; filter:blur(28px) brightness(.45) saturate(1.1) !important; transform:scale(1.18) !important; z-index:0 !important; pointer-events:none !important; } .service-hero-img{ background:#0a0807 !important; } .service-hero-img img{ width:100% !important; height:100% !important; object-fit:contain !important; object-position:center center !important; display:block !important; filter:none !important; } .modal-hero-photo .mhp-img{ object-fit:contain !important; object-position:center center !important; }