/*
Theme Name: Para Ella Blog
Theme URI: https://paraella.ae/blog
Author: Para Ella Hair & Nails Ladies Salon
Description: Serves the Para Ella blog inside the paraella.ae design. Loads the live site stylesheet and reuses its class names, so the header, navigation, footer and article layout are the same ones the rest of the website uses and cannot drift apart from it. Adds the article hero, breadcrumb, category tag, reading time, featured image, FAQ block and closing call to action.
Version: 1.6.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: paraella-blog
*/

/* ================= FROZEN COPY OF paraella.ae/css/style.css =================
   Captured 20 August 2026. The blog used to load this file live from the
   website, so any edit to the website stylesheet changed the blog too and a
   deleted or renamed file would have broken it. This copy makes the blog
   independent. To re-sync with a website redesign, replace this block only.
   ========================================================================= */
/* ============================================================
   Para Ella Hair & Nails Ladies Salon — Brand Design System
   Demo/Staging Only — Do NOT deploy to live paraella.ae
   ============================================================ */

/* ── Google Fonts loaded via <link> in HTML head for better performance ── */

/* ── CSS Custom Properties ── */
:root {
  --dark:    #181412;
  --burg:    #4a0d0c;
  --rose:    #8f423c;
  --rose-lt: #c06158; /* rose on dark backgrounds — meets 3:1 for large text */
  --cream:   #dfd6c8;
  --white:   #ffffff;
  --gray:    #5a5a5a; /* darkened from #6b6b6b — body text on gray-lt now 6.0:1 vs 4.62:1 */
  --gray-lt: #f2efe9;

  --font-head: 'Cormorant Garamond', 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-body: 'Poppins', 'Candara', sans-serif;
  --ink:     #1e1212;

  --radius: 2px;
  --shadow: 0 4px 24px rgba(20,20,20,0.10);
  --shadow-sm: 0 2px 8px rgba(20,20,20,0.08);
  --transition: 0.25s ease;

  --max-w: 1180px;
  --section-py: 80px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; font-size: 17px; overflow-x: hidden; color-scheme: only light; }
body {
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
iframe { max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
a, button { touch-action: manipulation; }

/* ── Typography ── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: 1.35rem; }
p  { font-size: 1.05rem; color: var(--gray); }
.lead { font-size: 1.2rem; color: var(--gray); max-width: 640px; }

.section-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose);
  display: block;
  margin-bottom: 12px;
}
.section-burg .section-label { color: var(--cream); } /* rose on burg = 2.23:1 — fails; cream = 7.8:1 */
.section-dark .section-label { color: var(--rose-lt); } /* rose #8f423c on #141414 = 2.64:1 fails; rose-lt = 4.46:1 passes */
.asterisk { color: var(--burg); }

/* ── Layout ── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section    { padding: var(--section-py) 0; }
.section-dark { background: var(--dark); }
.section-cream { background: var(--gray-lt); }
.section-burg  { background: var(--burg); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }

.text-center { text-align: center; }
.text-white  { color: var(--white) !important; }
.text-cream  { color: var(--cream) !important; }
.text-burg   { color: var(--burg) !important; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-40 { margin-bottom: 40px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--burg);
  color: var(--white);
  border: 2px solid var(--burg);
}
.btn-primary:hover {
  background: var(--rose);
  border-color: var(--rose);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(74,13,12,0.3);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--cream);
}
.btn-outline:hover {
  background: var(--cream);
  color: var(--dark);
}
.btn-dark {
  background: var(--dark);
  color: var(--white);
  border: 2px solid var(--dark);
}
.btn-dark:hover { background: var(--burg); border-color: var(--burg); }
.btn-wa {
  background: #0b7a3d;
  color: var(--white);
  border: 2px solid #0b7a3d;
}
.btn-wa:hover { background: #085f2f; border-color: #085f2f; }
.btn-sm { padding: 10px 22px; font-size: 0.8rem; min-height: 44px; }
.btn-lg { padding: 18px 44px; font-size: 0.95rem; }

/* ── Header / Navigation ── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: rgba(20,20,20,0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(223,214,200,0.12);
  transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.4); }

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  /* Explicit gap. With space-between alone, any auto margin on a child absorbs
     all the free space and collapses the logo against the first nav link. */
  gap: 20px;
  height: 72px;
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
}
.nav-logo {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.04em;
}
.nav-logo span { color: var(--rose-lt); }

/* 22px, not 32px. The header now also carries the language switcher, and at the
   old spacing the row exceeded .nav-inner's max-width even on wide screens, so
   the Book Now button was clipped by body{overflow-x:hidden}. */
.nav-links { display: flex; align-items: center; gap: 18px; }
.nav-links a {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
  transition: color var(--transition);
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--rose);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.nav-links a:hover,
.nav-links a.active { color: var(--white); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

.nav-cta { display: flex; gap: 10px; }

/* Menu button.
   Previously three bare 24x2px lines with no container, which read as faint
   scratches on the dark header and were easy to miss. It is now an explicit
   button: a bordered pill with a tinted fill, thicker bars and a 44px tap
   target, deliberately echoing the language switcher pill so the two controls
   read as a matched pair in the header. */
.nav-hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 44px;
  padding: 0;
  border: 1.5px solid rgba(223,214,200,0.45);
  border-radius: 999px;
  background: rgba(223,214,200,0.10);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.nav-hamburger span {
  display: block; width: 21px; height: 2.5px;
  border-radius: 2px;
  background: var(--cream);
  transition: transform 0.28s ease, opacity 0.2s ease, width 0.28s ease;
}
.nav-hamburger:hover { background: rgba(223,214,200,0.22); border-color: var(--cream); }
.nav-hamburger:active { transform: scale(0.96); }
.nav-hamburger:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

/* Open state: the three bars fold into a clear X so it is obvious the same
   control closes the menu. Driven by aria-expanded, so the styling and the
   accessible state can never drift apart. */
.nav-hamburger[aria-expanded="true"] { background: var(--burg); border-color: var(--burg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 950;
  background: var(--dark);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a:not(.btn) {
  font-family: var(--font-head);
  font-size: 1.25rem;
  color: var(--cream);
  letter-spacing: 0.04em;
}
.mobile-nav a:not(.btn):hover { color: var(--white); }
.mobile-nav-close {
  position: absolute; top: 14px; right: 18px;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  color: var(--cream); font-size: 1.5rem; line-height: 1;
}

/* ── Hero ── */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  background: var(--dark);
}
.hero-bg {
  position: absolute; inset: 0;
  background-image: url('https://paraella.ae/images/hero-bg.jpg');
  background-size: cover; background-position: center;
  background-color: #3a0a09;
  opacity: 0.35; /* reduced from 0.45 — image bleeds less through overlay in sunlight */
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(14,14,14,0.93) 0%, rgba(20,20,20,0.90) 45%, rgba(74,13,12,0.72) 100%);
  /* strengthened from 0.85/0.60 — ensures ≥7:1 contrast for white text even on bright screens */
}
.hero-content {
  position: relative; z-index: 2;
  max-width: var(--max-w); margin: 0 auto; padding: 120px 24px 80px;
}
.hero-eyebrow {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px;
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream); margin-bottom: 24px; vertical-align: top;
}
.hero-eyebrow::before { content: ''; display: block; width: 40px; height: 1px; background: var(--rose); margin-bottom: 6px; }
.hero h1 { color: var(--white); max-width: 680px; margin-bottom: 24px; text-shadow: 0 2px 16px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.35); }
.hero h1 em { font-style: italic; color: var(--cream); }
.hero .lead { color: rgba(223,214,200,0.92); margin-bottom: 40px; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-trust {
  display: flex; align-items: center; gap: 24px;
  margin-top: 56px; padding-top: 40px;
  border-top: 1px solid rgba(223,214,200,0.15);
}
.hero-trust-item { text-align: center; }
.hero-trust-num {
  font-family: var(--font-head);
  font-size: 2.2rem; font-weight: 600; color: var(--white);
}
.hero-trust-label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
.hero-trust-divider { width: 1px; height: 48px; background: rgba(223,214,200,0.2); }

/* ── Section Headers ── */
.section-header { max-width: 600px; }
.section-header.centered { max-width: 600px; margin: 0 auto; text-align: center; }
.section-header h2 { margin-bottom: 16px; }
.section-header .lead { margin: 0 auto; }

/* ── Service Cards ── */
.service-card {
  background: var(--white);
  border: 1px solid rgba(20,20,20,0.08);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
  display: flex; flex-direction: column;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--rose);
}
.service-card-img {
  aspect-ratio: 4/3; overflow: hidden;
  background: var(--gray-lt);
  position: relative;
}
.service-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.service-card:hover .service-card-img img { transform: scale(1.04); }
.service-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.service-card-body h3 { font-size: 1.35rem; margin-bottom: 10px; }
.service-card-body p  { font-size: 0.9rem; flex: 1; margin-bottom: 20px; }
.service-card-price {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 20px;
}
.service-card-price .from { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray); }
.service-card-price .amount {
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; color: var(--burg);
}
.service-card-price .currency { font-size: 0.85rem; color: var(--gray); }

