/* Palm Grove website refresh inspired by website_look.png */
:root {
  --pg-bg:#ECE9E1;
  --pg-bg-2:#E6E1D8;
  --pg-panel:#F6F3EC;
  --pg-white:#FFFFFF;
  --pg-brown:#B97C4A;
  --pg-brown-deep:#814420;
  --pg-brown-dark:#5A3013;
  --pg-ink:#3F1E0E;
  --pg-muted:#CFC8BE;
  --pg-radius-lg:22px;
  --pg-radius:16px;
  --pg-radius-sm:12px;
  --pg-shadow:0 18px 42px rgba(63,30,14,.12);
  --pg-shadow-soft:0 10px 32px rgba(63,30,14,.08);
  --pg-leading:1.7;
  --pg-font-display:"Cormorant Garamond","Playfair Display",Georgia,serif;
  --pg-font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --pg-font-ar:"Cairo","Noto Kufi Arabic",system-ui;
  --pg-maxw:1080px;
}

*,*::before,*::after { box-sizing:border-box; }

html { font-size:16px; scroll-behavior:smooth; }

body {
  margin:0;
  min-height:100vh;
  font-family:var(--pg-font-body);
  color:var(--pg-ink);
  background:var(--pg-bg);
  line-height:var(--pg-leading);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' fill='%23f3f0e8'/%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
  background-size:360px 360px;
  opacity:.38;
  mix-blend-mode:multiply;
  z-index:-1;
}

:root[dir="rtl"] body { font-family:var(--pg-font-ar); }

::selection { background:color-mix(in srgb,var(--pg-brown) 25%,white); }

a { color:inherit; text-decoration:none; transition:color .2s ease; }

a:hover { color:var(--pg-brown-deep); }

a:focus-visible, button:focus-visible { outline:2px solid var(--pg-brown); outline-offset:3px; border-radius:6px; }

img { max-width:100%; display:block; height:auto; }

.container { width:min(100% - 2.5rem, var(--pg-maxw)); margin-inline:auto; }

header.top-bar {
  position:sticky;
  top:0;
  inset-inline:0;
  z-index:20;
  background:color-mix(in srgb,var(--pg-bg) 92%, transparent);
  border-bottom:1px solid rgba(63,30,14,.06);
  backdrop-filter:saturate(160%) blur(12px);
}

.top-nav {
  padding-block:.9rem;
}

.top-nav ul {
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(.75rem,4vw,2rem);
  flex-wrap:wrap;
  font-weight:600;
  letter-spacing:.015em;
  color:color-mix(in srgb,var(--pg-ink) 86%, var(--pg-brown-dark) 14%);
}

.top-nav__link { position:relative; padding:.25rem .4rem; }

.top-nav__link::after {
  content:"";
  position:absolute;
  inset-inline:10%;
  bottom:0;
  height:2px;
  background:color-mix(in srgb,var(--pg-brown) 65%, transparent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease;
}

.top-nav__link:hover::after,
.top-nav__link:focus-visible::after { transform:scaleX(1); }

.top-nav__logo a {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.25rem;
  text-align:center;
  font-family:var(--pg-font-display);
  color:var(--pg-brown-dark);
  font-size:1.05rem;
}

.top-nav__logo img {
  width:72px;
  height:auto;
  filter:drop-shadow(0 8px 12px rgba(63,30,14,.18));
}

.top-nav__logo small {
  font-family:var(--pg-font-ar);
  font-size:.9rem;
  letter-spacing:.04em;
  color:color-mix(in srgb,var(--pg-brown-dark) 80%, black 10%);
}

.icon-link { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; background:rgba(129,68,32,.12); color:var(--pg-brown-dark); font-size:1.1rem; }

main { display:flex; flex-direction:column; gap:0; }

.hero {
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(63,30,14,.08);
}

.hero__figure {
  margin:0;
  position:relative;
}

.hero__figure img {
  width:100%;
  height:clamp(420px,70vh,620px);
  object-fit:cover;
  object-position:center;
}

.hero__figure::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.45) 82%);
}

.hero__caption {
  position:absolute;
  bottom:12%;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
  padding:1.8rem 2.8rem;
  border-radius:var(--pg-radius-sm);
  background:linear-gradient(120deg,rgba(231, 201, 185, 0.226),rgba(231, 201, 185, 0.226));
  color:var(--pg-white);
  text-align:center;
  box-shadow:var(--pg-shadow);
  min-width:min(94%,520px);
}

.hero__tag {
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.82rem;
  opacity:.85;
}

.hero__title {
  margin:0;
  font-family:var(--pg-font-display);
  font-size:clamp(2.3rem,6vw,3.4rem);
  letter-spacing:.8px;
}

.hero__subtitle {
  margin:0;
  font-size:1.1rem;
  letter-spacing:.08em;
}

section { padding-block:clamp(3rem,6vw,4.5rem); }

section + section { border-top:1px solid rgba(63,30,14,.08); }

