/* =========================================================
   خریدار موی طبیعی — Stylesheet
   Design tokens + layout + components
   ========================================================= */

/* ---------------------------------------------------------
   Vazir, self-hosted.
   Was an @import from Google Fonts, which is slow-to-unreachable on many
   Iranian networks — and an @import blocks rendering until it resolves or
   times out, so a blocked CDN meant a blank page, not just a fallback font.
   Three weights only (400/500/700); the stylesheet asks for 600 and 800 in
   places and the browser maps those to 700, which is what we want anyway.
   font-display:swap paints text immediately in the fallback face.
--------------------------------------------------------- */
@font-face{
  font-family: 'Vazir';
  src: url("../fonts/vazir-400.ea0968dcee21.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Vazir';
  src: url("../fonts/vazir-500.0a3bc5ee1d3a.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Vazir';
  src: url("../fonts/vazir-700.0c503e15fdff.woff2") format('woff2');
  /* Claim the 600-800 range so headings at 800 use the real Bold file
     instead of a synthesised (smeared) one. */
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

:root{
  /* ---- Color ---- */
  --color-bg:        #FBF8F4;
  --color-bg-band:   #F2E9DC;
  --color-ink:       #241C16;
  --color-ink-soft:  #5C5045;
  --color-ink-faint: #8C7F70;
  --color-primary:   #3E2A1F;
  --color-primary-deep: #241608;
  --color-accent:    #DB8A3B;
  --color-accent-deep: #A85A1F;
  --color-accent-hot: #C2450F;
  --color-accent-soft: #F0D9AE;
  --color-surface:   #FFFFFF;
  --color-line:      #E3D6C2;
  --color-line-deep: rgba(255,255,255,0.14);
  --color-success:   #6B7F52;
  --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hot) 100%);

  /* ---- Type ---- */
  --font-base: 'Vazir', Tahoma, 'Segoe UI', sans-serif;
  --fs-h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.3vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-tight: 1.25;
  --lh-normal: 1.7;

  /* ---- Layout ---- */
  --container: 1180px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --space-section: clamp(3.5rem, 3rem + 2vw, 6.5rem);
  --header-h: 76px;

  --shadow-soft: 0 10px 30px -14px rgba(36, 24, 12, 0.25);
  --shadow-card: 0 6px 20px -10px rgba(36, 24, 12, 0.18);
}

/* ---------------------------------------------------------
   Reset
--------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }
h1,h2,h3,h4,p{ margin: 0; }
section{ scroll-margin-top: var(--header-h); }

:focus-visible{
  outline: 2.5px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ---------------------------------------------------------
   Motion — keyframes + stagger utility
--------------------------------------------------------- */
@keyframes floatY{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-16px); } }
@keyframes floatYSlow{ 0%,100%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(12px) scale(1.05); } }
@keyframes blobMove{
  0%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(24px,-28px) scale(1.08); }
  66%{ transform: translate(-18px,16px) scale(0.94); }
  100%{ transform: translate(0,0) scale(1); }
}
@keyframes shineSweep{
  0%{ transform: translateX(-130%) skewX(-12deg); }
  100%{ transform: translateX(230%) skewX(-12deg); }
}
@keyframes heroFadeUp{
  from{ opacity: 0; transform: translateY(26px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes popIn{
  from{ opacity: 0; transform: scale(0.82); }
  to{ opacity: 1; transform: scale(1); }
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.stagger > *:nth-child(1){ transition-delay: 0ms; }
.stagger > *:nth-child(2){ transition-delay: 70ms; }
.stagger > *:nth-child(3){ transition-delay: 140ms; }
.stagger > *:nth-child(4){ transition-delay: 210ms; }
.stagger > *:nth-child(5){ transition-delay: 280ms; }
.stagger > *:nth-child(6){ transition-delay: 350ms; }
.stagger > *:nth-child(7){ transition-delay: 420ms; }
.stagger > *:nth-child(8){ transition-delay: 490ms; }

.hero-decor{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-decor span{
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.35;
  animation: blobMove 14s ease-in-out infinite;
}
.hero-decor span:nth-child(1){
  width: 260px; height: 260px;
  top: -40px; left: 8%;
  background: var(--gradient-accent);
}
.hero-decor span:nth-child(2){
  width: 320px; height: 320px;
  bottom: -80px; right: 4%;
  background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
  opacity: 0.18;
  animation-duration: 18s;
  animation-delay: -4s;
}
.hero .container{ position: relative; z-index: 1; }

.band{ background: var(--color-bg-band); }
.band-dark{ background: var(--color-primary-deep); color: #F3ECE1; }
.band-dark .section-eyebrow{ color: var(--color-accent-soft); }

.section-head{
  max-width: 640px;
  margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3.2rem);
}
.section-head.center{ margin-inline: auto; text-align: center; }
.section-kicker{
  display: inline-block;
  font-size: var(--fs-small);
  color: var(--color-accent-deep);
  font-weight: 600;
  margin-bottom: 0.6rem;
  position: relative;
}
.section-kicker::after{
  content: "";
  display: block;
  width: 30px;
  height: 2.5px;
  margin-top: 0.4rem;
  border-radius: 2px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1) 0.15s;
}
.section-head.center .section-kicker::after{ margin-inline: auto; transform-origin: center; }
.reveal.is-visible .section-kicker::after{ transform: scaleX(1); }
.band-dark .section-kicker{ color: var(--color-accent-soft); }
.section-title{
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
.section-desc{
  margin-top: 0.9rem;
  color: var(--color-ink-soft);
  font-size: 1.02rem;
  line-height: var(--lh-normal);
}
.band-dark .section-desc{ color: #CBBFAF; }

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 1.5px solid transparent;
  transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn:active{ transform: translateY(1px) scale(0.98); }
.btn-primary{
  background: var(--gradient-accent);
  color: #2B1300;
  box-shadow: 0 10px 24px -12px rgba(194,69,15,0.55);
}
.btn-primary::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-130%) skewX(-12deg);
}
.btn-primary:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 30px -12px rgba(194,69,15,0.65);
}
.btn-primary:hover::after{ animation: shineSweep 0.9s ease; }
.btn-outline{
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-outline:hover{ background: rgba(219,138,59,0.12); transform: translateY(-3px); }
.btn-ghost{
  background: var(--color-surface);
  border-color: var(--color-line);
  color: var(--color-ink);
}
.btn-ghost:hover{ border-color: var(--color-accent); color: var(--color-accent-deep); transform: translateY(-2px); }
.btn-block{ width: 100%; }
.btn-sm{ padding: 0.65rem 1.2rem; font-size: 0.9rem; }
.btn svg{ width: 18px; height: 18px; flex-shrink: 0; }

/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */
.site-header{
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: var(--header-h);
  z-index: 500;
  display: flex;
  align-items: center;
  background: rgba(251, 248, 244, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled{
  background: rgba(251, 248, 244, 0.92);
  border-color: var(--color-line);
  box-shadow: 0 8px 24px -18px rgba(36,24,12,0.3);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand{
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--color-primary);
}
.brand-mark{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent-soft);
  flex-shrink: 0;
}
.brand-mark svg{ width: 20px; height: 20px; }
.brand-text small{
  display: block;
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--color-ink-faint);
  margin-top: 1px;
}

.main-nav{ display: flex; }
.main-nav ul{ display: flex; align-items: center; gap: 2rem; }
.main-nav a{
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.2s ease;
}
.main-nav a::after{
  content: "";
  position: absolute;
  right: 0; left: 0; bottom: -2px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
.main-nav a:hover{ color: var(--color-primary); }
.main-nav a:hover::after{ transform: scaleX(1); }

.header-actions{ display: flex; align-items: center; gap: 0.8rem; }

.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-line);
  background: var(--color-surface);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-toggle-bars{ position: relative; width: 18px; height: 13px; }
.nav-toggle-bars span{
  position: absolute;
  right: 0; left: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.nav-toggle-bars span:nth-child(1){ top: 0; }
.nav-toggle-bars span:nth-child(2){ top: 5.5px; }
.nav-toggle-bars span:nth-child(3){ top: 11px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){ top: 5.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){ top: 5.5px; transform: rotate(-45deg); }

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */
.hero{
  padding-top: calc(var(--header-h) + clamp(2rem, 1.5rem + 2vw, 4rem));
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4.5rem);
  position: relative;
}
.hero .container{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  align-items: center;
}
.hero-copy{ max-width: 560px; }
.hero-badges,
.hero-title,
.hero-subtitle,
.hero-ctas,
.hero-trust,
.hero-visual{
  opacity: 0;
  animation: heroFadeUp 0.8s cubic-bezier(.2,.7,.3,1) forwards;
}
.hero-badges{ animation-delay: 0.05s; }
.hero-title{ animation-delay: 0.15s; }
.hero-subtitle{ animation-delay: 0.28s; }
.hero-ctas{ animation-delay: 0.4s; }
.hero-trust{ animation-delay: 0.52s; }
.hero-visual{ animation-delay: 0.25s; }
.hero-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}
.hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-accent-soft);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  transition: transform 0.25s ease;
}
.hero-badge:hover{ transform: translateY(-2px) scale(1.04); }
.hero-title{
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--color-primary);
}
.hero-subtitle{
  margin-top: 1.3rem;
  font-size: 1.08rem;
  color: var(--color-ink-soft);
  max-width: 480px;
}
.hero-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}
.hero-trust{
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-line);
}
.hero-trust-item{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-ink-soft);
}
.hero-trust-item svg{ width: 19px; height: 19px; color: var(--color-accent-deep); flex-shrink: 0; }