/* ── Price Table ── */
.price-table { width: 100%; border-collapse: collapse; }
.price-table th {
  text-align: left; padding: 12px 16px;
  background: var(--dark); color: var(--cream);
  font-family: var(--font-body); font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.price-table td { padding: 12px 16px; border-bottom: 1px solid rgba(20,20,20,0.07); font-size: 0.92rem; }
.price-table tr:last-child td { border-bottom: none; }
.price-table tr:hover td { background: var(--gray-lt); }
.price-table td:last-child { font-weight: 600; color: var(--burg); text-align: right; white-space: nowrap; }
.price-table-wrap { border: 1px solid rgba(20,20,20,0.1); border-radius: var(--radius); overflow: hidden; }

/* ── Testimonials ── */
.testimonial-card {
  background: var(--white);
  border-left: 3px solid var(--rose);
  padding: 28px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.testimonial-stars { color: #8a6000; font-size: 1rem; margin-bottom: 12px; letter-spacing: 2px; } /* darkened from #f4a500 — was 1.98:1, now 5.58:1 on white */
.testimonial-text { font-size: 0.95rem; font-style: italic; color: var(--dark); margin-bottom: 16px; }
.testimonial-author { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.testimonial-source { font-size: 0.75rem; color: var(--gray); }

/* ── Gallery Grid ── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.gallery-item {
  aspect-ratio: 1; overflow: hidden;
  background: var(--gray-lt); position: relative;
  min-height: 200px;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item.tall { grid-row: span 2; aspect-ratio: unset; }
.gallery-item.wide { grid-column: span 2; aspect-ratio: unset; min-height: 200px; }

/* ── FAQ Accordion ── */
.faq-item { border-bottom: 1px solid rgba(20,20,20,0.1); }
.faq-question {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0; gap: 16px;
  font-family: var(--font-head);
  font-size: 1.2rem; font-weight: 600;
  color: var(--dark);
  transition: color var(--transition);
}
.faq-question:hover { color: var(--burg); }
.faq-icon {
  flex-shrink: 0; width: 24px; height: 24px;
  border: 1px solid var(--rose); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--rose);
  transition: transform var(--transition);
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { display: none; padding: 0 0 20px; }
.faq-answer p { font-size: 0.95rem; }
.faq-item.open .faq-answer { display: block; }

/* ── Contact ── */
.contact-form { max-width: 640px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 100%; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; font-weight: 600; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 12px 16px;
  border: 1px solid rgba(20,20,20,0.2);
  border-radius: var(--radius);
  font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color var(--transition);
  background: var(--white);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(143,66,60,0.1);
}
.form-group textarea { resize: vertical; min-height: 120px; }

/* ── Info Strip ── */
.info-strip {
  background: var(--burg); color: var(--cream);
  padding: 14px 0;
}
.info-strip-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.info-strip a { color: var(--cream); }
.info-strip a:hover { color: var(--white); }
.info-strip-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.info-strip-icon { font-size: 1rem; }

/* ── Footer ── */
.site-footer { background: var(--dark); color: var(--cream); padding: 64px 0 0; }
.footer-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px;
}
.footer-brand p { color: var(--cream); font-size: 0.9rem; margin-top: 12px; max-width: 280px; }
.footer-logo {
  font-family: var(--font-head); font-size: 1.8rem; font-weight: 600; color: var(--white);
}
.footer-logo span { color: var(--rose-lt); } /* rose-lt on dark: 4.46:1 vs rose 2.64:1 */
.footer-col h4 {
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--white); margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { color: var(--cream); font-size: 0.9rem; transition: color var(--transition); }
.footer-col ul a:hover { color: var(--white); }
.footer-bottom {
  margin-top: 48px; padding: 20px 24px;
  border-top: 1px solid rgba(223,214,200,0.1);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  max-width: var(--max-w); margin: 48px auto 0;
}
.footer-bottom p { font-size: 0.8rem; color: rgba(223,214,200,0.82); }
.footer-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-socials a {
  width: 40px; height: 40px; border: 1px solid rgba(223,214,200,0.50);
  background: rgba(255,255,255,0.06);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--cream); font-size: 0.85rem; flex-shrink: 0;
  transition: all var(--transition);
}
.footer-socials a svg { width: 16px; height: 16px; display: block; }
.footer-socials a:hover { background: var(--rose); border-color: var(--rose); color: var(--white); }
.footer-wrapper { padding-bottom: 80px; }

/* ── Mobile Sticky Bar ── */
.mobile-sticky {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  background: var(--dark);
  border-top: 1px solid rgba(223,214,200,0.35);
  padding: 10px 16px;
  grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.mobile-sticky-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 8px 4px;
  border-radius: var(--radius);
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cream); font-family: var(--font-body); font-weight: 600;
  transition: all var(--transition);
}
.mobile-sticky-btn:hover { color: var(--white); }
.mobile-sticky-btn.call  { background: var(--burg); color: var(--white); }
.mobile-sticky-btn.wa    { background: #0b7a3d;    color: var(--white); }
.mobile-sticky-btn.book  { background: var(--rose); color: var(--white); }
.mobile-sticky-icon { font-size: 1.2rem; }

/* ── Page Hero (inner pages) ── */
.page-hero {
  padding: 140px 0 70px;
  background: var(--dark);
  text-align: center; position: relative; overflow: hidden;
}
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: #4a0d0c;
  opacity: 0.2; /* reduced from 0.3 — darker base for better text contrast */
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(20,20,20,0.80), rgba(74,13,12,0.68));
  /* strengthened from 0.60/0.50 */
}
.page-hero-content { position: relative; z-index: 2; }
.page-hero h1 { color: var(--white); margin-bottom: 16px; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.page-hero .lead { color: var(--cream); margin: 0 auto; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }

/* ── Breadcrumb ── */
.breadcrumb {
  background: var(--gray-lt); padding: 12px 0;
  border-bottom: 1px solid rgba(20,20,20,0.08);
}
.breadcrumb-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--gray);
}
.breadcrumb-inner a { color: var(--burg); }
.breadcrumb-inner a:hover { color: var(--rose); }
.breadcrumb-sep { color: var(--gray); }

