/* ============================================================
   services.css — Services Page Stylesheet
   Mobile-first | Cross-browser | Complements style.css
   Depends on: style.css (CSS variables, reset, shared components)
   ============================================================ */

/* ── KEYFRAMES ── */
@-webkit-keyframes heroFadeUp {
  from { opacity: 0; -webkit-transform: translateY(24px); transform: translateY(24px); }
  to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@-webkit-keyframes cardReveal {
  from { opacity: 0; -webkit-transform: translateY(32px); transform: translateY(32px); }
  to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PAGE HERO
   ============================================================ */
.svc-hero {
  min-height: 54vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 9rem 1.4rem 5rem;
  background: -webkit-linear-gradient(160deg, var(--deep2) 0%, var(--deep) 55%, #2e0d45 100%);
  background:         linear-gradient(160deg, var(--deep2) 0%, var(--deep) 55%, #2e0d45 100%);
}

.svc-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image:
    -webkit-linear-gradient(rgba(232,121,154,.035) 1px, transparent 1px),
    -webkit-linear-gradient(90deg, rgba(232,121,154,.035) 1px, transparent 1px);
  background-image:
            linear-gradient(rgba(232,121,154,.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(232,121,154,.035) 1px, transparent 1px);
  background-size: 55px 55px;
  pointer-events: none;
}

/* Glow orbs */
.svc-hero-orb {
  position: absolute;
  border-radius: 50%;
  -webkit-filter: blur(90px);
          filter: blur(90px);
  pointer-events: none;
}

.svc-hero-orb.a {
  width: 500px; height: 500px;
  top: -120px; left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  background: -webkit-radial-gradient(circle, rgba(232,121,154,.13), transparent 65%);
  background:         radial-gradient(circle, rgba(232,121,154,.13), transparent 65%);
}

.svc-hero-orb.b {
  width: 300px; height: 300px;
  bottom: -60px; right: 5%;
  background: -webkit-radial-gradient(circle, rgba(201,149,110,.1), transparent 65%);
  background:         radial-gradient(circle, rgba(201,149,110,.1), transparent 65%);
}

/* Eyebrow label */
.svc-hero-eyebrow {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: .7rem;
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--rose);
  font-weight: 400;
  margin-bottom: 1.4rem;
  position: relative;
  z-index: 2;
  opacity: 0;
  -webkit-animation: heroFadeUp .8s .1s ease both;
          animation: heroFadeUp .8s .1s ease both;
}

.svc-hero-eyebrow::before,
.svc-hero-eyebrow::after {
  content: '';
  width: 28px; height: 1px;
  background: var(--rose);
}

/* Hero H1 */
.svc-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1.04;
  letter-spacing: -.01em;
  margin-bottom: 1.4rem;
  position: relative;
  z-index: 2;
  opacity: 0;
  -webkit-animation: heroFadeUp .8s .25s ease both;
          animation: heroFadeUp .8s .25s ease both;
}

.svc-hero h1 em {
  font-style: italic;
  color: var(--rose3);
}

/* Hero description */
.svc-hero-desc {
  font-size: clamp(.9rem, 2vw, 1.05rem);
  color: var(--muted);
  font-weight: 300;
  line-height: 1.85;
  max-width: 560px;
  margin: 0 auto 2.4rem;
  position: relative;
  z-index: 2;
  opacity: 0;
  -webkit-animation: heroFadeUp .8s .4s ease both;
          animation: heroFadeUp .8s .4s ease both;
}

/* Stats row */
.svc-hero-stats {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 2;
  opacity: 0;
  -webkit-animation: heroFadeUp .8s .55s ease both;
          animation: heroFadeUp .8s .55s ease both;
}

.svc-stat {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.svc-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--rose3);
  line-height: 1;
}

.svc-stat-lbl {
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 300;
  margin-top: .25rem;
}

/* Breadcrumb */
.breadcrumb {
  position: absolute;
  top: 72px; left: 1.4rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: .5rem;
  font-size: .72rem;
  color: var(--muted);
  z-index: 10;
}

.breadcrumb a {
  color: var(--muted);
  -webkit-transition: color .2s;
          transition: color .2s;
}

.breadcrumb a:hover { color: var(--rose3); }
.breadcrumb span   { color: var(--rose); font-size: .55rem; }
.breadcrumb strong { color: var(--rose3); font-weight: 400; }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
  background: rgba(24,7,32,.95);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  position: -webkit-sticky;
  position: sticky;
  top: 62px;
  z-index: 100;
  padding: 0 1.4rem;
}

