/* ────────────────────────────────────────────────────────────────────────
   Glamora — standalone luxury pages (About / Contact)
   Self-contained design system: does not read any variable from glamora.html
   so these pages render correctly even opened on their own.
   ──────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root{
  /* Same warm-espresso brand palette as the main site, redefined locally. */
  --rose:#B8364E;--rose2:#8F2039;--rose3:#CC5C72;
  --gold:#A87840;--gold2:#C89A5C;--gold3:#E8C88A;
  --dark:#0C0906;--dark2:#131009;--dark3:#1C1810;--dark4:#252018;
  --glass:rgba(248,238,218,0.045);--glass2:rgba(248,238,218,0.08);--glass3:rgba(248,238,218,0.13);
  --border:rgba(200,160,100,0.16);--border2:rgba(200,160,100,0.09);
  --t1:#F3EBDD;--t2:#C7B49C;--t3:#8C775F;
  --shadow-contact:0 2px 10px rgba(0,0,0,.35);
  --shadow-ambient:0 24px 64px -20px rgba(0,0,0,.6);
  --radius-lg:22px;--radius-xl:30px;
  --ease:cubic-bezier(.16,1,.3,1);
  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:48px;--sp-6:64px;--sp-7:96px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body.luxury{
  margin:0;
  min-height:100dvh;
  background:var(--dark);
  color:var(--t1);
  font-family:"Vazirmatn",system-ui,sans-serif;
  direction:rtl;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.luxury > *:not(.lx-page-gradient){position:relative;z-index:1}

a{color:inherit}
::selection{background:var(--rose);color:#fff}

/* ── Top bar ─────────────────────────────────────────────────────────── */
.lx-topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  min-height:76px;padding:12px clamp(18px,4vw,56px);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(12,9,6,.96);
  border-bottom:1px solid var(--border2);
}
.lx-brand{
  font-family:"Playfair Display",serif;
  font-weight:600;font-size:19px;letter-spacing:.04em;color:var(--t1);
  text-decoration:none;
  display:flex;align-items:center;gap:8px;
}
.lx-brand img{width:24px;height:24px;object-fit:contain;display:block;flex:0 0 auto}
.lx-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--t2);text-decoration:none;
  padding:9px 16px;border-radius:100px;
  border:1px solid var(--border2);background:var(--glass);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.lx-back:hover{background:var(--glass3);color:var(--t1);border-color:var(--border)}
.lx-back svg{width:15px;height:15px}

/* ── Hero ────────────────────────────────────────────────────────────── */
.lx-hero{
  position:relative;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:76px 20px 56px;
  isolation:isolate;
  overflow:hidden;
}
.lx-page-gradient{
  --lx-gradient-full-height:calc(100vh - 76px);
  --lx-gradient-reveal:340px;
  position:absolute;top:76px;right:0;left:0;z-index:0;overflow:hidden;
  height:var(--lx-gradient-full-height);
  pointer-events:none;
  opacity:.82;
  background:#1A1A1D;
  border-radius:0 0 36px 36px;
  clip-path:inset(0 0 calc(100% - var(--lx-gradient-reveal)) 0 round 0 0 36px 36px);
  will-change:clip-path;
}
.lx-gradient-canvas{display:block;width:100%;height:100%;pointer-events:none}
.lx-hero-veil{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:rgba(26,26,29,.38);
}
.lx-hero > :not(.lx-hero-veil){position:relative;z-index:1}
.lx-kicker{
  font-family:"Playfair Display",serif;font-style:italic;font-weight:500;
  font-size:clamp(13px,1.6vw,16px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold2);margin-bottom:22px;
  opacity:1;
}
.lx-hero h1{
  margin:0;font-weight:800;line-height:1.08;
  font-size:clamp(38px,7vw,72px);
  letter-spacing:-0.01em;
  color:var(--t1);
  opacity:1;
}
.lx-hero p{
  margin:26px 0 0;max-width:640px;
  font-size:clamp(15px,2vw,19px);line-height:1.85;color:var(--t2);
  opacity:1;
}
@keyframes lxFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
  .lx-kicker,.lx-hero h1,.lx-hero p{animation:none;opacity:1}
}

.lx-scrolldown{display:none}

/* ── Sections & container ───────────────────────────────────────────── */
.lx-section{padding:var(--sp-7) clamp(18px,5vw,56px)}
.lx-container{max-width:1080px;margin:0 auto}
.lx-eyebrow{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--rose3);
  font-weight:600;margin:0 0 14px;
}
.lx-h2{
  font-size:clamp(28px,4.2vw,46px);font-weight:800;line-height:1.25;margin:0 0 18px;color:var(--t1);
}
.lx-lead{font-size:clamp(15px,1.6vw,18px);line-height:1.9;color:var(--t2);max-width:70ch}

/* ── Glass surfaces ──────────────────────────────────────────────────── */
.lx-glass{
  background:var(--glass2);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:var(--shadow-contact), var(--shadow-ambient);
  position:relative;overflow:hidden;
}
.lx-glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg, rgba(232,200,138,.35), rgba(232,200,138,0) 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}