.hero-visual{ position: relative; }
.hero-visual-frame{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 5;
}
.hero-visual-frame img{ width: 100%; height: 100%; object-fit: cover; }
.hero-float-card{
  position: absolute;
  bottom: -1.1rem;
  right: 1.5rem;
  left: 1.5rem;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  animation: floatY 5s ease-in-out 1.1s infinite;
}
.hero-float-card .icon-circle{
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent-deep);
  flex-shrink: 0;
}
.hero-float-card .icon-circle svg{ width: 21px; height: 21px; }
.hero-float-card strong{ display: block; font-size: 0.95rem; }
.hero-float-card span{ font-size: 0.8rem; color: var(--color-ink-faint); }

/* ---------------------------------------------------------
   Stats
--------------------------------------------------------- */
.stats{ padding-block: clamp(2.6rem, 2.2rem + 1.5vw, 4rem); }
.stats-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.stat-item{ text-align: center; }
.stat-number{
  font-size: clamp(1.9rem, 1.6rem + 1vw, 2.6rem);
  font-weight: 800;
  color: var(--color-accent-soft);
  letter-spacing: -0.01em;
}
.stat-item.is-visible .stat-number{ animation: popIn 0.55s cubic-bezier(.34,1.56,.64,1) both; }
.stat-label{
  margin-top: 0.4rem;
  font-size: 0.88rem;
  color: #CBBFAF;
}

/* ---------------------------------------------------------
   About
--------------------------------------------------------- */
.about{ padding-block: var(--space-section); }
.about .container{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 1.6rem + 2vw, 4rem);
  align-items: center;
}
.about-visual{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4/5;
}
.about-visual img{ width: 100%; height: 100%; object-fit: cover; }
.about-badge{
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  background: rgba(36,22,8,0.72);
  backdrop-filter: blur(6px);
  color: #F3ECE1;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.about-content .owner-line{
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent-deep);
  margin-bottom: 0.6rem;
}
.about-list{
  margin-top: 1.6rem;
  display: grid;
  gap: 0.9rem;
}
.about-list li{
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.96rem;
  color: var(--color-ink-soft);
}
.about-list svg{ width: 20px; height: 20px; color: var(--color-accent-deep); flex-shrink: 0; margin-top: 2px; }

/* ---------------------------------------------------------
   Services
--------------------------------------------------------- */
.services{ padding-block: var(--space-section); }
.services-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.service-card{
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 1.7rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(.2,.8,.3,1);
}
.service-card::before{
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 3px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s ease;
}
.service-card:hover{
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-6px);
}
.service-card:hover::before{ transform: scaleX(1); }
.service-icon{
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
.service-card:hover .service-icon{ transform: scale(1.12) rotate(-6deg); }
.service-icon svg{ width: 24px; height: 24px; }
.service-card h3{ font-size: 1.08rem; font-weight: 700; margin-bottom: 0.55rem; }
.service-card p{ font-size: 0.92rem; color: var(--color-ink-soft); }

/* ---------------------------------------------------------
   Why choose us
--------------------------------------------------------- */
.why{ padding-block: var(--space-section); }
.why-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.why-card{
  padding: 1.5rem 1.3rem;
  border-radius: var(--radius-md);
  background: var(--color-bg-band);
  transition: transform 0.3s cubic-bezier(.2,.8,.3,1), box-shadow 0.3s ease;
}
.why-card:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
}
.why-icon{
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-accent-deep);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.9rem;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), background-color 0.3s ease, color 0.3s ease;
}
.why-card:hover .why-icon{
  transform: scale(1.1) rotate(6deg);
  background: var(--gradient-accent);
  color: #2B1300;
}
.why-icon svg{ width: 21px; height: 21px; }
.why-card h3{ font-size: 0.98rem; font-weight: 700; margin-bottom: 0.4rem; }
.why-card p{ font-size: 0.86rem; color: var(--color-ink-soft); }

/* ---------------------------------------------------------
   Pricing
--------------------------------------------------------- */
.pricing{ padding-block: var(--space-section); }
.pricing-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
@keyframes badgePulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(219,138,59,0.45); }
  50%{ box-shadow: 0 0 0 6px rgba(219,138,59,0); }
}
.price-card{
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.4rem;
  text-align: center;
  position: relative;
  transition: transform 0.3s cubic-bezier(.2,.8,.3,1), box-shadow 0.3s ease;
}
.price-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-card); }
.price-card.is-featured{
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card);
  transform: scale(1.03);
}
.price-card.is-featured:hover{ transform: scale(1.03) translateY(-5px); }
.price-card.is-featured::before{
  content: "پرتقاضا";
  position: absolute;
  top: -12px; right: 50%;
  transform: translateX(50%);
  background: var(--gradient-accent);
  color: #2B1300;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  animation: badgePulse 2.4s ease-in-out infinite;
}
.price-length{ font-size: 0.88rem; color: var(--color-ink-faint); font-weight: 600; }
.price-amount{
  margin-top: 0.5rem;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-primary);
}
.price-amount span{ font-size: 0.8rem; font-weight: 500; color: var(--color-ink-faint); }
.price-desc{ margin-top: 0.7rem; font-size: 0.85rem; color: var(--color-ink-soft); }

.price-notice{
  margin-top: 1.8rem;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.1rem 1.3rem;
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: 0.92rem;
  font-weight: 500;
}
.price-notice svg{ width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }

/* ---------------------------------------------------------
   Price factors
--------------------------------------------------------- */
.factors{ padding-block: var(--space-section); }
.factors-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.factor-item{
  text-align: center;
  padding: 1.4rem 1rem;
}
.factor-ring{
  width: 64px; height: 64px;
  margin-inline: auto;
  border-radius: 50%;
  border: 1.5px solid var(--color-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent-deep);
  margin-bottom: 0.9rem;
  background: var(--color-surface);
}
.factor-ring svg{ width: 28px; height: 28px; }
.factor-item h3{ font-size: 0.94rem; font-weight: 700; }
.factor-item p{ margin-top: 0.3rem; font-size: 0.82rem; color: var(--color-ink-faint); }