.section-heading {
  font-family:var(--pg-font-display);
  color:var(--pg-brown-dark);
  font-size:clamp(1.8rem,3.4vw,2.4rem);
  margin:0 0 1.2rem;
}

.section-kicker {
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.78rem;
  color:color-mix(in srgb,var(--pg-brown-dark) 60%, black 12%);
  margin-bottom:.75rem;
}

p { margin:0 0 1rem; max-width:70ch; }

.story {
  background:var(--pg-panel);
}

.story__grid {
  display:grid;
  gap:clamp(2rem,5vw,3.2rem);
  align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.story__gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem;
}

.story__gallery img {
  width:100%;
  border-radius:var(--pg-radius);
  box-shadow:var(--pg-shadow-soft);
  border:1px solid rgba(63,30,14,.08);
  object-fit:cover;
  height:170px;
}

.story__signature {
  font-family:var(--pg-font-display);
  font-size:1.2rem;
  color:var(--pg-brown);
}

.highlight {
  background:var(--pg-bg);
}

.products__grid {
  display:grid;
  gap:clamp(1.2rem,3vw,1.8rem);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.card {
  background:var(--pg-white);
  border-radius:var(--pg-radius);
  border:1px solid rgba(63,30,14,.08);
  box-shadow:var(--pg-shadow-soft);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.card__image img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

.card__body {
  padding:1.4rem 1.6rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.card__title {
  margin:0;
  font-family:var(--pg-font-display);
  font-size:1.45rem;
  color:var(--pg-brown-dark);
}

.card__meta { font-size:.9rem; color:color-mix(in srgb,var(--pg-ink) 78%, black 10%); }

.btn {
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.4rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--pg-brown) 55%, black 10%);
  background:linear-gradient(120deg,color-mix(in srgb,var(--pg-brown) 86%,white),color-mix(in srgb,var(--pg-brown) 60%,var(--pg-brown-dark) 40%));
  color:var(--pg-brown-dark);
  font-weight:600;
  letter-spacing:.02em;
  box-shadow:var(--pg-shadow-soft);
  transition:transform .2s ease, box-shadow .2s ease;
}

.btn:hover { transform:translateY(-2px); box-shadow:var(--pg-shadow); }

.contact {
  background:var(--pg-panel);
  text-align:center;
}

.contact .container { display:grid; gap:2rem; justify-items:center; }

.contact__card {
  max-width:620px;
  background:var(--pg-white);
  border-radius:var(--pg-radius-lg);
  padding:clamp(1.8rem,5vw,2.6rem);
  border:1px solid rgba(63,30,14,.08);
  box-shadow:var(--pg-shadow-soft);
}

.contact__list {
  list-style:none;
  margin:1.5rem 0 0;
  padding:0;
  display:grid;
  gap:.75rem;
  color:color-mix(in srgb,var(--pg-ink) 80%, black 12%);
}

.contact__list strong { color:var(--pg-brown-dark); }

footer.site-footer {
  padding-block:2.5rem 2rem;
  background:linear-gradient(180deg,var(--pg-panel),var(--pg-bg));
  border-top:1px solid rgba(63,30,14,.08);
}

.footer__grid {
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  align-items:start;
}

.footer__brand {
  display:flex;
  align-items:center;
  gap:1rem;
}

.footer__brand img { width:64px; height:auto; }

.footer__brand span {
  font-family:var(--pg-font-display);
  font-size:1.4rem;
  color:var(--pg-brown-dark);
}

.footer__brand small {
  display:block;
  font-family:var(--pg-font-ar);
  color:color-mix(in srgb,var(--pg-brown-dark) 72%, black 12%);
  letter-spacing:.04em;
}

.footer__meta { font-size:.9rem; color:color-mix(in srgb,var(--pg-ink) 70%, black 10%); }

.footer__legal { margin-top:1.5rem; font-size:.85rem; color:color-mix(in srgb,var(--pg-ink) 65%, black 8%); }

.socials {
  display:flex;
  gap:.75rem;
  margin-top:1rem;
}

.socials a { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(129,68,32,.12); color:var(--pg-brown-dark); font-size:1rem; }

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width:780px) {
  .hero__caption {
    bottom:8%;
    padding:1.4rem 1.8rem;
    min-width:min(92%,470px);
  }
  .hero__figure img { height:clamp(360px,62vh,520px); }
}

@media (max-width:640px) {
  .top-nav ul { gap:1rem; }
  .top-nav__logo img { width:62px; }
  .hero__caption { gap:.3rem; padding:1.2rem 1.4rem; min-width:85%; }
  .hero__title { font-size:clamp(2rem,9vw,2.6rem); }
  .story__gallery { grid-template-columns:1fr; }
  .story__gallery img { height:200px; }
  .contact__card { padding:1.6rem; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

:root[dir="rtl"] .top-nav ul { flex-direction:row-reverse; }
:root[dir="rtl"] .top-nav__logo a { writing-mode:vertical-rl; }
:root[dir="rtl"] .story__grid { direction:rtl; }
:root[dir="rtl"] .story__gallery { direction:ltr; }
:root[dir="rtl"] .products__grid { direction:rtl; }