/* ── Offer Cards ── */
.offer-card {
  background: var(--dark); color: var(--white);
  border-radius: var(--radius); padding: 40px 32px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.offer-card > *:last-child { margin-top: auto; }
.offer-card::before {
  content: '*';
  position: absolute; top: -20px; right: 20px;
  font-family: var(--font-head);
  font-size: 10rem; color: rgba(143,66,60,0.12);
  line-height: 1; pointer-events: none;
}
.offer-badge {
  display: inline-block;
  background: var(--rose); color: var(--white);
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 20px; margin-bottom: 16px;
}
.offer-card h3 { font-size: 1.6rem; color: var(--white); margin-bottom: 12px; }
.offer-card p  { color: rgba(223,214,200,0.94); margin-bottom: 24px; }
.offer-discount {
  font-family: var(--font-head); font-size: 3.5rem; font-weight: 700;
  color: var(--cream); line-height: 1; margin-bottom: 8px;
}

/* ── Blog Cards ── */
.blog-card {
  background: var(--white);
  border: 1px solid rgba(20,20,20,0.08);
  border-radius: var(--radius); overflow: hidden;
  transition: all var(--transition);
}
.blog-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.blog-card-img { aspect-ratio: 16/9; overflow: hidden; background: var(--gray-lt); position: relative; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-card-body { padding: 24px; }
.blog-tag {
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rose); font-weight: 600; margin-bottom: 10px; display: block;
}
.blog-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.blog-card h3 a:hover { color: var(--burg); }
.blog-card p { font-size: 0.88rem; margin-bottom: 16px; }
.blog-meta { font-size: 0.78rem; color: var(--gray); }

/* ── Map / Contact Info ── */
.contact-info-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 0; border-bottom: 1px solid rgba(20,20,20,0.08);
}
.contact-info-item:last-child { border-bottom: none; }
.contact-info-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--gray-lt); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--burg);
}
.contact-info-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray); margin-bottom: 4px; }
.contact-info-value { font-size: 0.95rem; font-weight: 600; }
.contact-info-value a { color: var(--burg); }
.contact-info-value a:hover { color: var(--rose); }

/* ── Hours Table ── */
.hours-table { width: 100%; }
.hours-table tr { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(20,20,20,0.07); }
.hours-table tr:last-child { border-bottom: none; }
.hours-table .day { font-size: 0.9rem; color: var(--gray); }
.hours-table .time { font-size: 0.9rem; font-weight: 600; color: var(--dark); }
.hours-table .late { color: var(--burg); }

/* ── Booking Page ── */
.booking-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.booking-option {
  border: 2px solid rgba(20,20,20,0.1);
  border-radius: var(--radius); padding: 32px 24px;
  text-align: center; transition: all var(--transition);
}
.booking-option:hover { border-color: var(--rose); box-shadow: var(--shadow-sm); }
.booking-option .icon { font-size: 2.4rem; margin-bottom: 16px; }
.booking-option h3 { font-size: 1.3rem; margin-bottom: 10px; }
.booking-option p { font-size: 0.88rem; margin-bottom: 24px; }

/* ── About Page ── */
.about-img-wrap {
  position: relative;
  max-width: 100%;
}
.about-img-wrap img { border-radius: var(--radius); }
.about-img-badge {
  position: absolute; bottom: 0; right: 0;
  background: var(--burg); color: var(--white);
  padding: 20px; text-align: center;
  min-width: 100px;
}
.about-img-badge .num {
  font-family: var(--font-head); font-size: 2.4rem; font-weight: 700; line-height: 1;
}
.about-img-badge .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }

.team-card { text-align: center; }
.team-card-img {
  width: 160px; height: 160px; margin: 0 auto 16px;
  border-radius: 50%; overflow: hidden; background: var(--gray-lt);
  border: 3px solid var(--cream);
}
.team-card-img img { width: 100%; height: 100%; object-fit: cover; }
.team-card h4 { margin-bottom: 4px; }
.team-card span { font-size: 0.82rem; color: var(--rose); text-transform: uppercase; letter-spacing: 0.1em; }