/* ---------------------------------------------------------
   How it works
--------------------------------------------------------- */
.steps{ padding-block: var(--space-section); }
.steps-list{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.steps-list::before{
  content: "";
  position: absolute;
  top: 26px;
  right: 10%; left: 10%;
  height: 1.5px;
  background: var(--color-line);
}
.step-item{
  position: relative;
  padding-inline: 0.8rem;
  text-align: center;
}
.step-number{
  width: 52px; height: 52px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  position: relative;
  z-index: 1;
  margin-bottom: 1rem;
}
.step-item h3{ font-size: 0.94rem; font-weight: 700; margin-bottom: 0.35rem; }
.step-item p{ font-size: 0.82rem; color: var(--color-ink-soft); }

/* ---------------------------------------------------------
   Gallery
--------------------------------------------------------- */
.gallery{ padding-block: var(--space-section); }
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 0.9rem;
}
.gallery-item{
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
}
.gallery-item:nth-child(3n+1){ grid-row: span 2; }
.gallery-item img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(.2,.8,.3,1);
}
.gallery-item:hover img{ transform: scale(1.12) rotate(-1deg); }
.gallery-item::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(36,22,8,0) 55%, rgba(36,22,8,0.55) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item:hover::after{ opacity: 1; }
.gallery-item .gallery-zoom{
  position: absolute;
  bottom: 0.8rem; left: 0.8rem;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery-item:hover .gallery-zoom{ opacity: 1; transform: translateY(0); }
.gallery-item .gallery-zoom svg{ width: 16px; height: 16px; }

/* Lightbox */
.lightbox{
  position: fixed; inset: 0;
  z-index: 900;
  background: rgba(20, 12, 4, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.lightbox.is-open{ opacity: 1; visibility: visible; }
.lightbox img{
  max-width: min(90vw, 760px);
  max-height: 84vh;
  border-radius: var(--radius-md);
  object-fit: contain;
}
.lightbox-close{
  position: absolute;
  top: 1.4rem; left: 1.4rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.25);
}
.lightbox-close svg{ width: 20px; height: 20px; }
.lightbox-nav{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
}
.lightbox-nav svg{ width: 20px; height: 20px; }
.lightbox-prev{ right: 1.2rem; }
.lightbox-next{ left: 1.2rem; }

/* ---------------------------------------------------------
   Service areas
--------------------------------------------------------- */
.areas{ padding-block: var(--space-section); }
.areas-marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.areas-track{
  display: flex;
  width: max-content;
  gap: 0.9rem;
  animation: marquee 22s linear infinite;
}
.areas-marquee:hover .areas-track{ animation-play-state: paused; }
.area-chip{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  white-space: nowrap;
  transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.area-chip:hover{
  transform: translateY(-3px);
  border-color: var(--color-accent);
  color: var(--color-primary);
}
.area-chip svg{ width: 16px; height: 16px; color: var(--color-accent-deep); }

/* ---------------------------------------------------------
   Testimonials
--------------------------------------------------------- */
.testimonials{ padding-block: var(--space-section); }
.testimonials-track{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}
.testimonial-card{
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.4rem;
  transition: transform 0.35s cubic-bezier(.2,.8,.3,1), box-shadow 0.35s ease;
}
.testimonial-card:hover{
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: var(--shadow-soft);
}
.testimonial-card:nth-child(even):hover{ transform: translateY(-6px) rotate(0.6deg); }
.testimonial-stars{
  display: flex;
  gap: 0.2rem;
  color: var(--color-accent);
  margin-bottom: 0.9rem;
}
.testimonial-stars svg{ width: 16px; height: 16px; }
.testimonial-text{ font-size: 0.94rem; color: var(--color-ink-soft); line-height: 1.75; }
.testimonial-person{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.2rem;
}
.testimonial-avatar{
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.testimonial-person strong{ display: block; font-size: 0.9rem; }
.testimonial-person span{ font-size: 0.78rem; color: var(--color-ink-faint); }

/* ---------------------------------------------------------
   FAQ
--------------------------------------------------------- */
.faq{ padding-block: var(--space-section); }
.faq-list{
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: 0.8rem;
}
.faq-item{
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  background: none;
  border: none;
  text-align: right;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--color-ink);
}
.faq-question .faq-plus{
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--color-line);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.faq-question .faq-plus::before,
.faq-question .faq-plus::after{
  content: "";
  position: absolute;
  background: var(--color-primary);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq-question .faq-plus::before{ width: 10px; height: 1.5px; }
.faq-question .faq-plus::after{ width: 1.5px; height: 10px; }
.faq-item.is-open .faq-question .faq-plus{ transform: rotate(45deg); border-color: var(--color-accent); }
.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-answer-inner{
  padding: 0 1.3rem 1.3rem;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
  line-height: 1.75;
}

/* ---------------------------------------------------------
   Final CTA
--------------------------------------------------------- */
.final-cta{
  padding-block: clamp(3rem, 2.5rem + 2vw, 5.5rem);
  background: var(--color-primary-deep);
  color: #F3ECE1;
  position: relative;
  overflow: hidden;
}
.final-cta::before{
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(219,138,59,0.32), transparent 70%);
  animation: blobMove 16s ease-in-out infinite;
}
.final-cta .container{ position: relative; text-align: center; }
.final-cta-title{
  font-size: var(--fs-h2);
  font-weight: 800;
  max-width: 620px;
  margin-inline: auto;
}
.final-cta-desc{
  margin-top: 1rem;
  color: #CBBFAF;
  max-width: 520px;
  margin-inline: auto;
}
.final-cta-actions{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.2rem;
}

/* ---------------------------------------------------------
   Contact
--------------------------------------------------------- */
.contact{ padding-block: var(--space-section); }
.contact-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.contact-card{
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.contact-card .icon-circle{
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
  display: flex; align-items: center; justify-content: center;
}
.contact-card .icon-circle svg{ width: 21px; height: 21px; }
.contact-card h3{ font-size: 0.9rem; color: var(--color-ink-faint); font-weight: 600; }
.contact-card p{ font-size: 1rem; font-weight: 600; color: var(--color-ink); }
.contact-card a.btn{ margin-top: auto; align-self: flex-start; }

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
.site-footer{
  background: var(--color-primary-deep);
  color: #CBBFAF;
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 1.6rem;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.2rem;
}
.footer-brand .brand{ color: #F3ECE1; }
.footer-brand p{
  margin-top: 0.9rem;
  font-size: 0.88rem;
  line-height: 1.75;
  max-width: 280px;
  color: #A99B89;
}
.footer-col h4{
  font-size: 0.92rem;
  font-weight: 700;
  color: #F3ECE1;
  margin-bottom: 1rem;
}
.footer-col ul{ display: grid; gap: 0.65rem; }
.footer-col a{
  font-size: 0.88rem;
  color: #A99B89;
  transition: color 0.2s ease;
}
.footer-col a:hover{ color: var(--color-accent-soft); }
.footer-areas{ display: flex; flex-wrap: wrap; gap: 0.4rem; }
.footer-areas span{
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  color: #A99B89;
}
.footer-bottom{
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.8rem;
  color: #8C7F70;
}
.footer-social{ display: flex; gap: 0.7rem; }
.footer-social a{
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
}
.footer-social svg{ width: 16px; height: 16px; }

/* ---------------------------------------------------------
   Mobile sticky CTA
--------------------------------------------------------- */
.mobile-sticky-cta{
  display: none;
  position: fixed;
  bottom: 0; right: 0; left: 0;
  z-index: 480;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  padding: 0.7rem 0.9rem;
  gap: 0.7rem;
  box-shadow: 0 -8px 24px -18px rgba(36,24,12,0.35);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.mobile-sticky-cta.is-visible{ transform: translateY(0); }
.mobile-sticky-cta .btn{ flex: 1; }

/* ---------------------------------------------------------
   Reveal animation (single orchestrated pattern)
--------------------------------------------------------- */
/* Only hide reveal elements once JS is confirmed running (main.js sets
   .js-ready on <html>). Without this, a JS error or a blocked script would
   leave the whole page invisible to readers — and to a rendering crawler. */
.js-ready .reveal{
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.65s cubic-bezier(.2,.8,.3,1), transform 0.65s cubic-bezier(.2,.8,.3,1);
}
.js-ready .reveal.is-visible{ opacity: 1; transform: translateY(0) scale(1); }

/* Counter animation handled via JS text update; no extra CSS needed */

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width: 1024px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
  .pricing-grid{ grid-template-columns: repeat(2, 1fr); }
  .testimonials-track{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
}

@media (max-width: 860px){
  .main-nav{ display: none; }
  .nav-toggle{ display: flex; }
  .header-actions .btn-primary.btn-sm.header-cta-desktop{ display: none; }

  .hero .container{ grid-template-columns: 1fr; }
  .hero-visual{ order: -1; max-width: 420px; margin-inline: auto; }
  .hero-copy{ max-width: 100%; }
  .hero-float-card{ position: static; margin-top: 1rem; }

  .about .container{ grid-template-columns: 1fr; }
  .about-visual{ max-width: 380px; margin-inline: auto; }

  .stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; }
  .steps-list{ grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
  .steps-list::before{ display: none; }

  body{ padding-bottom: 68px; }
  .mobile-sticky-cta{ display: flex; }
}

@media (max-width: 640px){
  .services-grid{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .gallery-item:nth-child(3n+1){ grid-row: span 1; }
  .hero-badges{ gap: 0.4rem; }
  .hero-trust{ gap: 1rem; }
  .testimonials-track{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding-bottom: 0.5rem; margin: 0 -1.5rem; padding-inline: 1.5rem; }
  .testimonial-card{ min-width: 84%; scroll-snap-align: start; }
}

/* ---------------------------------------------------------
   Mobile nav drawer
--------------------------------------------------------- */
.mobile-drawer{
  position: fixed;
  inset: 0;
  z-index: 600;
  visibility: hidden;
}
.mobile-drawer.is-open{ visibility: visible; }
.mobile-drawer-backdrop{
  position: absolute; inset: 0;
  background: rgba(20,12,4,0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-drawer.is-open .mobile-drawer-backdrop{ opacity: 1; }
.mobile-drawer-panel{
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: min(78vw, 320px);
  background: var(--color-bg);
  padding: 1.6rem 1.5rem;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.mobile-drawer.is-open .mobile-drawer-panel{ transform: translateX(0); }
.mobile-drawer-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.8rem;
}
.mobile-drawer-close{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-line);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface);
}
.mobile-drawer-close svg{ width: 18px; height: 18px; }
.mobile-drawer nav ul{ display: grid; gap: 1.3rem; }
.mobile-drawer nav a{ font-size: 1.05rem; font-weight: 600; color: var(--color-primary); }
.mobile-drawer .btn{ margin-top: 1.8rem; }

/* =========================================================
   Blog, city pages and shared content components
   Added with the blog + local-SEO pages. Reuses the tokens
   at the top of this file — no new colours introduced.
   ========================================================= */

/* ---- Accessibility helpers ---------------------------- */
.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;
}
.skip-link{
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--color-primary);
  color: #F3ECE1;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top 0.2s ease;
}
.skip-link:focus{ top: 0; }

.container-narrow{ max-width: 760px; }
.center{ text-align: center; }
.empty-note{ color: var(--color-ink-faint); text-align: center; padding: 2.5rem 0; }

/* ---- Breadcrumbs -------------------------------------- */
.breadcrumbs{
  padding-top: calc(var(--header-h) + 1.1rem);
  padding-bottom: 0.2rem;
  font-size: 0.82rem;
  color: var(--color-ink-faint);
}
.breadcrumbs ol{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.breadcrumbs li{ display: flex; align-items: center; gap: 0.45rem; }
/* The separator is decorative, so it is generated rather than marked up. */
.breadcrumbs li + li::before{
  content: "‹";
  color: var(--color-line);
}
.breadcrumbs a{ color: var(--color-ink-soft); }
.breadcrumbs a:hover{ color: var(--color-accent-deep); }
.breadcrumbs [aria-current]{ color: var(--color-ink); font-weight: 600; }
/* Pages without breadcrumbs still need to clear the fixed header. */
.page-blog main > section:first-child,
.page-areas main > section:first-child,
.page-city main > section:first-child,
.page-article main > article:first-child{ padding-top: 1.5rem; }

/* ---- Page hero (blog index, city index) ---------------- */
.page-hero{
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.4rem) clamp(2.2rem, 2rem + 2vw, 3.6rem);
}
.page-hero .section-head{ max-width: 720px; }
.page-hero h1.section-title{ margin-bottom: 0.6rem; }

/* ---- Search + chips ------------------------------------ */
.blog-search{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 0.45rem 0.45rem 0.45rem 0.45rem;
  padding-inline-start: 1.1rem;
  max-width: 520px;
  margin-top: 1.8rem;
  box-shadow: var(--shadow-card);
}
.blog-search:focus-within{ border-color: var(--color-accent); }
.blog-search svg{ width: 18px; height: 18px; color: var(--color-ink-faint); flex-shrink: 0; }
.blog-search input{
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0.55rem 0;
}
.blog-search input:focus{ outline: none; }

.chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.5rem;
}
.chip-row.center{ justify-content: center; }
.chip{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-line);
  background: var(--color-surface);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
a.chip:hover{
  border-color: var(--color-accent);
  color: var(--color-accent-deep);
  transform: translateY(-2px);
}
.chip.is-active{
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #F3ECE1;
}
.chip svg{ width: 14px; height: 14px; }

/* ---- Article cards ------------------------------------- */
.blog-body{ padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.blog-result-note{ color: var(--color-ink-soft); margin-bottom: 1.8rem; }
.blog-result-note a{ color: var(--color-accent-deep); text-decoration: underline; }

.article-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.6rem;
}
.article-card{
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.article-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.article-card-media{
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--color-bg-band);
  overflow: hidden;
}
.article-card-media img{ width: 100%; height: 100%; object-fit: cover; }
.article-card-placeholder{
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-bg-band), var(--color-accent-soft));
}
.article-card-placeholder svg{ width: 38px; height: 38px; color: var(--color-accent-deep); opacity: 0.55; }
.article-card-body{
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.3rem 1.4rem 1.5rem;
  flex: 1;
}
.article-card-cat{
  align-self: flex-start;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-accent-deep);
  background: var(--color-accent-soft);
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
}
.article-card-title{
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.55;
}
.article-card-title a:hover{ color: var(--color-accent-deep); }
.article-card-excerpt{
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  line-height: 1.8;
  flex: 1;
}
.article-card-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.78rem;
  color: var(--color-ink-faint);
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-line);
}
.article-card-meta span{ display: inline-flex; align-items: center; gap: 0.35rem; }
.article-card-meta svg{ width: 14px; height: 14px; }