.lx-story{padding:clamp(28px,5vw,56px);}
.lx-story blockquote{
  margin:0 0 22px;font-family:"Playfair Display",serif;font-style:italic;font-weight:500;
  font-size:clamp(20px,2.6vw,30px);line-height:1.55;color:var(--t1);
  border-inline-start:3px solid var(--rose);padding-inline-start:20px;
}
.lx-story-scroll{
  overflow:visible;
  background:
    radial-gradient(circle at 18% 8%, rgba(184,54,78,.18), transparent 34%),
    radial-gradient(circle at 88% 78%, rgba(232,200,138,.12), transparent 36%),
    var(--glass2);
}
.lx-story-scroll::after{
  content:"";position:absolute;inset:auto 10% -1px 10%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,200,138,.55), transparent);
  pointer-events:none;
}
.lx-story-lines{
  display:grid;gap:14px;margin-top:28px;
  counter-reset:story-line;
}
.lx-story-line{
  counter-increment:story-line;
  margin:0;position:relative;overflow:hidden;
  padding:18px 56px 18px 20px;border-radius:20px;
  font-size:clamp(22px,3.2vw,36px);font-weight:800;line-height:1.45;color:var(--t1);
  background:linear-gradient(135deg, rgba(248,238,218,.08), rgba(248,238,218,.025));
  border:1px solid rgba(200,160,100,.11);
  box-shadow:0 14px 38px -26px rgba(0,0,0,.9);
}
.lx-story-line::before{
  content:counter(story-line, decimal-leading-zero);
  position:absolute;inset:18px 18px auto auto;
  font-family:"Playfair Display",serif;font-size:18px;font-weight:700;color:var(--gold3);
  text-shadow:0 0 22px rgba(232,200,138,.35);
}
.lx-story-line::after{
  content:"";position:absolute;inset:0 auto 0 -45%;width:36%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform:skewX(-18deg);opacity:0;
}
.lx-story-line.reveal{
  transform:translateY(42px) scale(.985);
  filter:blur(10px);opacity:0;
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease),border-color .9s var(--ease);
}
.lx-story-line.reveal.is-visible{
  transform:translateY(0) scale(1);
  filter:blur(0);opacity:1;border-color:rgba(232,200,138,.23);
}
.lx-story-line.reveal.is-visible::after{animation:lxStoryShine 1.2s var(--ease) .18s both}
@keyframes lxStoryShine{
  0%{opacity:0;transform:translateX(0) skewX(-18deg)}
  25%{opacity:1}
  100%{opacity:0;transform:translateX(420%) skewX(-18deg)}
}
@media (prefers-reduced-motion: reduce){
  .lx-story-line.reveal{filter:none;transform:none}
  .lx-story-line.reveal.is-visible::after{animation:none}
}

/* ── Pillars grid ────────────────────────────────────────────────────── */
.lx-grid{
  display:grid;gap:var(--sp-3);margin-top:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.lx-pillar{
  padding:var(--sp-4);
  transform-style:preserve-3d;will-change:transform;
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.lx-pillar:hover{border-color:var(--gold)}
.lx-pillar .icon{
  width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  background:linear-gradient(135deg, rgba(184,54,78,.22), rgba(168,120,64,.18));
  color:var(--gold3);
}
.lx-pillar .icon svg{width:22px;height:22px}
.lx-pillar h3{margin:0 0 8px;font-size:17px;font-weight:700;color:var(--t1)}
.lx-pillar p{margin:0;font-size:13.5px;line-height:1.8;color:var(--t3)}

/* ── Contact cards ───────────────────────────────────────────────────── */
.lx-contact-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:var(--sp-5)}
.lx-contact-card{padding:var(--sp-4);display:flex;flex-direction:column;gap:10px;text-decoration:none}
.lx-contact-card .icon{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--glass3);color:var(--gold3);
}
.lx-contact-card .icon svg{width:20px;height:20px}
.lx-contact-card .label{font-size:12px;color:var(--t3);letter-spacing:.04em}
.lx-contact-card .value{font-size:15px;font-weight:700;color:var(--t1);direction:ltr;text-align:right}

.lx-cta{
  margin-top:var(--sp-6);padding:clamp(32px,6vw,64px);
  text-align:center;
  background:linear-gradient(155deg, rgba(184,54,78,.14), rgba(168,120,64,.10));
}
.lx-cta h3{margin:0 0 12px;font-size:clamp(22px,3vw,32px);font-weight:800}
.lx-cta p{margin:0 auto 28px;max-width:52ch;color:var(--t2);font-size:15px;line-height:1.8}
.lx-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;border-radius:100px;
  background:linear-gradient(135deg,var(--rose),var(--rose2));
  color:#fff;font-weight:700;font-size:14.5px;text-decoration:none;
  box-shadow:0 10px 30px -8px rgba(184,54,78,.55);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.lx-btn:hover{transform:translateY(-2px);box-shadow:0 14px 38px -8px rgba(184,54,78,.7)}
.lx-btn svg{width:17px;height:17px}
.lx-btn.ghost{
  background:var(--glass3);color:var(--t1);box-shadow:none;border:1px solid var(--border);
}
.lx-btn.ghost:hover{border-color:var(--gold)}

.lx-note{margin-top:14px;font-size:12px;color:var(--t3)}

/* ── Footer ──────────────────────────────────────────────────────────── */
.lx-footer{
  padding:var(--sp-5) clamp(18px,5vw,56px) var(--sp-6);
  text-align:center;color:var(--t3);font-size:12px;
  border-top:1px solid var(--border2);
}
.lx-footer a{color:var(--t2);text-decoration:none;margin:0 10px}
.lx-footer a:hover{color:var(--t1)}

/* ── Scroll-reveal (JS toggles .is-visible) ─────────────────────────── */
.reveal{opacity:1;transform:none}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:640px){
  .lx-section{padding:56px 18px}
  .lx-story blockquote{padding-inline-start:14px}
  .lx-topbar{padding:14px 16px}
  .lx-brand{font-size:17px;gap:6px}
  .lx-brand img{width:22px;height:22px}
  .lx-back{padding:8px 11px;font-size:11px}
}
@media (min-width:1024px){
  .lx-page-gradient{opacity:.88}
}
@media (prefers-reduced-motion: reduce){
  .lx-page-gradient{clip-path:inset(0 0 calc(100% - 340px) 0 round 0 0 36px 36px)}
}