/* ── Review Banner ── */
.review-banner {
  background: var(--gray-lt); padding: 32px;
  border-radius: var(--radius); text-align: center;
  border: 1px solid rgba(20,20,20,0.08);
}
.review-stars { font-size: 1.5rem; color: #8a6000; letter-spacing: 4px; margin-bottom: 8px; } /* darkened from #f4a500 — 1.98:1→5.58:1 */
.review-count { font-size: 0.85rem; color: var(--gray); }

/* ── Floating WhatsApp ── */
.wa-float {
  position: fixed; bottom: 90px; right: 24px; z-index: 700;
  width: 56px; height: 56px;
  background: #0b7a3d; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(11,122,61,0.4);
  font-size: 1.6rem;
  transition: transform var(--transition);
}
.wa-float:hover { transform: scale(1.1); }

/* ── Dividers / Decorative ── */
.hr-burg { border: none; height: 2px; background: var(--burg); width: 48px; margin: 20px 0; }
.hr-burg.centered { margin: 20px auto; }
.asterisk-deco {
  font-family: var(--font-head); font-size: 1.5rem;
  color: var(--rose); display: block; margin-bottom: 8px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: repeat(3, 1fr); gap: 32px 40px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --section-py: 48px; }

  /* ── Info strip: hidden on mobile (saves space) ── */
  .info-strip { display: none; }

  /* ── Header ── */
  .nav-inner { height: 60px; padding: 0 16px; }
  .nav-logo { font-size: 1.3rem; }
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }

  /* ── Hero ── */
  .hero { min-height: 88vh; }
  .hero-content { padding: 74px 20px 88px; text-align: center; }
  .hero-eyebrow { margin-left: auto; margin-right: auto; align-items: center; }
  .hero-eyebrow::before { display: none; }
  .hero h1 { max-width: 100%; font-size: clamp(2rem, 8vw, 2.8rem); }
  .hero .lead { margin-left: auto; margin-right: auto; font-size: 1rem; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; padding: 16px 24px; }
  .hero-trust { flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 36px; padding-top: 28px; }
  .hero-trust-divider { display: none; }
  .hero-trust-num { font-size: 1.8rem; }

  /* ── Grids ── */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* ── Service card scroll row ── */
  .services-scroll-row {
    display: flex !important;
    overflow-x: auto;
    gap: 16px;
    margin: 0 -16px;
    padding: 4px 16px 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .services-scroll-row::-webkit-scrollbar { display: none; }
  .services-scroll-row .service-card {
    flex: 0 0 75vw;
    max-width: 290px;
    scroll-snap-align: start;
  }

  /* ── Gallery ── */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.tall, .gallery-item.wide { grid-column: auto; grid-row: auto; aspect-ratio: 1; min-height: unset; }

  /* ── Form inputs (≥16px stops iOS zoom) ── */
  .form-row { grid-template-columns: 1fr; }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 1rem; padding: 14px 16px; }

  /* ── Booking ── */
  .booking-options { grid-template-columns: 1fr; }

  /* ── Buttons: full width in content sections ── */
  .section .btn,
  .page-hero .btn { width: 100%; text-align: center; justify-content: center; }

  /* ── Page hero (inner pages) ── */
  .page-hero { padding: 80px 0 48px; }
  .page-hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }

  /* ── Breadcrumb ── */
  .breadcrumb { display: none; }

  /* ── Offer cards ── */
  .offer-card { padding: 28px 20px; }

  /* ── Footer ── */
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-wrapper { padding-bottom: 80px; }

  /* ── About image badge ── */
  .about-img-badge { bottom: 0; right: 0; }

  /* ── Mobile bottom app bar ── */
  .mobile-sticky {
    display: grid;
    height: 76px;
    padding: 0;
    gap: 0;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(223,214,200,0.35);
    background: var(--dark);
  }
  .mobile-sticky-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 4px 14px;
    height: 76px;
    border-radius: 0;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--cream);
    transition: all var(--transition);
  }
  .mobile-sticky-btn.call  { background: var(--burg); color: var(--white); }
  .mobile-sticky-btn.wa    { background: #0b7a3d;     color: var(--white); }
  .mobile-sticky-btn.book  { background: var(--rose);  color: var(--white); }
  .mobile-sticky-icon { font-size: 1.4rem; line-height: 1; }

  /* ── Floating WhatsApp: hide (bottom bar covers it) ── */
  .wa-float { display: none; }

  /* ── Price table scrollable ── */
  .price-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Text: prevent horizontal overflow ── */
  h1, h2, h3, h4 { overflow-wrap: break-word; word-break: break-word; }
  p, li, td, .lead { overflow-wrap: break-word; }
  .lead { max-width: 100%; }
  .section-header, .section-header.centered { max-width: 100%; }

  /* ── Hours table: wrap day/time on small screens ── */
  .hours-table tr { flex-wrap: wrap; gap: 2px; }
  .hours-table .day { width: 100%; }
  .hours-table .time { padding-left: 0; }

  /* ── Reduce oversized inline gaps on stacked grids ── */
  .grid-2[style*="gap:64px"],
  .grid-2[style*="gap: 64px"] { gap: 32px !important; }

  /* ── Offer pricing: scale down on mobile ── */
  .offer-discount { font-size: 2.2rem; }

  /* ── Buttons: allow text to wrap on narrow screens ── */
  .btn { white-space: normal; }
}

@media (max-width: 480px) {
  :root { --section-py: 40px; }
  .container { padding: 0 16px; }
  /* aspect-ratio:1 transfers min-height:200px into a 200px min-width, which is
     wider than a 2-column track on narrow phones and pushed the right column
     past the viewport. Release the floor; the ratio keeps the tiles square. */
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-item { min-height: 0; }
  .hero-trust { justify-content: center; }
  .offer-card { padding: 24px 16px; }
  .hero-content { padding: 68px 16px 80px; }
  .mobile-sticky-icon { font-size: 1.25rem; }
  .mobile-sticky-btn { font-size: 0.75rem; gap: 4px; }

  /* ── Price row: stack name above duration/price on small screens ── */
  .price-row { padding: 10px 16px; flex-wrap: wrap; gap: 2px; }
  .price-row-name { width: 100%; font-size: 0.86rem; line-height: 1.4; }
  .price-row-meta { width: 100%; justify-content: space-between; }
  .price-row-dur { font-size: 0.76rem; }
  .price-row-price { font-size: 1rem; min-width: auto; }
  .price-list-header { padding: 14px 16px; }
  .price-list-header h3 { font-size: 1rem; }
  .price-list-subcategory-label { padding: 10px 16px 4px; font-size: 0.72rem; }
  .price-list-cta { padding: 14px 16px; }

  /* ── Cat nav: tighter pills on small screens ── */
  .cat-nav { gap: 6px; }
  .cat-nav a { font-size: 0.74rem; padding: 5px 12px; }

  /* ── Page hero: ensure text fits ── */
  .page-hero h1 { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .page-hero .lead { font-size: 0.95rem; }
}

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.6s ease forwards; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

/* ── Image Placeholder (shown when GMB photos not yet added) ── */
.img-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #1e1212 0%, #4a0d0c 60%, #8f423c 100%);
  display: flex; align-items: center; justify-content: center;
  min-height: 180px;
}
.img-ph-inner { text-align: center; padding: 20px; }
.img-ph-icon  { font-size: 2rem; margin-bottom: 8px; opacity: 0.6; }
.img-ph-label {
  font-family: var(--font-head); font-size: 0.9rem; font-weight: 600;
  color: var(--cream); letter-spacing: 0.04em; line-height: 1.4;
  margin-bottom: 6px; max-width: 200px;
}
.img-ph-note  { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); } /* was cream@0.4 on rose gradient — fails; white@0.7 = 5.3:1 */

/* Hero bg fallback when no inline background-image is set.
   Note: do NOT add a [style*="hero-bg.jpg"] selector here. It also matches the
   live, working element (its inline style contains that filename), and the
   `background` shorthand then resets background-size/background-position back
   to auto / 0% 0%, painting the 3635px image at natural size from the top left. */
.hero-bg:not([style*="url"]) {
  background: linear-gradient(135deg, #1e1212, #4a0d0c);
}

/* ── Star Decorative Pattern ── */
.star-deco {
  position: absolute; pointer-events: none; overflow: hidden;
  color: var(--rose); font-family: var(--font-head);
  opacity: 0.07; user-select: none;
}
.star-deco-text {
  font-size: 8rem; line-height: 1; letter-spacing: 0.2em;
  white-space: nowrap;
}
.section-star-bg {
  position: relative; overflow: hidden;
}
.section-star-bg::before {
  content: '* * * * *';
  position: absolute; top: -20px; right: -40px;
  font-family: var(--font-head); font-size: 9rem;
  color: var(--rose); opacity: 0.06;
  letter-spacing: 0.3em; white-space: nowrap;
  pointer-events: none; user-select: none;
}

/* ── Brand Price List ── */
.price-list-wrap {
  background: var(--gray-lt);
  border-radius: var(--radius);
  overflow: hidden;
}
.price-list-category {
  border-bottom: 1px solid rgba(20,20,20,0.08);
}
.price-list-category:last-child { border-bottom: none; }

.price-list-header {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px; gap: 16px;
  background: var(--dark);
  cursor: pointer;
  border: none; font-family: inherit;
}
.price-list-header h3 {
  font-family: var(--font-head);
  font-size: 1.3rem; font-weight: 600;
  color: var(--cream); letter-spacing: 0.02em;
  margin: 0;
}
.price-list-header .plh-icon {
  color: var(--rose); font-size: 1.2rem; flex-shrink: 0;
  transition: transform 0.25s ease;
}
.price-list-category.open .plh-icon { transform: rotate(45deg); }

.price-list-body {
  display: none;
  background: var(--white);
}
.price-list-category.open .price-list-body { display: block; }

.price-list-subcategory {
  padding: 6px 0;
}
.price-list-subcategory-label {
  font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--rose);
  font-weight: 600; padding: 14px 28px 6px;
  border-top: 1px solid var(--gray-lt);
  display: block;
}
.price-list-subcategory:first-child .price-list-subcategory-label {
  border-top: none;
}