/* ---- Featured article ---------------------------------- */
.article-featured{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--color-primary);
  color: #F3ECE1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2.4rem;
  box-shadow: var(--shadow-soft);
}
.article-featured-media{ display: block; }
.article-featured-media img{ width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.article-featured-body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem);
  justify-content: center;
}
.article-featured-tag{
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-primary-deep);
  background: var(--color-accent);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
}
.article-featured-body strong{ font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1.5; }
.article-featured-excerpt{ font-size: 0.9rem; color: #CBBFAF; line-height: 1.85; }
.article-featured .btn-ghost{ color: #F3ECE1; border-color: rgba(255,255,255,0.3); }

/* ---- Pagination ---------------------------------------- */
.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}
.pagination-link{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.2rem;
  border: 1.5px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.88rem;
  font-weight: 600;
}
.pagination-link:hover{ border-color: var(--color-accent); color: var(--color-accent-deep); }
.pagination-link svg{ width: 15px; height: 15px; }
.pagination-status{ font-size: 0.84rem; color: var(--color-ink-faint); }

/* ---- Article detail ------------------------------------ */
.article-head{ padding-block: 1.6rem 1.4rem; }
.article-head .article-card-cat{ margin-bottom: 1rem; }
.article-title{
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
}
.article-lead{
  font-size: 1.02rem;
  color: var(--color-ink-soft);
  line-height: 1.95;
}
.article-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.8rem;
  color: var(--color-ink-faint);
}
.article-meta span{ display: inline-flex; align-items: center; gap: 0.4rem; }
.article-meta svg{ width: 14px; height: 14px; }