.filter-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: .9rem 0;
}

.filter-inner::-webkit-scrollbar { display: none; }

.filter-btn {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: .38rem 1.1rem;
  font-family: 'Jost', sans-serif;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-transition: all .25s;
          transition: all .25s;
  -webkit-tap-highlight-color: transparent;
}

.filter-btn:hover {
  border-color: var(--rose3);
  color: var(--rose3);
}

.filter-btn.active {
  background: -webkit-linear-gradient(135deg, var(--rose), var(--rose2));
  background:         linear-gradient(135deg, var(--rose), var(--rose2));
  border-color: transparent;
  color: #fff;
}

.filter-count {
  margin-left: auto;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   SERVICES GRID SECTION
   ============================================================ */
.services-sec {
  background: var(--deep2);
  padding: 5rem 1.4rem 6rem;
}

.services-inner {
  max-width: 1260px;
  margin: 0 auto;
}

/* Mobile-first: 1 column → 2 → 3 */
.services-grid {
  display: -webkit-grid;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 1.8rem;
}

@media (min-width: 600px) {
  .services-grid {
    -ms-grid-columns: 1fr 1.8rem 1fr;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .services-grid {
    -ms-grid-columns: 1fr 1.8rem 1fr 1.8rem 1fr;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   SERVICE CARD
   ============================================================ */
.svc-card {
  position: relative;
  background: var(--deep3);
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transition: border-color .4s, -webkit-box-shadow .4s, -webkit-transform .4s;
          transition: border-color .4s, box-shadow .4s, transform .4s;
  /* Initial hidden state for scroll reveal */
  opacity: 0;
  -webkit-transform: translateY(32px);
      -ms-transform: translateY(32px);
          transform: translateY(32px);
  text-decoration: none;
  color: inherit;
}

.svc-card.visible {
  -webkit-animation: cardReveal .7s cubic-bezier(.22,.61,.36,1) both;
          animation: cardReveal .7s cubic-bezier(.22,.61,.36,1) both;
}

.svc-card:hover {
  border-color: var(--border2);
  -webkit-box-shadow: 0 28px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(232,121,154,.1);
          box-shadow: 0 28px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(232,121,154,.1);
  -webkit-transform: translateY(-6px);
      -ms-transform: translateY(-6px);
          transform: translateY(-6px);
}

/* Featured variant */
.svc-card.featured {
  border-color: rgba(201,149,110,.3);
  background: -webkit-linear-gradient(160deg, rgba(62,20,96,.7), var(--deep3));
  background:         linear-gradient(160deg, rgba(62,20,96,.7), var(--deep3));
}

.svc-card.featured:hover {
  border-color: var(--gold);
}

/* ── IMAGE WRAP ── */
.svc-img-wrap {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  background: -webkit-linear-gradient(145deg, var(--deep3), var(--deep2));
  background:         linear-gradient(145deg, var(--deep3), var(--deep2));
}

/* Curtain reveal — slides off top when card becomes visible */
.svc-curtain {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--deep);
  z-index: 10;
  -webkit-transform: scaleY(1);
      -ms-transform: scaleY(1);
          transform: scaleY(1);
  -webkit-transform-origin: top center;
      -ms-transform-origin: top center;
          transform-origin: top center;
  -webkit-transition: -webkit-transform .9s cubic-bezier(.77,0,.18,1);
          transition: transform .9s cubic-bezier(.77,0,.18,1);
}

.svc-card.visible .svc-curtain {
  -webkit-transform: scaleY(0);
      -ms-transform: scaleY(0);
          transform: scaleY(0);
}

/* Photo */
.svc-img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  -webkit-transition: -webkit-transform .7s cubic-bezier(.22,.61,.36,1);
          transition: transform .7s cubic-bezier(.22,.61,.36,1);
}

.svc-card:hover .svc-img {
  -webkit-transform: scale(1.07);
      -ms-transform: scale(1.07);
          transform: scale(1.07);
}

/* Bottom gradient overlay */
.svc-img-grad {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: -webkit-linear-gradient(top, transparent 0%, rgba(18,5,28,.9) 100%);
  background:         linear-gradient(to bottom, transparent 0%, rgba(18,5,28,.9) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Top vignette */
.svc-img-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30%;
  background: -webkit-linear-gradient(bottom, transparent, rgba(18,5,28,.4));
  background:         linear-gradient(to top, transparent, rgba(18,5,28,.4));
  z-index: 2;
  pointer-events: none;
}

/* Shimmer sweep on hover */
.svc-shimmer {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 3;
  background: -webkit-linear-gradient(105deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
  background:         linear-gradient(105deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
  background-size: 200% 100%;
  -webkit-background-position: -100% 0;
          background-position: -100% 0;
  -webkit-transition: background-position .7s ease;
          transition: background-position .7s ease;
  pointer-events: none;
}

.svc-card:hover .svc-shimmer {
  -webkit-background-position: 200% 0;
          background-position: 200% 0;
}

/* Category pill */
.svc-cat {
  position: absolute;
  top: .9rem; left: .9rem;
  z-index: 5;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  padding: .3rem .85rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(24,7,32,.72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  opacity: 0;
  -webkit-transform: translateY(-6px);
      -ms-transform: translateY(-6px);
          transform: translateY(-6px);
  -webkit-transition: opacity .35s .2s, -webkit-transform .35s .2s;
          transition: opacity .35s .2s, transform .35s .2s;
}

.svc-card.visible .svc-cat {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.svc-cat.gold {
  border-color: rgba(201,149,110,.45);
  color: var(--gold2);
}

/* Duration badge */
.svc-duration {
  position: absolute;
  bottom: .85rem; right: .9rem;
  z-index: 5;
  font-size: .6rem;
  letter-spacing: .1em;
  color: var(--rose3);
  background: rgba(24,7,32,.75);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(232,121,154,.2);
  border-radius: 3px;
  padding: .25rem .65rem;
  opacity: 0;
  -webkit-transform: translateY(6px);
      -ms-transform: translateY(6px);
          transform: translateY(6px);
  -webkit-transition: opacity .35s .3s, -webkit-transform .35s .3s;
          transition: opacity .35s .3s, transform .35s .3s;
}

.svc-card.visible .svc-duration {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

/* Availability dot — reuses pulse-dot from style.css */
.svc-avail {
  position: absolute;
  top: .9rem; right: .9rem;
  z-index: 5;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #4ade80;
  -webkit-box-shadow: 0 0 8px rgba(74,222,128,.8);
          box-shadow: 0 0 8px rgba(74,222,128,.8);
  -webkit-animation: pulse-dot 2s ease-in-out infinite;
          animation: pulse-dot 2s ease-in-out infinite;
}

/* ── CARD BODY ── */
.svc-body {
  padding: 1.6rem 1.7rem 1.8rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
}

/* Top accent line inside body */
.svc-body::before {
  content: '';
  position: absolute;
  top: 0; left: 1.7rem; right: 1.7rem;
  height: 1px;
  background: var(--border);
  -webkit-transition: background .4s;
          transition: background .4s;
}

.svc-card:hover .svc-body::before         { background: rgba(232,121,154,.35); }
.svc-card.featured .svc-body::before      { background: rgba(201,149,110,.25); }

/* Service number */
.svc-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: .82rem;
  color: var(--rose);
  font-weight: 300;
  letter-spacing: .12em;
  margin-bottom: .5rem;
  opacity: .7;
}

.svc-card.featured .svc-num { color: var(--gold); }

/* Card title */
.svc-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.42rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: .5rem;
  letter-spacing: .01em;
  -webkit-transition: color .25s;
          transition: color .25s;
}

.svc-card:hover .svc-title           { color: var(--rose3); }
.svc-card.featured .svc-title        { color: var(--gold2); }
.svc-card.featured:hover .svc-title  { color: #f0d5a8; }

/* Animated underline */
.svc-title-line {
  width: 0;
  height: 1px;
  background: var(--rose);
  margin-bottom: 1rem;
  opacity: .6;
  -webkit-transition: width .5s cubic-bezier(.22,.61,.36,1);
          transition: width .5s cubic-bezier(.22,.61,.36,1);
}

.svc-card.visible .svc-title-line         { width: 36px; }
.svc-card.featured .svc-title-line        { background: var(--gold); }

/* Description */
.svc-desc {
  font-size: .9rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.85;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-bottom: 1.4rem;
}

/* Highlights/tags row */
.svc-highlights {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1.5rem;
}

.svc-hl {
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .28rem .75rem;
  border-radius: 20px;
  border: 1px solid rgba(232,121,154,.25);
  color: var(--rose3);
  background: rgba(232,121,154,.06);
  -webkit-transition: all .2s;
          transition: all .2s;
}

.svc-card:hover .svc-hl {
  border-color: rgba(232,121,154,.45);
  background: rgba(232,121,154,.12);
}

.svc-hl.gold {
  border-color: rgba(201,149,110,.3);
  color: var(--gold2);
  background: rgba(201,149,110,.07);
}

.svc-card:hover .svc-hl.gold {
  border-color: rgba(201,149,110,.55);
  background: rgba(201,149,110,.14);
}

/* Price row */
.svc-price-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: .5rem;
  margin-bottom: 1.4rem;
}

.svc-price-from {
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 300;
}

.svc-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--rose3);
  line-height: 1;
  letter-spacing: .02em;
}

.svc-card.featured .svc-price { color: var(--gold2); }

.svc-price-unit {
  font-size: .7rem;
  color: var(--muted);
  font-weight: 300;
}

/* CTA button */
.svc-btn {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: .6rem;
  background: transparent;
  border: 1px solid rgba(232,121,154,.35);
  color: var(--rose3);
  padding: .85rem 1.5rem;
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  -webkit-transition: all .3s;
          transition: all .3s;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.svc-btn::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: -webkit-linear-gradient(135deg, var(--rose), var(--rose2));
  background:         linear-gradient(135deg, var(--rose), var(--rose2));
  opacity: 0;
  -webkit-transition: opacity .3s;
          transition: opacity .3s;
}

.svc-btn:hover::before { opacity: 1; }

.svc-btn:hover {
  color: #fff;
  border-color: transparent;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

.svc-btn span { position: relative; z-index: 1; }

.svc-btn svg {
  position: relative;
  z-index: 1;
  -webkit-transition: -webkit-transform .3s;
          transition: transform .3s;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}

.svc-btn:hover svg {
  -webkit-transform: translateX(3px);
      -ms-transform: translateX(3px);
          transform: translateX(3px);
}

/* Featured button variant */
.svc-card.featured .svc-btn {
  border-color: rgba(201,149,110,.4);
  color: var(--gold2);
}

.svc-card.featured .svc-btn::before {
  background: -webkit-linear-gradient(135deg, var(--gold), #b07840);
  background:         linear-gradient(135deg, var(--gold), #b07840);
}

.svc-card.featured .svc-btn:hover { color: #fff; }

/* ── FEATURED BADGE ── */
.svc-featured-badge {
  position: absolute;
  top: -.5px; right: 1.5rem;
  background: -webkit-linear-gradient(135deg, var(--gold), #b07840);
  background:         linear-gradient(135deg, var(--gold), #b07840);
  color: #fff;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  padding: .28rem .9rem;
  border-radius: 0 0 6px 6px;
  z-index: 6;
}

/* ── WIDE CARD — full-width on desktop ── */
.svc-card.wide {
  grid-column: 1 / -1;
  display: -webkit-grid;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.svc-card.wide .svc-img-wrap {
  height: 100%;
  min-height: 320px;
}

.svc-card.wide .svc-body {
  padding: 2.4rem 2.8rem;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.svc-card.wide .svc-title { font-size: 1.85rem; }
.svc-card.wide .svc-desc  { font-size: .95rem; }

/* Wide card stacks on mobile */
@media (max-width: 599px) {
  .svc-card.wide {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    grid-column: 1;
  }
  .svc-card.wide .svc-img-wrap { min-height: 240px; }
  .svc-card.wide .svc-body     { padding: 1.6rem 1.7rem 1.8rem; }
  .svc-card.wide .svc-title    { font-size: 1.42rem; }
}

/* ============================================================
   SECTION HEADER (inside services grid section)
   ============================================================ */
.svc-section-head {
  text-align: center;
  margin-bottom: 4rem;
}

.svc-section-head .sec-tag {
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.svc-section-head .sec-tag::before { display: none; }

.svc-section-sub {
  font-size: .97rem;
  color: var(--muted);
  font-weight: 300;
  max-width: 560px;
  margin: .6rem auto 0;
  line-height: 1.85;
}

/* ============================================================
   WHY CHOOSE STRIP
   ============================================================ */
.why-strip {
  background: var(--deep3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 3.5rem 1.4rem;
}

.why-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: -webkit-grid;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5rem 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .why-inner {
    -ms-grid-columns: 1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr;
    grid-template-columns: repeat(4, 1fr);
  }
}

.why-item { text-align: center; }

.why-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(232,121,154,.08);
  border: 1px solid rgba(232,121,154,.2);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto .9rem;
  font-size: 1.3rem;
  -webkit-transition: all .3s;
          transition: all .3s;
}

.why-item:hover .why-icon {
  background: rgba(232,121,154,.15);
  border-color: var(--rose);
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: 0 10px 30px rgba(232,121,154,.25);
          box-shadow: 0 10px 30px rgba(232,121,154,.25);
}

.why-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .35rem;
}

.why-text {
  font-size: .82rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.7;
}

/* ============================================================
   PROCESS / HOW TO BOOK SECTION
   ============================================================ */
.process-sec {
  background: var(--deep2);
  padding: 5rem 1.4rem;
}

.process-inner {
  max-width: 900px;
  margin: 0 auto;
}

.process-steps {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
  position: relative;
  margin-top: 3.5rem;
}

/* Vertical connector line */
.process-steps::before {
  content: '';
  position: absolute;
  left: 22px; top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
}

@media (min-width: 600px) {
  .process-steps::before { left: 28px; }
}

.process-step {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 1.8rem;
  padding-bottom: 2.8rem;
  position: relative;
  opacity: 0;
  -webkit-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity .6s ease, -webkit-transform .6s ease;
          transition: opacity .6s ease, transform .6s ease;
}

.process-step.visible {
  opacity: 1;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

.process-step:last-child { padding-bottom: 0; }

.step-num {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--deep3);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: var(--rose3);
  font-weight: 300;
  position: relative;
  z-index: 2;
  -webkit-transition: all .35s;
          transition: all .35s;
}

.process-step.visible .step-num {
  border-color: var(--rose);
  background: rgba(232,121,154,.08);
}

.step-content { padding-top: .6rem; }

.step-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: var(--text);
  font-weight: 400;
  margin-bottom: .4rem;
}

.step-text {
  font-size: .9rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.85;
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.svc-cta {
  padding: 6rem 1.4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    -webkit-linear-gradient(135deg, rgba(24,7,32,.9), rgba(50,15,74,.85), rgba(24,7,32,.9)),
    url('/images/experience-budapest.svg') center center / cover no-repeat;
  background:
            linear-gradient(135deg, rgba(24,7,32,.9), rgba(50,15,74,.85), rgba(24,7,32,.9)),
            url('/images/experience-budapest.svg') center center / cover no-repeat;
  border-top: 1px solid var(--border);
}

.svc-cta::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: -webkit-radial-gradient(ellipse 70% 70% at 50% 50%, rgba(232,121,154,.14), transparent 65%);
  background:         radial-gradient(ellipse 70% 70% at 50% 50%, rgba(232,121,154,.14), transparent 65%);
}

.svc-cta .sec-tag {
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 2;
}

.svc-cta .sec-tag::before { display: none; }

.svc-cta h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}

.svc-cta h2 em {
  font-style: italic;
  color: var(--rose3);
}

.svc-cta p {
  font-size: 1.02rem;
  color: var(--muted);
  font-weight: 300;
  max-width: 480px;
  margin: 0 auto 2.4rem;
  line-height: 1.85;
  position: relative;
  z-index: 2;
}

.svc-cta-btns {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

/* ============================================================
   MOBILE HAMBURGER MENU
   ============================================================ */
.nav-hamburger {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: .3rem;
  border: none;
  background: transparent;
  z-index: 201;
  -webkit-tap-highlight-color: transparent;
}

.nav-hamburger span {
  display: block;
  width: 22px; height: 1px;
  background: var(--text);
  -webkit-transition: all .3s;
          transition: all .3s;
}

.nav-hamburger.open span:nth-child(1) {
  -webkit-transform: rotate(45deg) translate(4px, 4px);
      -ms-transform: rotate(45deg) translate(4px, 4px);
          transform: rotate(45deg) translate(4px, 4px);
}

.nav-hamburger.open span:nth-child(2) { opacity: 0; }

.nav-hamburger.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg) translate(4px, -4px);
      -ms-transform: rotate(-45deg) translate(4px, -4px);
          transform: rotate(-45deg) translate(4px, -4px);
}

@media (min-width: 900px) {
  .nav-hamburger { display: none; }
}

/* ── MOBILE MENU OVERLAY ── */
.mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 199;
  background: rgba(18,5,28,.97);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.8rem;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity .3s ease;
          transition: opacity .3s ease;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  color: var(--text);
  text-decoration: none;
  letter-spacing: .06em;
  -webkit-transition: color .2s;
          transition: color .2s;
}

.mobile-menu a:hover { color: var(--rose3); }

.mobile-menu .mm-phone {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.1rem;
  color: var(--rose3);
  margin-top: .5rem;
}

@media (min-width: 900px) {
  .mobile-menu { display: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .svc-hero-eyebrow,
  .svc-hero h1,
  .svc-hero-desc,
  .svc-hero-stats {
    opacity: 1 !important;
    -webkit-animation: none !important;
            animation: none !important;
  }

  .svc-card {
    opacity: 1 !important;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
  }

  .svc-card.visible {
    -webkit-animation: none !important;
            animation: none !important;
  }

  .svc-curtain {
    -webkit-transition: none !important;
            transition: none !important;
    -webkit-transform: scaleY(0) !important;
        -ms-transform: scaleY(0) !important;
            transform: scaleY(0) !important;
  }

  .svc-img { -webkit-transition: none !important; transition: none !important; }

  .process-step {
    opacity: 1 !important;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
  }
}