.price-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--gray-lt);
  transition: background 0.2s ease;
}
.price-row:last-child { border-bottom: none; }
.price-row:hover { background: #faf8f5; }
.price-row-name {
  font-size: 0.92rem; color: var(--dark); flex: 1;
}
.price-row-meta {
  display: flex; align-items: center; gap: 20px; flex-shrink: 0;
}
.price-row-dur {
  font-size: 0.78rem; color: var(--gray);
  white-space: nowrap;
}
.price-row-dur::before { content: '⏱ '; }
.price-row-price {
  font-family: var(--font-head);
  font-size: 1.1rem; font-weight: 600;
  color: var(--burg); white-space: nowrap;
  min-width: 80px; text-align: right;
}
.price-row-price small {
  font-family: var(--font-body);
  font-size: 0.75rem; font-weight: 400;
  color: var(--gray);
}

.price-list-cta {
  padding: 20px 28px;
  border-top: 1px solid rgba(20,20,20,0.06);
  background: #faf8f5;
}

/* ── Service Detail Page ── */
.service-detail-hero {
  background: var(--dark);
  padding: 140px 0 70px;
  position: relative; overflow: hidden; text-align: center;
}
.service-detail-hero::before {
  content: '*';
  position: absolute; right: -40px; top: -60px;
  font-family: var(--font-head); font-size: 22rem;
  color: var(--rose); opacity: 0.05;
  line-height: 1; pointer-events: none;
}
.service-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: start;
}

/* ── Category Nav Pills ── */
.cat-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 40px;
}
.cat-nav a {
  padding: 8px 18px;
  border: 1px solid rgba(20,20,20,0.15);
  border-radius: 24px;
  font-size: 0.82rem; font-weight: 500;
  color: var(--dark);
  transition: all 0.2s ease;
}
.cat-nav a:hover,
.cat-nav a.active {
  background: var(--burg);
  border-color: var(--burg);
  color: var(--white);
}

/* ── Responsive: price list ── */
@media (max-width: 768px) {
  .price-list-header { padding: 16px 20px; }
  .price-list-header h3 { font-size: 1.1rem; }
  .price-row { padding: 10px 20px; flex-wrap: wrap; gap: 4px; }
  .price-row-meta { gap: 12px; }
  .price-list-subcategory-label { padding: 12px 20px 4px; }
  .price-list-cta { padding: 16px 20px; }
  .service-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .cat-nav { gap: 6px; }
  .cat-nav a { font-size: 0.78rem; padding: 6px 14px; }
}

/* ── Cookie Consent Banner ── */
/* Slim single-row bar. It previously wrapped to 194px on a 375px screen and,
   stacked on the 76px sticky bar, occluded 270px (about 40% of the viewport).
   Keep it on one line: no flex-wrap, text truncates rather than pushing height. */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--dark);
  color: var(--cream);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  z-index: 9999;
  font-size: 0.82rem;
  line-height: 1.4;
  transform: translateY(100%);
  transition: transform 0.35s ease;
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner p { margin: 0; flex: 1 1 auto; min-width: 0; }
.cookie-banner a { color: var(--cream); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.cookie-btn-accept { background: var(--burg); color: #fff; border: none; padding: 8px 20px; cursor: pointer; font-size: 0.82rem; border-radius: 2px; }
.cookie-btn-close  { background: transparent; color: var(--cream); border: 1px solid rgba(223,214,200,0.4); padding: 8px 16px; cursor: pointer; font-size: 0.82rem; border-radius: 2px; }
.cookie-btn-accept:focus-visible,
.cookie-btn-close:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
@media (max-width: 768px) {
  .cookie-banner { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); padding: 8px 12px; gap: 8px; font-size: 0.72rem; }
  .cookie-banner p { line-height: 1.35; }
  /* min-height keeps tap targets usable; banner height is set by the paragraph,
     so raising this to 40px costs no extra vertical space. */
  .cookie-btn-accept { padding: 7px 14px; font-size: 0.75rem; min-height: 40px; }
  .cookie-btn-close  { padding: 7px 11px; font-size: 0.75rem; min-height: 40px; }
}

/* ── Print ── */
@media print {
  .site-header, .mobile-sticky, .wa-float, .info-strip { display: none !important; }
  body { padding: 0; }
}

/* ── Language switcher ──
   Built on <details>/<summary> so it opens with no JavaScript and is keyboard
   accessible by default. Uses logical properties (inset-inline-end) so the same
   rules position it correctly in both LTR and RTL without an override. */
/* The switcher lives directly in .nav-inner, NOT inside .nav-cta, because
   .nav-cta is display:none below 900px. Putting it here keeps it visible at
   every breakpoint, which is the whole point: users could not find it before. */
.lang-switch {
  position: relative;
  flex-shrink: 0;
  /* No auto margin here. .nav-inner supplies the spacing via its gap; an auto
     margin would eat the free space and push the logo into the first nav link. */
}
.lang-switch > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  border: 2px solid var(--burg);
  border-radius: 999px;
  background: var(--burg);
  white-space: nowrap;
  min-height: 40px;
  box-shadow: 0 2px 8px rgba(122,59,94,0.28);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}
.lang-switch > summary .lang-globe { font-size: 1.05rem; line-height: 1; }
.lang-switch > summary:active { transform: translateY(1px); }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::after {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s ease;
}
.lang-switch[open] > summary::after { transform: rotate(180deg); }
.lang-switch > summary:hover { background: var(--dark); border-color: var(--dark); box-shadow: 0 4px 14px rgba(20,20,20,0.3); }
.lang-switch > summary:focus-visible { outline: 3px solid var(--dark); outline-offset: 2px; }

.lang-switch-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 168px;
  background: var(--white);
  border: 1px solid var(--gray-lt);
  border-radius: 3px;
  box-shadow: 0 10px 28px rgba(20,20,20,0.14), 0 2px 6px rgba(20,20,20,0.08);
  padding: 6px 0;
  z-index: 1000;
  list-style: none;
  margin: 0;
}
.lang-switch-menu li { margin: 0; }
.lang-switch-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  font-size: 0.86rem;
  color: var(--dark);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-switch-menu a:hover,
.lang-switch-menu a:focus-visible { background: var(--gray-lt); color: var(--burg); }
.lang-switch-menu a[aria-current="true"] { font-weight: 700; color: var(--burg); }
.lang-switch-menu .lang-native { color: var(--gray); font-size: 0.78rem; }

/* Menu items need a comfortable tap target on phones */
.lang-switch-menu a { min-height: 44px; }

/* Mobile: keep it visible and sized for thumbs, sitting beside the hamburger.
   It must never be hidden here. The previous version was inside .nav-cta, which
   mobile hides entirely, so the control was only reachable through the burger
   menu and effectively nobody found it. */
/* Laptop widths. The header carries logo + 8 nav links + switcher + two CTAs,
   which overflows around 1280px and clips the Book Now button (body has
   overflow-x:hidden, so it fails silently rather than scrolling). Tighten the
   spacing here and drop the switcher to globe plus code, which keeps it just as
   visible while reclaiming roughly 100px. */
/* Collapse the full nav to the burger earlier than before. With the switcher
   added, logo + 8 links + switcher + 2 CTAs no longer fit between about 900 and
   1150px, and the Book Now button was being silently clipped. Below 1150 the
   header is logo + switcher + burger, which always fits. */
@media (max-width: 1150px) {
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .lang-switch { margin-left: auto; }
}

@media (max-width: 1300px) {
  .nav-inner { gap: 12px; padding: 0 16px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 0.74rem; letter-spacing: 0.06em; }
  .lang-switch > summary { padding: 8px 11px; gap: 5px; font-size: 0.78rem; }
  .btn-sm { padding: 8px 14px; font-size: 0.72rem; }
}

@media (max-width: 900px) {
  .lang-switch { margin-left: auto; }   /* nav-links and nav-cta are hidden here, so push it right */
  .lang-switch > summary { padding: 8px 12px; font-size: 0.8rem; min-height: 40px; }
  .lang-switch-menu { min-width: 190px; }
}
@media (max-width: 360px) {
  .lang-switch > summary { padding: 7px 10px; font-size: 0.75rem; gap: 5px; }
  .lang-switch > summary .lang-label { display: none; }
}

/* ── Bilingual / Arabic ── */
[lang="ar"] {
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  direction: rtl;
}
.ar-sub {
  display: block;
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  direction: rtl;
  font-size: 0.82em;
  color: #5a5a5a; /* explicit color replaces opacity:0.65 — fixes fails on white (was 2.59:1, now 6.0:1) */
  margin-top: 5px;
  font-weight: 400;
  letter-spacing: 0;
}
.section-header.centered .ar-sub { text-align: center; }
.hero .ar-sub,
.page-hero .ar-sub,
.section-dark .ar-sub,
.section-burg .ar-sub,
.site-footer .ar-sub { color: rgba(223,214,200,0.82); } /* cream on dark — 10.6:1 */

/* ── Mobile UX Enhancements ── */

/* Button active/tap feedback */
.btn:active         { opacity: 0.82; transform: scale(0.97); }
.mobile-sticky-btn:active { opacity: 0.65; }
.faq-question:active { color: var(--burg); }

/* Keyboard focus — visible outline for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
  border-radius: 2px;
}

/* iOS safe area — mobile sticky bar sits above home indicator */
@media (max-width: 768px) {
  .mobile-sticky {
    height: calc(76px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: start;
  }
  .mobile-sticky-btn { height: 76px; }
  .footer-wrapper { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* svh — iOS Safari dynamic viewport height (eliminates address-bar jump) */
@supports (min-height: 100svh) {
  @media (max-width: 768px) {
    .hero { min-height: 88svh; }
  }
}

/* Landscape mobile — reduce hero height, prevent content cramping */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 100vh; }
  .hero-content { padding: 80px 24px 56px; }
  .hero-trust { margin-top: 20px; padding-top: 16px; }
  .hero-trust-num { font-size: 1.5rem; }
  .hero-trust-divider { height: 32px; }
  .mobile-sticky {
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-sticky-btn { height: 56px; font-size: 0.68rem; gap: 3px; }
  .mobile-sticky-icon { font-size: 1.1rem; }
  .cookie-banner { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .footer-wrapper { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* 360px micro-breakpoint — small Android phones (Galaxy A, Redmi, etc.) */
@media (max-width: 360px) {
  .nav-logo { font-size: 1.2rem; }
  .hero-trust { gap: 10px; }
  .hero-trust-num { font-size: 1.5rem; }
  .hero-trust-label { font-size: 0.68rem; }
  .btn-lg { padding: 16px 24px; font-size: 0.88rem; }
  .mobile-sticky-btn { font-size: 0.68rem; gap: 3px; }
  .mobile-sticky-icon { font-size: 1.2rem; }
  .offer-discount { font-size: 2rem; }
  .footer-bottom { padding: 16px; }
}

/* ── Blog Listing Grid ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(20,20,20,0.08);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none; color: inherit;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(20,20,20,0.12); border-color: rgba(143,66,60,0.2); }
.blog-card-img { aspect-ratio: 16/9; overflow: hidden; background: var(--gray-lt); }
.blog-card-img img { width:100%; height:100%; object-fit:cover; transition: transform 0.4s ease; display:block; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body { flex:1; display:flex; flex-direction:column; padding: 24px 28px 28px; }
.blog-tag { font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--rose); font-weight:600; margin-bottom:10px; display:block; }
.blog-card-body h3 { font-size:1.2rem; margin-bottom:10px; line-height:1.35; color:var(--dark); }
.blog-card-body h3 a { color:inherit; }
.blog-card-body h3 a:hover { color:var(--burg); }
.blog-card-body > p { font-size:0.9rem; line-height:1.65; color:var(--gray); margin-bottom:16px; flex:1; }
.blog-meta { font-size:0.78rem; color:var(--gray); margin-bottom:20px; }
.blog-card-body .btn { align-self:flex-start; margin-top:auto; }
.blog-read-link { font-size:0.82rem; font-weight:600; color:var(--burg); text-decoration:none; letter-spacing:0.03em; margin-top:auto; align-self:flex-start; }
.blog-read-link:hover { color:var(--rose); }

/* ── Blog Article (detail page) ── */
.blog-article-wrap { max-width: 780px; margin: 0 auto; padding: 0 24px 64px; }
.blog-article-header { padding: 48px 0 28px; margin-bottom: 28px; }
.blog-article-header .blog-tag { margin-bottom: 16px; }
.blog-article-header h1 { font-size: clamp(1.8rem, 4vw, 2.75rem); margin-bottom: 18px; line-height: 1.18; color: var(--dark); }
.blog-article-header .blog-meta { font-size: 0.85rem; margin: 0; color: var(--gray); }
.blog-feat-img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); margin-bottom:44px; display:block; box-shadow: 0 4px 24px rgba(20,20,20,0.1); }
.blog-body { font-size:1rem; line-height:1.8; color:var(--dark); }
.blog-body h2 { font-family:var(--font-head); font-size:clamp(1.35rem,2.5vw,1.85rem); color:var(--dark); margin:44px 0 14px; padding-top:20px; border-top:1px solid var(--gray-lt); }
.blog-body h3 { font-family:var(--font-head); font-size:1.3rem; color:var(--dark); margin:28px 0 10px; }
.blog-body p { margin-bottom:18px; }
.blog-body ul, .blog-body ol { margin:0 0 18px 0; padding:0; list-style:none; }
.blog-body ul li, .blog-body ol li { padding:5px 0 5px 22px; position:relative; }
.blog-body ul li::before { content:'*'; color:var(--rose); position:absolute; left:0; font-family:var(--font-head); font-weight:700; }
.blog-body ol { counter-reset: li; }
.blog-body ol li::before { counter-increment:li; content:counter(li)'.'; color:var(--burg); position:absolute; left:0; font-weight:700; font-size:0.85rem; top:6px; }
.blog-body a { color:var(--burg); text-decoration:underline; text-underline-offset:2px; }
.blog-body a:hover { color:var(--rose); }
.blog-body strong { color:var(--dark); }
.blog-highlight { background:var(--gray-lt); border-left:3px solid var(--rose); padding:18px 22px; border-radius:0 var(--radius) var(--radius) 0; margin:28px 0; }
.blog-highlight p { margin:0; font-size:0.95rem; }

/* Blog FAQ section */
.blog-faq-section { background:var(--gray-lt); border-radius:var(--radius); padding:40px; margin:48px 0; }
.blog-faq-section h2 { font-size:1.6rem; margin-bottom:28px; border:none; padding:0; }
.blog-faq-item, .faq-item { border-bottom:1px solid rgba(20,20,20,0.1); padding:18px 0; }
.blog-faq-item:last-child, .faq-item:last-child { border-bottom:none; padding-bottom:0; }
.blog-faq-item h3, .faq-item h3 { font-family:var(--font-body); font-size:0.95rem; font-weight:600; color:var(--dark); margin:0 0 8px; }
.blog-faq-item p, .faq-item p { font-size:0.9rem; color:var(--gray); margin:0; }

/* Blog end CTA */
.blog-end-cta { background:var(--dark); color:var(--cream); padding:48px 40px; border-radius:var(--radius); text-align:center; margin:48px 0; }
.blog-end-cta h2 { color:var(--white); font-size:1.8rem; margin-bottom:10px; }
.blog-end-cta p { color:var(--cream); max-width:440px; margin:0 auto 28px; opacity:0.9; }
.blog-end-cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
@media (max-width:580px) {
  .blog-end-cta { padding:36px 24px; }
  .blog-end-cta h2 { font-size:1.45rem; }
  .blog-faq-section { padding:28px 20px; }
  .blog-article-header { padding:32px 0 20px; }
}

/* Blog breadcrumb & back link */
.blog-back { display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; color:var(--burg); margin-bottom:24px; }
.blog-back:hover { color:var(--rose); }
.blog-sidebar { position:sticky; top:100px; align-self:start; }
.blog-layout { display:grid; grid-template-columns:1fr 280px; gap:64px; align-items:start; }
@media (max-width:1024px) { .blog-layout { grid-template-columns:1fr; } .blog-sidebar { display:none; } }

/* Featured post — compact horizontal strip */
.blog-featured {
  display:grid; grid-template-columns:360px 1fr; gap:0;
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); margin-bottom:56px;
  border:1px solid rgba(20,20,20,0.08);
}
.blog-featured-img { aspect-ratio:4/3; overflow:hidden; max-height:280px; }
.blog-featured-img img { width:100%; height:100%; object-fit:cover; transition: transform 0.4s ease; }
.blog-featured:hover .blog-featured-img img { transform:scale(1.04); }
.blog-featured-body { padding:32px 36px; display:flex; flex-direction:column; justify-content:center; background:var(--white); }
.blog-featured-body .blog-tag { margin-bottom:10px; }
.blog-featured-body h2 { font-size:1.45rem; margin-bottom:10px; line-height:1.3; }
.blog-featured-body h2 a { color:var(--dark); }
.blog-featured-body h2 a:hover { color:var(--burg); }
.blog-featured-body p { font-size:0.9rem; line-height:1.6; color:var(--gray); margin-bottom:16px; }
.blog-featured-body .blog-meta { margin-bottom:18px; }
@media (max-width:768px) {
  .blog-featured { grid-template-columns:1fr; }
  .blog-featured-img { aspect-ratio:16/9; max-height:none; }
  .blog-featured-body { padding:24px; }
}

/* Reduced motion — respect OS preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .service-card:hover .service-card-img img,
  .blog-card:hover .blog-card-img img,
  .gallery-item:hover img { transform: none; }
  .service-card:hover, .blog-card:hover { transform: none; }
}

/* Prevent horizontal overflow on any screen — belt-and-suspenders */
body { max-width: 100vw; }
.container { width: 100%; }
img, video, iframe { max-width: 100%; }

/* ── Premium Online Booking CTA (book.html) ── */
.premium-cta-section {
  padding: 56px 0 32px;
  background: linear-gradient(180deg, #fbf7f2 0%, var(--white) 100%);
}
.premium-cta-card {
  position: relative;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(192,97,88,0.06) 0%, rgba(192,97,88,0) 55%),
    linear-gradient(180deg, #ffffff 0%, #fbf7f2 100%);
  border: 1px solid rgba(74,13,12,0.10);
  border-left: 3px solid var(--burg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 48px 56px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
  overflow: hidden;
}
.premium-cta-card::before {
  content: "*";
  position: absolute;
  top: 18px;
  right: 28px;
  font-family: var(--font-head);
  font-size: 2.4rem;
  color: var(--rose);
  opacity: 0.35;
  line-height: 1;
}
.premium-cta-text .section-label { color: var(--rose); }
.premium-cta-text h2 {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 600;
  color: var(--burg);
  line-height: 1.15;
  margin: 8px 0 12px;
}
.premium-cta-text .hr-burg { margin: 14px 0 18px; }
.premium-cta-text p {
  font-size: 1.02rem;
  color: var(--gray);
  margin-bottom: 22px;
  max-width: 520px;
}
.premium-cta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.premium-cta-tag {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(74,13,12,0.18);
  border-radius: 20px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--burg);
}
.premium-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.premium-cta-actions .btn { justify-content: center; }
.premium-cta-note {
  font-size: 0.78rem;
  color: var(--gray);
  text-align: center;
  margin: 4px 0 0;
}
.premium-cta-note strong { color: var(--burg); font-weight: 600; }

@media (max-width: 760px) {
  .premium-cta-section { padding: 40px 0 24px; }
  .premium-cta-card {
    grid-template-columns: 1fr;
    padding: 32px 22px;
    gap: 24px;
    text-align: center;
  }
  .premium-cta-card::before { top: 12px; right: 16px; font-size: 1.8rem; }
  .premium-cta-text .hr-burg { margin-left: auto; margin-right: auto; }
  .premium-cta-text p { margin-left: auto; margin-right: auto; }
  .premium-cta-tags { justify-content: center; }
  .premium-cta-actions .btn { width: 100%; }
}

/* ── Burgundy outline button (for light backgrounds) ── */
.btn-outline-burg {
  background: transparent;
  color: var(--burg);
  border: 2px solid var(--burg);
}
.btn-outline-burg:hover {
  background: var(--burg);
  color: var(--white);
}

/* ── Luxury Beauty Experience (homepage) ── */
.luxury-beauty {
  background: linear-gradient(180deg, var(--white) 0%, #fbf7f2 100%);
}
.luxury-beauty-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  background: var(--white);
  border: 1px solid rgba(74,13,12,0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.luxury-beauty-media {
  position: relative;
  height: 100%;
  min-height: 460px;
  overflow: hidden;
}
.luxury-beauty-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s ease;
}
.luxury-beauty-card:hover .luxury-beauty-media img { transform: scale(1.03); }
.luxury-beauty-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,20,18,0.0) 55%, rgba(24,20,18,0.35) 100%);
  pointer-events: none;
}
.luxury-beauty-media-tag {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(74,13,12,0.85);
  padding: 7px 14px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.luxury-beauty-text {
  padding: 56px 56px 56px 0;
}
.luxury-beauty-text .section-label { color: var(--rose); }
.luxury-beauty-text h2 {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--burg);
  line-height: 1.2;
  margin: 8px 0 4px;
}
.luxury-beauty-text .hr-burg { margin: 16px 0 18px; }
.luxury-beauty-text .lead {
  font-size: 1.08rem;
  color: var(--dark);
  margin-bottom: 14px;
  max-width: none;
}
.luxury-beauty-text p {
  font-size: 0.98rem;
  color: var(--gray);
  margin-bottom: 22px;
}
.luxury-beauty-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.luxury-beauty-keywords span {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid rgba(74,13,12,0.18);
  border-radius: 20px;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--burg);
  background: #fbf7f2;
}
.luxury-beauty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 900px) {
  .luxury-beauty-card { grid-template-columns: 1fr; }
  .luxury-beauty-media { min-height: 320px; max-height: 420px; }
  .luxury-beauty-text { padding: 36px 28px 40px; }
}
@media (max-width: 760px) {
  .luxury-beauty-media { min-height: 260px; }
  .luxury-beauty-media img { object-position: center 30%; }
  .luxury-beauty-text { padding: 28px 20px 32px; text-align: left; }
  .luxury-beauty-actions { flex-direction: column; }
  .luxury-beauty-actions .btn { width: 100%; }
}


/* == pe-boost additions, 16 Aug 2026 ==================================== */

/* While the consent bar is open on a phone, hide the sticky action bar and
   let the consent bar sit at the true bottom, so the two never stack.
   Total fixed overlay while consent is open: one 44px bar instead of 164px. */
@media (max-width: 768px) {
  body.pe-cb-open .mobile-sticky { transform: translateY(110%); transition: transform 0.3s ease; }
  body.pe-cb-open .cookie-banner { bottom: env(safe-area-inset-bottom, 0px); }
  .mobile-sticky { transition: transform 0.3s ease; }
}

/* Price rows are now real links into the booking flow. Keep the flex layout
   they had as divs, inherit text colour, add visible interactive states. */
a.price-row { color: inherit; text-decoration: none; cursor: pointer; }
a.price-row .price-row-name::after {
  content: ' \203A';
  color: var(--rose);
  font-weight: 600;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
a.price-row:hover { background: var(--gray-lt); }
a.price-row:hover .price-row-name::after { opacity: 1; }
a.price-row:hover .price-row-name { color: var(--burg); }
a.price-row:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; background: var(--gray-lt); }
a.price-row:active { opacity: 0.8; }
/* ===================== END FROZEN SITE CSS ===================== */


/* The site's own stylesheet carries the header, navigation, footer, buttons,
   colours and fonts. Only what the hand built pages did not have is defined
   here. */

.pe-hero{background:linear-gradient(135deg,#2b0f18 0%,#5a1626 55%,#7a2236 100%);
color:#fff;padding:54px 0 46px;margin:0 0 34px}
.pe-hero-inner{max-width:1140px;margin:0 auto;padding:0 24px}
.pe-chip{display:inline-block;background:rgba(255,255,255,.14);color:#f6d9a8;
border:1px solid rgba(246,217,168,.45);border-radius:999px;padding:6px 16px;
font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;margin-bottom:18px}
.pe-hero h1{color:#fff;margin:0 0 18px;font-size:clamp(1.9rem,4vw,3rem);line-height:1.18}
.pe-hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
font-size:.93rem;color:rgba(255,255,255,.82);margin-bottom:26px}
.pe-hero-meta span{display:inline-flex;align-items:center;gap:7px}
.pe-hero-btns{display:flex;flex-wrap:wrap;gap:12px}
.pe-hero-rule{height:4px;width:190px;border-radius:4px;margin-top:28px;
background:linear-gradient(90deg,#e0a44b 0%,#7a2236 100%)}

.pe-wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.pe-feat{width:100%;height:auto;border-radius:14px;display:block;margin:0 0 30px}
.pe-body{font-size:1.02rem;line-height:1.78}
.pe-body h2{margin:34px 0 14px}
.pe-body h3{margin:26px 0 10px}
.pe-body ul,.pe-body ol{margin:0 0 18px 22px}
.pe-body li{margin-bottom:8px}

.pe-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:28px;margin:0 0 40px}
.pe-card{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:14px;
overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.pe-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.09);transform:translateY(-3px)}
.pe-card-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#f2f2f2}
.pe-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.pe-card-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.pe-card-tag{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
font-weight:700;color:#7a2236;margin-bottom:9px}
.pe-card h2{font-size:1.16rem;line-height:1.35;margin:0 0 10px}
.pe-card h2 a{color:inherit;text-decoration:none}
.pe-card h2 a:hover{color:#7a2236}
.pe-card p{font-size:.94rem;line-height:1.62;margin:0 0 14px;opacity:.85}
.pe-card-meta{margin-top:auto;font-size:.84rem;opacity:.62}

.pe-pager{display:flex;gap:10px;justify-content:center;margin:10px 0 50px}
.pe-pager .page-numbers{padding:9px 16px;border:1px solid rgba(0,0,0,.12);
border-radius:8px;text-decoration:none;color:inherit}
.pe-pager .page-numbers.current{background:#7a2236;color:#fff;border-color:#7a2236}

@media(max-width:640px){.pe-hero{padding:38px 0 32px}.pe-hero-btns .btn{width:100%;text-align:center}}

/* v1.1.0 justified article text */
.pe-body{text-align:justify;text-justify:inter-word}
.pe-body h1,.pe-body h2,.pe-body h3,.pe-body h4{text-align:left}
.blog-faq-section .faq-item{text-align:justify}
.blog-faq-section .faq-item h3,.blog-faq-section h2{text-align:left}
.pe-body figcaption{text-align:left}
@media(max-width:640px){.pe-body,.blog-faq-section .faq-item{hyphens:auto;-webkit-hyphens:auto}}
/* v1.1.0 in-article video */
.pe-video{margin:26px 0;text-align:center}
.pe-video video{max-width:100%;width:auto;height:auto;max-height:600px;border-radius:14px;display:inline-block;background:#000}

/* v1.2.0 visible bold citation and article links */
.pe-body a{color:#7a2236;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.pe-body a:hover{color:#5a1626}

/* v1.4.0 author box */
.pe-author{display:flex;gap:22px;align-items:flex-start;background:#faf7f3;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:26px 28px;margin:34px 0 46px}
.pe-author-img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0}
.pe-author-name{font-weight:700;font-size:1.15rem;color:#7a2236;text-decoration:underline;text-underline-offset:2px}
.pe-author-role{margin:4px 0 10px;font-size:.92rem;opacity:.75}
.pe-author-bio{margin:0 0 12px;font-size:.97rem;line-height:1.65}
.pe-author-more{font-weight:600;color:#7a2236;text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){.pe-author{flex-direction:column;align-items:center;text-align:center}}