.article-cover{
  margin: 1.8rem 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.article-cover img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-cover figcaption{
  font-size: 0.78rem;
  color: var(--color-ink-faint);
  padding: 0.7rem 1rem;
  background: var(--color-surface);
  text-align: center;
}

/* ---- Table of contents --------------------------------- */
.article-toc{
  background: var(--color-bg-band);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.6rem;
  margin: 2.2rem 0;
}
.article-toc h2{
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.9rem;
}
.article-toc ol{
  list-style: none;
  display: grid;
  gap: 0.55rem;
  counter-reset: toc;
}
.article-toc li{ font-size: 0.88rem; }
.article-toc li::before{
  counter-increment: toc;
  content: counter(toc) ".";
  color: var(--color-accent-deep);
  font-weight: 700;
  margin-inline-end: 0.4rem;
}
/* h3 entries are nested one level under their h2. */
.article-toc .toc-level-3{ padding-inline-start: 1.4rem; font-size: 0.83rem; }
.article-toc a{ color: var(--color-ink-soft); }
.article-toc a:hover{ color: var(--color-accent-deep); text-decoration: underline; }

/* ---- Long-form body text ------------------------------- */
.prose{
  font-size: 1.02rem;
  line-height: 2.05;
  color: var(--color-ink);
  padding-block: 1rem 2rem;
}
.prose > * + *{ margin-top: 1.3rem; }
.prose h2{
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.5;
  margin-top: 2.6rem;
  /* Anchor links from the ToC must not land under the fixed header. */
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.prose h2::after{
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 0.7rem;
  border-radius: 2px;
  background: var(--gradient-accent);
}
.prose h3{
  font-size: 1.07rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 1.9rem;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.prose p{ color: var(--color-ink-soft); }
.prose strong{ color: var(--color-ink); font-weight: 700; }
.prose em{ font-style: normal; color: var(--color-accent-deep); }
.prose a{
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose ul, .prose ol{
  padding-inline-start: 1.4rem;
  display: grid;
  gap: 0.7rem;
  color: var(--color-ink-soft);
}
.prose ul{ list-style: none; padding-inline-start: 0; }
.prose ul li{ position: relative; padding-inline-start: 1.5rem; }
.prose ul li::before{
  content: "";
  position: absolute;
  inset-inline-start: 0.25rem;
  top: 0.78em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}
.prose ol{ list-style: decimal; }
.prose ol li::marker{ color: var(--color-accent-deep); font-weight: 700; }
.prose blockquote{
  border-inline-start: 4px solid var(--color-accent);
  background: var(--color-bg-band);
  padding: 1.1rem 1.4rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-ink-soft);
}
.prose img{
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
/* Tables must scroll on their own rather than widen the page. */
.prose table{
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  font-size: 0.9rem;
}
.prose th, .prose td{
  border: 1px solid var(--color-line);
  padding: 0.7rem 0.9rem;
  text-align: start;
}
.prose th{ background: var(--color-bg-band); font-weight: 700; }

/* ---- In-article extras --------------------------------- */
.article-cities, .article-faq{
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-line);
}
.article-cities h2, .article-faq h2{
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.article-faq h2{ margin-bottom: 1.3rem; }
.article-faq .faq-list{ max-width: none; }
.related{ padding-block: var(--space-section); }

/* ---- City pages ---------------------------------------- */
.city-hero{
  padding-block: clamp(1.6rem, 1.2rem + 2vw, 3rem) clamp(2.4rem, 2rem + 2vw, 4rem);
}
.city-hero-inner{
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.8rem, 1.4rem + 2vw, 3.4rem);
  align-items: start;
}
.city-h1{
  font-size: clamp(1.8rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 800;
  line-height: 1.35;
  margin: 0.7rem 0 1.1rem;
}
.city-intro{ color: var(--color-ink-soft); line-height: 2; }
.city-intro p{ margin-bottom: 0.9rem; }
.city-hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}
.city-travel{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-accent-deep);
  background: var(--color-accent-soft);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
}
.city-travel svg{ width: 16px; height: 16px; flex-shrink: 0; }

.city-facts{
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 1.7rem 1.8rem;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: calc(var(--header-h) + 1.2rem);
}
.city-facts h2{ font-size: 1.05rem; font-weight: 700; margin-bottom: 1.2rem; }
.city-facts ul{ display: grid; gap: 0.9rem; }
.city-facts li{
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}
.city-facts svg{ width: 17px; height: 17px; color: var(--color-success); flex-shrink: 0; margin-top: 0.25em; }
.city-facts-contact{
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 0.6rem;
  font-size: 0.86rem;
}
.city-facts-contact span{ display: inline-flex; align-items: center; gap: 0.45rem; color: var(--color-ink-faint); }
.city-facts-contact svg{ color: var(--color-ink-faint); }
.city-facts-contact a{ font-weight: 700; color: var(--color-accent-deep); font-size: 1rem; }

.city-neighborhoods, .city-testimonials, .city-articles{ padding-block: var(--space-section); }
.city-body{ padding-block: clamp(2rem, 1.6rem + 2vw, 3.2rem); }
.city-faq, .city-nearby{ padding-block: var(--space-section); }
.city-faq .faq-list, .city-faq .section-head{ margin-inline: auto; }

/* ---- City grids (index + homepage section) -------------- */
.city-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1.1rem;
}
.city-card{
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.4rem 1.5rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.city-card:hover{
  transform: translateY(-5px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card);
}
.city-card.is-primary{ border-color: var(--color-accent-soft); background: #FFFDFA; }
.city-card-pin svg{ width: 20px; height: 20px; color: var(--color-accent-deep); }
.city-card-name{ font-size: 1.08rem; font-weight: 700; }
.city-card-note{ font-size: 0.79rem; color: var(--color-ink-faint); line-height: 1.7; }
.city-card-badge{
  align-self: flex-start;
  margin-top: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-success);
  background: rgba(107,127,82,0.12);
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}
.areas-outside{
  margin-top: 2.5rem;
  text-align: center;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
}
.areas-outside a{ color: var(--color-accent-deep); text-decoration: underline; }

/* Homepage "covered cities" grid — replaces the old marquee so every
   city is a real, crawlable link rather than decorative text. */
.areas-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.9rem;
}
.area-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  padding: 1.15rem 1rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.area-card:hover{ transform: translateY(-4px); border-color: var(--color-accent); }
.area-card.is-primary{ border-color: var(--color-accent-soft); }
.area-card svg{ width: 18px; height: 18px; color: var(--color-accent-deep); }
.area-card-name{ font-weight: 700; font-size: 1rem; }
.area-card-cta{ font-size: 0.73rem; color: var(--color-ink-faint); }

/* City testimonial cards (simpler than the homepage carousel) */
.testimonial-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.3rem;
}
.testimonial-grid .testimonial-card{ margin: 0; }
.testimonial-grid blockquote{
  margin: 0 0 1rem;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
  line-height: 1.9;
}
.testimonial-grid figcaption{
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* ---- Footer additions ---------------------------------- */
.footer-areas a{
  color: inherit;
  transition: color 0.2s ease;
}
.footer-areas a:hover{ color: var(--color-accent); }
.footer-more{
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--color-accent-soft);
}
.footer-more:hover{ color: var(--color-accent); }
.footer-badges{ display: inline-flex; align-items: center; gap: 0.8rem; }
.footer-badges img{ max-height: 70px; width: auto; border-radius: 6px; }

/* ---- Responsive ---------------------------------------- */
@media (max-width: 900px){
  .city-hero-inner{ grid-template-columns: 1fr; }
  .city-facts{ position: static; }
  .article-featured{ grid-template-columns: 1fr; }
  .article-featured-media img{ min-height: 200px; }
}
@media (max-width: 560px){
  .article-grid{ grid-template-columns: 1fr; }
  .city-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .areas-grid{ grid-template-columns: repeat(2, 1fr); }
  .blog-search{ max-width: none; }
  .breadcrumbs{ font-size: 0.76rem; }
  .prose{ font-size: 0.97rem; line-height: 1.95; }
}

/* =========================================================
   Owner section — "دو قاب موی طبیعی"
   ---------------------------------------------------------
   Design intent (keep this if you restyle):
   · The two portraits are framed as organic petal shapes, echoing the
     chrysanthemums in the photo. Deliberately NOT a circle or an arch —
     every other local business site uses one of those two.
   · A decorative amber "hair strand" used to arc behind the photos here —
     removed on request, it read as too heavy against the content. The
     strandDraw keyframe survives below because the signature underline
     under the owner's name still uses it.
   ========================================================= */

.owner{
  position: relative;
  padding-block: var(--space-section);
  overflow: hidden;           /* the petals still extend past the edge */
  isolation: isolate;
}

@keyframes strandDraw{ to{ stroke-dashoffset: 0; } }

/* ---- layout -------------------------------------------------------- */
.owner-grid{
  display: grid;
  grid-template-columns: 1fr minmax(0, 0.92fr);
  gap: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  align-items: center;
}

/* ---- text column --------------------------------------------------- */
.owner-name-underline{
  display: block;
  width: 100%;
  height: 12px;
  margin-top: 2px;
  color: var(--color-accent);
  overflow: visible;
}
/* The signature "writes" itself alongside the strand. */
.owner-name-underline path{
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
}
.reveal.is-visible .owner-name-underline path{
  animation: strandDraw 1s ease-out .35s forwards;
}
@media (prefers-reduced-motion: reduce){
  .owner-name-underline path{ stroke-dashoffset: 0; animation: none; }
}

.owner-role{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* Sits directly under the name as its subtitle — the signature underline
     above it already supplies the visual break. */
  margin-top: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}
.owner-role svg{ width: 16px; height: 16px; color: var(--color-accent-deep); }

.owner-intro{ margin-top: 1.4rem; color: var(--color-ink-soft); max-width: 54ch; }
.owner-intro p{ margin-bottom: 0.9rem; }

/* ---- stat grid ----------------------------------------------------- */
.owner-stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;                       /* the gap itself draws the dividers */
  margin: 2rem 0 0;
  padding: 0;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.owner-stat{
  background: var(--color-surface);
  padding: 1rem 0.7rem;
  text-align: center;
}
.owner-stat dt{
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.55rem);
  font-weight: 800;
  color: var(--color-accent-deep);
  line-height: 1.2;
}
.owner-stat dd{
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: var(--color-ink-faint);
  line-height: 1.5;
}

.owner-points{ margin-top: 1.8rem; display: grid; gap: 0.75rem; }
.owner-points li{
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}
.owner-points svg{
  width: 19px; height: 19px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-success);
}

.owner-actions{ display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.1rem; }

/* ---- photo cluster ------------------------------------------------- */
.owner-visual{ position: relative; }

.owner-frames{
  position: relative;
  /* Reserve the cluster's height so the overlapping second photo never
     collapses the row when images are still loading. */
  padding-bottom: clamp(3rem, 2rem + 6vw, 6rem);
  padding-inline-start: clamp(0rem, -2rem + 6vw, 3rem);
}

.owner-photo{ margin: 0; position: relative; }
.owner-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* keeps the face in frame when cropped */
}

/* Primary: the petal. Two different radii on hover make it feel alive
   without moving anything — a shape tween, not a transform. */
.owner-photo-main{
  border-radius: 48% 52% 42% 58% / 40% 36% 64% 60%;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-soft);
  transition: border-radius 1.1s cubic-bezier(.4,.1,.2,1);
}
.owner-visual:hover .owner-photo-main{
  border-radius: 56% 44% 58% 42% / 52% 58% 42% 48%;
}

/* The offset outline behind the primary frame — depth without a drop
   shadow doing all the work. */
.owner-photo-main::before{
  content: "";
  position: absolute;
  inset: -14px -14px 14px 14px;
  border: 1.5px solid var(--color-accent);
  border-radius: inherit;
  opacity: 0.45;
  z-index: -1;
}

/* Secondary: smaller, tilted, cream-bordered, overlapping the bottom edge. */
.owner-photo-second{
  position: absolute;
  inset-inline-start: -6%;
  bottom: 0;
  width: 46%;
  aspect-ratio: 4 / 5;
  border-radius: 54% 46% 50% 50% / 46% 50% 50% 54%;
  overflow: hidden;
  border: 6px solid var(--color-bg);
  box-shadow: var(--shadow-card);
  transform: rotate(-5deg);
  transition: transform .6s cubic-bezier(.34,1.3,.4,1);
}
.owner-visual:hover .owner-photo-second{ transform: rotate(0deg) translateY(-6px); }

/* Experience badge, riding the top edge of the primary frame. */
.owner-badge{
  position: absolute;
  top: 4%;
  inset-inline-end: -4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: #fff;
  text-align: center;
  box-shadow: 0 10px 26px -10px rgba(194,69,15,.75);
  animation: floatY 6s ease-in-out infinite;
}
.owner-badge b{ font-size: 1.85rem; font-weight: 800; line-height: 1; }
.owner-badge small{ font-size: 0.66rem; line-height: 1.2; opacity: .95; }
@media (prefers-reduced-motion: reduce){ .owner-badge{ animation: none; } }

/* Placeholder shown until a photo is uploaded through admin. */
.owner-photo-empty{
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  height: 100%;
  padding: 2rem;
  text-align: center;
  background: var(--color-bg-band);
  border: 2px dashed var(--color-line);
  color: var(--color-ink-faint);
}
.owner-photo-empty svg{ width: 34px; height: 34px; }
.owner-photo-empty b{ color: var(--color-ink-soft); font-size: 1rem; }
.owner-photo-empty small{ font-size: 0.8rem; max-width: 24ch; line-height: 1.6; }

/* ---- bouquet colour echo ------------------------------------------- */
.owner-petal{
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
}
.owner-petal-1{ width: 190px; height: 190px; top: -4%;  inset-inline-end: 6%;  background: rgba(190, 48, 110, .17); }
.owner-petal-2{ width: 150px; height: 150px; bottom: 8%; inset-inline-start: -8%; background: rgba(219, 138, 59, .22); }
.owner-petal-3{ width: 110px; height: 110px; top: 44%;  inset-inline-start: 30%; background: rgba(233, 150, 190, .16); }

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 960px){
  .owner-grid{ grid-template-columns: 1fr; }
  /* Photo first on mobile: the face is the hook, the copy is the follow-up. */
  .owner-visual{ order: -1; max-width: 520px; margin-inline: auto; }
}

@media (max-width: 560px){
  .owner-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-badge{ width: 74px; height: 74px; }
  .owner-badge b{ font-size: 1.35rem; }
  .owner-photo-second{ width: 52%; inset-inline-start: -4%; }
  .owner-actions .btn{ flex: 1 1 100%; justify-content: center; }
}

/* =========================================================
   Acceptance criteria — "does my hair qualify?"
   ---------------------------------------------------------
   The two numbers carry the section. Everything else is kept quiet so a
   visitor scrolling on a phone reads "۵۵" and "۶۲" and nothing competes.
   ========================================================= */

.criteria{ padding-block: var(--space-section); }

.criteria-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.criteria-card{
  position: relative;
  padding: 1.9rem 1.7rem 1.7rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .4s ease, box-shadow .4s ease;
}
.criteria-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-soft); }

/* A soft wash bleeding in from the top corner, so the two cards read as a
   pair without needing a coloured border or a "featured" badge. */
.criteria-card::before{
  content: "";
  position: absolute;
  top: -70px;
  inset-inline-end: -70px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  opacity: .35;
  pointer-events: none;
}

.criteria-card-head{
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.criteria-card-head h3{
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--color-primary);
}
.criteria-card-head p{
  margin-top: 0.2rem;
  font-size: var(--fs-small);
  color: var(--color-ink-faint);
}
.criteria-icon{
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--gradient-accent);
  color: #fff;
}
.criteria-icon svg{ width: 24px; height: 24px; }

/* ---- the number + measuring tape ----------------------------------- */
.criteria-measure{
  position: relative;
  margin-top: 1.6rem;
  padding-bottom: 1.4rem;
}
.criteria-min{
  display: block;
  font-size: 0.78rem;
  color: var(--color-ink-faint);
  letter-spacing: .02em;
}
.criteria-number{
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: clamp(3.4rem, 2.4rem + 4.2vw, 5.2rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
  /* The numeral is the one place the accent gradient gets to shout. */
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.criteria-number small{
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  -webkit-text-fill-color: var(--color-ink-soft);
}

/* Ten ticks; every fifth is taller, like a real tape measure. */
.criteria-ruler{
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 16px;
  border-bottom: 2px solid var(--color-line);
}
.criteria-ruler i{
  width: 1.5px;
  height: 6px;
  background: var(--color-line);
}
.criteria-ruler i:nth-child(5n+1){ height: 13px; background: var(--color-accent); }

.criteria-list{ margin-top: 1.3rem; display: grid; gap: 0.6rem; }
.criteria-list li{
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}
.criteria-list svg{
  width: 17px; height: 17px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-success);
}

/* ---- measuring note ------------------------------------------------ */
.criteria-note{
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  max-width: 62ch;
  margin: 1.8rem auto 0;
  padding: 0.95rem 1.2rem;
  background: var(--color-bg-band);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--color-ink-soft);
}
.criteria-note svg{
  width: 19px; height: 19px;
  flex-shrink: 0;
  margin-top: 5px;
  color: var(--color-accent-deep);
}
.criteria-note strong{ color: var(--color-ink); }

/* ---- service promises strip ---------------------------------------- */
.criteria-perks{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;                        /* gap draws the dividers */
  margin-top: 2.5rem;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.criteria-perks li{
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 1.5rem 1rem;
  background: var(--color-surface);
  text-align: center;
}
.criteria-perks svg{
  width: 26px; height: 26px;
  margin-bottom: 0.3rem;
  color: var(--color-accent-deep);
}
.criteria-perks strong{ font-size: 0.97rem; color: var(--color-primary); }
.criteria-perks span{ font-size: 0.8rem; color: var(--color-ink-faint); line-height: 1.6; }

@media (max-width: 560px){
  .criteria-card{ padding: 1.5rem 1.3rem; }
  .criteria-perks{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Gallery additions (captions + empty state) --------------------- */
/* The grid itself is styled further up; these cover the DB-driven markup. */
.gallery-item{ margin: 0; position: relative; }
.gallery-item img{
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.gallery-caption{
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.6rem 0.9rem 0.7rem;
  /* Gradient rather than a solid bar: the hair texture stays visible. */
  background: linear-gradient(to top, rgba(36,22,8,.82), transparent);
  color: #F3ECE1;
  font-size: 0.82rem;
  font-weight: 600;
  pointer-events: none;
}
.gallery-empty{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2rem;
  padding: 2.6rem 1.5rem;
  background: var(--color-bg-band);
  border: 2px dashed var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-ink-faint);
  font-size: 0.92rem;
  text-align: center;
}
.gallery-empty svg{ width: 22px; height: 22px; flex-shrink: 0; }

/* Word-based stat tiles. The counters are sized for digits, so text needs a
   smaller scale to sit on the same baseline as "۵+". */
.stat-number.stat-word{
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.35;
}

/* Testimonials are figure/blockquote now that they come from the database. */
.testimonial-card blockquote.testimonial-text{ margin: 0; }

/* =========================================================
   Gallery — uniform tiles, full photo on click
   ---------------------------------------------------------
   Two competing needs: a tidy grid (the source photos run from 722×1280 to
   1066×922, and a ragged masonry looked messy), and not cropping away the
   hair length, which is the one thing a seller is trying to judge.
   Resolution: every tile is the same 3:4 portrait — tall enough that a
   vertical hair photo survives it — and clicking opens the untouched
   original in the lightbox. Tidy grid, nothing actually lost.
   ========================================================= */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  columns: auto;                   /* undo the masonry experiment */
  gap: 0.9rem;
}
.gallery-item{
  position: relative;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
  break-inside: auto;
}
/* The span-2 trick belonged to the old placeholder grid. */
.gallery-item:nth-child(3n+1){ grid-row: auto; }
.gallery-item img{
  width: 100%;
  height: 100%;
  /* Portrait, because hair photos are portrait. A square tile would clip
     roughly a third off the tall ones. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Bias the crop upward: these shots put the tied ends at the top and the
     tips trailing off the bottom, so the top holds more information. */
  object-position: center 28%;
}

/* A quiet hint that the full photo is one click away. */
.gallery-item::before{
  content: "مشاهده کامل";
  position: absolute;
  top: 0.6rem;
  inset-inline-start: 0.6rem;
  z-index: 2;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(36,22,8,.72);
  color: #F3ECE1;
  font-size: 0.68rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.gallery-item:hover::before,
.gallery-item:focus-visible::before{ opacity: 1; transform: translateY(0); }

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

/* The lightbox shows the file as it is — no aspect-ratio, no cover. */
.lightbox img{
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* ---- Owner frames: match the actual photo proportions --------------- */
/* Primary is 960×1099 (≈4:5) — the existing ratio already fits, but the
   face sits high, so bias the crop upward. */
.owner-photo-main img{ object-position: center 18%; }

/* The secondary file is cropped square and already framed on her face and
   the bouquet, so the frame just shows it as-is — no repositioning needed. */
.owner-photo-second{ aspect-ratio: 1 / 1; }
.owner-photo-second img{ object-position: center center; }

/* Numbers inside RTL copy. The `dir="ltr"` attribute already isolates them
   per the HTML spec; this pins the behaviour for older engines and keeps
   the group from wrapping mid-number. */
.ltr-num{
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

/* The pricing section is now one statement and one CTA instead of four
   tier cards that all resolved to "call us". */
.pricing-cta{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2.2rem;
}
.pricing-cta-note{
  font-size: 0.85rem;
  color: var(--color-ink-faint);
}

/* The factors grid was built for 8 tiles in two rows of 4. There are 5 now,
   and 4+1 leaves a lone orphan on the second row. Five across reads as one
   deliberate set — and these five are a set: they are the exact criteria
   quoted on the phone. */
.factors-grid{ grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1100px){
  /* 3+2 is a cleaner break than 4+1 once five no longer fit. */
  .factors-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
}
@media (max-width: 420px){
  .factors-grid{ grid-template-columns: 1fr; }
}

/* Five columns are narrower than the four these tiles were drawn for, so
   trim the horizontal padding and let the descriptions breathe vertically
   instead. Same visual weight, one row. */
.factor-item{ padding: 1.4rem 0.5rem; }
.factor-item p{ line-height: 1.65; text-wrap: pretty; }
@media (min-width: 1101px){
  .factors-grid{ gap: 0.6rem; }
}

/* The owner's name is the section's h2 now (the slogan that used to sit
   here is gone). It inherits .section-title's sizing; these only add the
   signature underline's positioning. */
.section-title.owner-name{
  display: inline-block;
  margin-top: 0.2rem;
  position: relative;
}

/* A section-closing button needs air on BOTH sides: the inline margin-top
   it used to carry only separated it from the cards above, so it sat flush
   against the next section's band. */
.section-cta{
  margin-top: 2.2rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Number sits directly on top of its label — a hair's breadth apart, not a
   grid row apart. */
.owner-badge{ gap: 2px; line-height: 1; }
.owner-badge small{ font-size: 0.63rem; max-width: 5em; }

/* City links under the hero CTAs. Kept visually quiet — they are there for
   the crawler and for the visitor who wants their own town, not as another
   row of buttons competing with the call-to-action above them. */
.hero-cities{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.4rem;
  font-size: 0.86rem;
  color: var(--color-ink-faint);
}
.hero-cities a{
  color: var(--color-accent-deep);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.hero-cities a:hover{ border-bottom-color: currentColor; }
.hero-cities a:not(.hero-cities-more)::after{ content: "،"; color: var(--color-ink-faint); }
.hero-cities a:not(.hero-cities-more):last-of-type::after{ content: ""; }

/* The hero frame is 4:5 portrait. A landscape photo dropped into it gets
   cropped left and right, so bias toward the centre-left where the hair
   sits in these shots rather than the default dead centre. */
.hero-visual-frame img{ object-position: 42% center; }

/* Three promises in the dark band now, not four. */
.stats-grid{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px){
  .stats-grid{ grid-template-columns: 1fr; gap: 1.6rem; }
}

/* =========================================================
   Price table
   ---------------------------------------------------------
   A real <table> on desktop; the same markup reflows into stacked cards
   below 720px, where three columns would either overflow the viewport or
   shrink the numbers past reading size. The price column is the reason the
   section exists, so it gets the weight.
   ========================================================= */

.price-table-wrap{
  margin-top: 2.6rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.price-table{
  width: 100%;
  border-collapse: collapse;
  text-align: right;
}

.price-table thead th{
  padding: 1.1rem 1.3rem;
  background: var(--color-bg-band);
  border-bottom: 1px solid var(--color-line);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}
.price-table thead th span{ font-weight: 400; color: var(--color-ink-faint); }

.price-table tbody tr + tr{ border-top: 1px dashed var(--color-line); }

.price-table tbody th,
.price-table tbody td{
  padding: 1.25rem 1.3rem;
  vertical-align: middle;
}

/* Column 1 — the length, the thing a visitor matches themselves against. */
.price-table tbody th{
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--color-primary);
  white-space: nowrap;
}

/* Column 2 — the answer they came for. */
.price-table .price-amount{
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.45rem);
  font-weight: 800;
  color: var(--color-accent-deep);
  white-space: nowrap;
  /* Digits are Persian and the groups must not be reordered by bidi. */
  unicode-bidi: isolate;
}

/* Column 3 — support, deliberately quiet. */
.price-table .price-note{
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--color-ink-faint);
  text-wrap: pretty;
}

/* The exceptional tier: a tinted row rather than a louder colour, so it
   reads as "different" without shouting over the rest of the table. */
.price-table tr.is-featured{ background: var(--color-accent-soft); }
.price-table tr.is-featured th,
.price-table tr.is-featured .price-amount{ color: var(--color-primary-deep); }
.price-table tr.is-featured .price-note{ color: var(--color-ink-soft); }

.price-badge{
  display: inline-block;
  margin-inline-start: 0.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--gradient-accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}

/* ---- stacked cards on small screens --------------------------------- */
@media (max-width: 720px){
  .price-table-wrap{ border: 0; background: transparent; box-shadow: none; }
  .price-table thead{
    /* Hidden visually; the data-label on each cell carries the header. */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .price-table,
  .price-table tbody,
  .price-table tr,
  .price-table th,
  .price-table td{ display: block; width: 100%; }

  .price-table tbody tr{
    margin-bottom: 1rem;
    padding: 1.2rem 1.3rem;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
  }
  .price-table tbody tr + tr{ border-top: 1px solid var(--color-line); }

  .price-table tbody th,
  .price-table tbody td{ padding: 0; }

  .price-table tbody th{ font-size: 1.02rem; }
  .price-table .price-amount{ margin-top: 0.45rem; font-size: 1.5rem; }
  .price-table .price-note{
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--color-line);
  }
  .price-table tr.is-featured{ border-color: var(--color-accent); }
}

/* The "why do the bands overlap" explainer. Styled as a distinct note
   rather than body copy — it answers an objection, so it should be findable
   by someone scanning the table and frowning at it. */
.price-overlap{
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 68ch;
  margin: 1.8rem auto 0;
  padding: 1.1rem 1.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--color-ink-soft);
}
.price-overlap svg{
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 6px;
  color: var(--color-accent-deep);
}
.price-overlap strong{ color: var(--color-primary); }

/* Designer credit — last item in the footer bar. Same muted tone as the
   copyright line beside it; only the studio name is a link, and it lifts to
   the accent colour on hover so it reads as clickable without shouting. */
.footer-credit a{
  color: #B9AB98;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.footer-credit a:hover{ color: var(--color-accent); border-bottom-color: currentColor; }

/* =========================================================
   Touch targets — every tappable element is at least 48 x 48 CSS px
   (built to 50 so the reveal animation's 0.98 scale cannot dip below 48)
   ---------------------------------------------------------
   Small links are hard to hit with a thumb and easy to mis-tap, and Google's
   mobile checks flag anything under 48px. These rules raise the real box of
   each element rather than faking it with a pseudo-element, and keep the
   page's rhythm: pills keep their drawn size (their 48px box is invisible
   padding, drawn around with ::before) and the surplus is netted off with
   negative margins, so nothing on the page shifts.
   ========================================================= */
/* 50 rather than 48: content below the fold sits at scale(.98) until it is
   scrolled into view (the .reveal animation), and 48 x .98 measures 47.04 —
   which is what an audit sees at page load. 50 x .98 = 49. */
:root{ --tap: 50px; }

/* Buttons and icon buttons */
.btn{ min-height: var(--tap); }
.nav-toggle,
.mobile-drawer-close,
.lightbox-close,
.lightbox-nav{ width: var(--tap); height: var(--tap); }

/* Header navigation (desktop). The underline keeps its distance from the
   text: it was 5.6px under the text box, and is now measured from the taller
   box's bottom edge. */
.main-nav a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding-block: 0;
  padding-inline: 0.25rem;
}
.main-nav a::after{ bottom: 3px; }

/* Mobile drawer: a tall list of big targets reads better than a loose one. */
.mobile-drawer nav ul{ gap: 0.1rem; }
.mobile-drawer nav a{ display: flex; align-items: center; min-height: var(--tap); }

/* Breadcrumbs: the row grows by 24px, so the space above it shrinks by 12px
   and the text stays where it was. */
.breadcrumbs{ padding-top: calc(var(--header-h) + 0.35rem); padding-bottom: 0; }
.breadcrumbs a{
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: 0.15rem;
}

/* Hero: links to the main city pages */
.hero-cities{ margin-top: 0.5rem; gap: 0 0.1rem; }
.hero-cities a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding-inline: 0.3rem;
}

/* Category pill on article cards. The pill is still 28px tall; what is 48px
   is the link's box, and ::before draws the pill inside it. */
a.article-card-cat{
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 0.7rem;
  margin-block: -10px;
  background: none;
}
a.article-card-cat::before{
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline: 0;
  border-radius: 999px;
  background: var(--color-accent-soft);
  z-index: -1;
}

/* Article titles are links; a one-line title was only 27px tall. */
.article-card-title a{ display: flex; align-items: center; min-height: var(--tap); }

/* Pills and chips on inner pages */
a.chip{ min-height: var(--tap); }
.pagination-link{ min-height: var(--tap); min-width: var(--tap); justify-content: center; }

/* ---- Footer ------------------------------------------------------------ */
/* Link lists: each row is a 48px target, so the gap between rows is gone. */
.footer-col ul{ gap: 0; }
.footer-col li{ display: flex; align-items: center; min-height: var(--tap); }
.footer-col li a{ display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }

/* City links. They are <a> now, but the pill styling still targeted <span>,
   so they had lost it; restored here. The 1px outline is drawn by ::before so
   the pill stays 30px tall inside its 48px box. */
.footer-areas{ gap: 0 0.3rem; }
.footer-areas a{
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding-inline: 0.8rem;
  font-size: 0.8rem;
}
.footer-areas a::before{
  content: "";
  position: absolute;
  inset-block: 9px;
  inset-inline: 0;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  z-index: -1;
  transition: border-color 0.2s ease;
}
.footer-areas a:hover::before{ border-color: var(--color-accent-soft); }

.footer-more{ display: inline-flex; align-items: center; min-height: var(--tap); margin-top: 0.3rem; }

.footer-social{ gap: 0.5rem; }
.footer-social a{ width: var(--tap); height: var(--tap); }

.footer-bottom{ align-items: center; }
.footer-credit a{ display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 0.25rem; }

/* ---- Touch targets on the inner pages ----------------------------------- */
/* Breadcrumb links such as "خانه" are three letters wide. */
.breadcrumbs a{ min-width: var(--tap); justify-content: center; }

/* The blog search field was 45px tall. */
.blog-search input{ min-height: var(--tap); }

/* A phone number or "ask on WhatsApp" link that sits on its own line or ends a
   sentence is a button in practice, so it gets a button-sized box. */
.city-facts-contact a,
.areas-outside a{ display: inline-flex; align-items: center; min-height: var(--tap); }

/* Table of contents: each entry is a link, so each row is a 50px target. The
   counter and the link sit centred in the row. */
.article-toc ol{ gap: 0; }
.article-toc li{ display: flex; align-items: center; min-height: var(--tap); }
.article-toc a{ display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }