/*
  BlessKuts – Services page. Loaded after styles.css, which supplies the nav, buttons, footer and colour tokens.
  Sizes follow the 941px-wide reference scaled to ~1440px (about 1.53x).
*/

.page-services { --sv-line: rgba(237, 28, 36, .55); --sv-border: rgba(255, 255, 255, .12); --sv-card: #131313; --sv-head: 'Poppins', var(--body); --sv-gutter: clamp(18px, 2.2vw, 36px); }
.sv-wrap { width: 100%; max-width: 1800px; margin-inline: auto; padding-inline: var(--sv-gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sv-eyebrow { color: var(--red-bright); font-size: clamp(11px, .85vw, 13px); font-weight: 800; letter-spacing: .26em; text-transform: uppercase; }
.sv-title { margin-top: 6px; font: 800 clamp(32px, 3.3vw, 50px) / 1.05 var(--sv-head); letter-spacing: -.015em; color: #fff; }
.sv-title span { color: var(--red); }
.sv-title--md { font-size: clamp(26px, 2.5vw, 38px); }
.sv-lead { margin-top: 10px; color: #d0d0d0; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.5; }
.sv-lead a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.tbc { color: #ffb4b8; font-weight: 700; }
.footer__links a[aria-current="page"] { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Hero ------------------------------------------------------------------- */
.sv-hero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: calc(var(--nav-h) + clamp(300px, 28vw, 420px)); padding-top: var(--nav-h);
  background: radial-gradient(ellipse 45% 80% at 72% 55%, rgba(140, 10, 16, .4), transparent 70%), #0b0b0b;
  border-bottom: 1px solid var(--sv-line);
}
.sv-hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: 70%; }
.sv-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 55% 28%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 3%, rgba(0,0,0,.12) 10%, rgba(0,0,0,.4) 20%, rgba(0,0,0,.75) 32%, #000 46%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 3%, rgba(0,0,0,.12) 10%, rgba(0,0,0,.4) 20%, rgba(0,0,0,.75) 32%, #000 46%);
}
.sv-hero__media::after { content: ''; position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(0deg, #0b0b0b, transparent); pointer-events: none; }
.sv-hero__content { position: relative; z-index: 1; padding-block: clamp(28px, 3vw, 48px); }
.sv-hero__eyebrow { color: #fff; font-size: clamp(11px, .85vw, 13px); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.sv-hero__title { margin-top: 6px; font: 800 clamp(58px, 6.4vw, 96px) / 1 var(--sv-head); letter-spacing: -.03em; color: #fff; }
.sv-hero__title span { color: var(--red); }
.sv-hero__sub { margin-top: 8px; color: #fff; font-size: clamp(17px, 1.45vw, 22px); font-weight: 500; }
.sv-hero__text { max-width: 440px; margin-top: 16px; color: #e3e3e3; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.55; }

/* Filters + service grid -------------------------------------------------- */
.sv-services {
  padding: clamp(28px, 2.6vw, 40px) 0 clamp(40px, 3.4vw, 54px);
  background: radial-gradient(ellipse 40% 60% at 0% 100%, rgba(110, 0, 12, .18), transparent 60%), #0b0b0b;
  border-bottom: 1px solid var(--sv-line);
}
.sv-filters { display: flex; justify-content: center; gap: clamp(10px, 1.1vw, 18px); scrollbar-width: none; }
.sv-filters::-webkit-scrollbar { display: none; }
.sv-filter {
  flex: none; min-width: clamp(104px, 9.4vw, 136px); height: 42px; padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 5px; background: #0f0f0f; color: #f2f2f2; font-size: 14px; font-weight: 500;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease), color .2s;
}
.sv-filter:hover { border-color: rgba(237, 28, 36, .8); background: #171111; }
.sv-filter.is-active { border-color: var(--red); background: var(--red); color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(237, 28, 36, .25); }

.sv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.6vw, 24px) clamp(18px, 2.2vw, 30px); margin-top: clamp(24px, 2.3vw, 34px); }
.sv-card {
  position: relative; display: grid; grid-template-columns: 46% 1fr; min-height: clamp(178px, 14.2vw, 206px);
  border: 1px solid var(--sv-border); border-radius: 6px; background: var(--sv-card); overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), opacity .2s var(--ease), transform .2s var(--ease);
}
.sv-card.is-switching { opacity: 0; transform: translateY(6px); }
.sv-card:hover { border-color: rgba(237, 28, 36, .65); box-shadow: 0 10px 28px rgba(110, 0, 12, .35); }
.sv-card__img { position: relative; overflow: hidden; }
.sv-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.sv-card:hover .sv-card__img img { transform: scale(1.03); }
.sv-card__body { position: relative; display: flex; flex-direction: column; padding: clamp(14px, 1.3vw, 20px) clamp(16px, 1.6vw, 24px); }
.sv-card__cat { color: var(--red-bright); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.sv-card__name { margin-top: 4px; font: 700 clamp(21px, 1.75vw, 27px) / 1.15 var(--sv-head); color: #fff; }
.sv-card__desc { margin-top: 8px; color: #cfcfcf; font-size: clamp(13px, .95vw, 14.5px); line-height: 1.45; max-width: 290px; }
.sv-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; }
.sv-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px; background: var(--red); color: #fff; font: 700 15px / 1 var(--brand); letter-spacing: .02em; }
.sv-card__go, .sv-combo__go {
  display: grid; place-items: center; width: 38px; height: 38px; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 50%; color: #fff;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.sv-card__go svg, .sv-combo__go svg { width: 17px; height: 17px; }
.sv-card__go::after { content: ''; position: absolute; inset: 0; } /* whole card is clickable */
.sv-card:hover .sv-card__go, .sv-card__go:focus-visible { background: var(--red); border-color: var(--red); }
.sv-card__go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sv-noscript { display: grid; gap: 8px; margin-top: 24px; color: #eee; }

/* Popular combos ----------------------------------------------------------- */
.sv-combos {
  padding: clamp(36px, 3.2vw, 52px) 0 clamp(40px, 3.6vw, 56px);
  background:
    radial-gradient(ellipse 30% 70% at 0% 55%, rgba(115, 0, 12, .32), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 115%, rgba(115, 0, 12, .3), transparent 70%),
    #0b0b0b;
  border-bottom: 1px solid var(--sv-line);
}
.sv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sv-outline-btn {
  display: inline-flex; align-items: center; gap: 10px; flex: none; height: 44px; padding: 0 20px; border: 1px solid var(--red); border-radius: 5px;
  color: #fff; font-size: 14px; font-weight: 600; transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.sv-outline-btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.sv-outline-btn:hover { background: rgba(237, 28, 36, .14); }
.sv-outline-btn:hover svg { transform: translateX(3px); }
.sv-combo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.5vw, 22px); margin-top: clamp(22px, 2vw, 30px); }
.sv-combo {
  display: flex; flex-direction: column; border: 1px solid var(--sv-border); border-radius: 6px; background: var(--sv-card); overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.sv-combo:hover { transform: translateY(-3px); border-color: rgba(237, 28, 36, .6); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.sv-combo__img { aspect-ratio: 16 / 9.4; overflow: hidden; }
.sv-combo__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.sv-combo:hover .sv-combo__img img { transform: scale(1.04); }
.sv-combo__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.sv-combo__body h3 { font: 700 clamp(17px, 1.3vw, 20px) / 1.2 var(--sv-head); color: #fff; }
.sv-combo__body p { margin-top: 6px; color: #cfcfcf; font-size: 13.5px; line-height: 1.45; }
.sv-combo__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.sv-combo__price { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.sv-pill--muted { gap: 5px; background: rgba(237, 28, 36, .2); border: 1px solid rgba(237, 28, 36, .7); }
.sv-pill--muted small { font: 600 11px / 1 var(--body); letter-spacing: 0; color: #f0c4c6; }
.sv-tbc { color: #ffb4b8; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.sv-was { color: #9a9a9a; font-size: 14px; }
.sv-combo__go { border-color: var(--red); flex: none; }
.sv-combo:hover .sv-combo__go, .sv-combo__go:focus-visible { background: var(--red); }

/* Pricing strip ------------------------------------------------------------ */
.sv-pricing {
  padding: clamp(24px, 2.2vw, 34px) 0;
  background: linear-gradient(90deg, #4a0508 0%, #2a0305 38%, #160203 100%);
  border-top: 1px solid var(--sv-line); border-bottom: 1px solid var(--sv-line);
}
.sv-pricing__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: clamp(20px, 3vw, 48px); }
.sv-prices { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(8px, .9vw, 14px); }
.sv-price {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 124px; padding: 14px 6px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 6px; background: rgba(10, 10, 10, .55); text-align: center;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background-color .25s var(--ease);
}
.sv-price:hover { border-color: rgba(237, 28, 36, .75); transform: translateY(-2px); background: rgba(40, 6, 8, .65); }
.sv-price svg { width: 30px; height: 30px; color: var(--red-bright); stroke-width: 1.7; }
.sv-price span { color: #e6e6e6; font-size: 13.5px; }
.sv-price strong { color: #fff; font: 700 19px / 1 var(--brand); }

/* Booking banner ----------------------------------------------------------- */
.sv-cta { position: relative; overflow: hidden; background: linear-gradient(90deg, #120203 0%, #2e0406 45%, #160203 100%); border-bottom: 1px solid var(--sv-line); }
.sv-cta__bg { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; }
.sv-cta__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 100%); mask-image: linear-gradient(90deg, #000 40%, transparent 100%);
}
.sv-cta__inner { position: relative; display: flex; align-items: center; gap: 28px; min-height: clamp(150px, 11.4vw, 168px); padding-left: max(30%, 300px); }
.sv-cta__text { margin-top: 8px; color: #e8e8e8; font-size: clamp(14px, 1.1vw, 17px); }
.sv-cta__btn { margin-left: auto; height: 48px; padding: 0 22px; font-size: 15px; }
.sv-cta__btn svg { width: 17px; height: 17px; }
.sv-cta.is-flash .sv-cta__btn { animation: sv-flash 1.1s var(--ease); }
@keyframes sv-flash { 40% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .4); } }

/* FAQ ---------------------------------------------------------------------- */
.sv-faq { padding: clamp(36px, 3.4vw, 54px) 0; background: radial-gradient(ellipse 35% 80% at 0% 50%, rgba(110, 0, 12, .22), transparent 70%), #0b0b0b; }
.sv-faq__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.sv-faq__intro .sv-lead { max-width: 440px; }
.faq { display: grid; gap: 10px; }
.faq__item { border: 1px solid var(--sv-border); border-radius: 5px; background: #121212; transition: border-color .25s, background-color .25s; }
.faq__item.is-open { border-color: var(--sv-line); background: #161010; }
.faq__item h3 { margin: 0; }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 13px 18px; border: 0; background: none; color: #f2f2f2; font-size: 14.5px; font-weight: 500; text-align: left; }
.faq__q svg { width: 18px; height: 18px; flex: none; color: #fff; transition: transform .3s var(--ease), color .2s; }
.faq__item.is-open .faq__q svg { transform: rotate(45deg); color: var(--red-bright); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 18px 15px; color: #cfcfcf; font-size: 14px; line-height: 1.6; opacity: 0; transition: opacity .3s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a p { opacity: 1; }
.faq__a a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Tablet ------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .sv-hero__media { width: 72%; }
  .sv-filters { justify-content: flex-start; overflow-x: auto; margin-inline: calc(-1 * var(--sv-gutter)); padding-inline: var(--sv-gutter); }
  .sv-card { grid-template-columns: 42% 1fr; }
  .sv-combo-grid { grid-template-columns: repeat(2, 1fr); }
  .sv-pricing__inner { grid-template-columns: 1fr; }
  .sv-prices { grid-template-columns: repeat(3, 1fr); }
  .sv-cta__bg { width: 45%; opacity: .55; }
  .sv-cta__inner { flex-wrap: wrap; padding-left: var(--sv-gutter); padding-block: 30px; }
  .sv-cta__btn { margin-left: 0; }
  .sv-faq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) { .sv-grid { grid-template-columns: 1fr; } }

/* Phone -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .sv-hero { display: block; min-height: 0; }
  .sv-hero__media { position: relative; top: 0; width: 100%; height: 260px; }
  .sv-hero__media img { -webkit-mask-image: none; mask-image: none; }
  .sv-hero__media::after { height: 60%; }
  .sv-hero__content { margin-top: -64px; padding-top: 0; padding-bottom: 32px; }
  .sv-card { grid-template-columns: 38% 1fr; min-height: 168px; }
  .sv-card__body { padding: 14px; }
  .sv-card__desc { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .sv-pill { height: 30px; padding: 0 13px; font-size: 14px; }
  .sv-head { flex-direction: column; align-items: flex-start; }
  .sv-prices { grid-template-columns: repeat(3, 1fr); }
  .sv-price { min-height: 104px; }
  .sv-cta__btn { width: 100%; justify-content: center; }
  .sv-cta__bg { width: 100%; opacity: .22; }
}
@media (max-width: 520px) {
  .sv-combo-grid { grid-template-columns: 1fr; }
  .sv-prices { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px) {
  .sv-card { grid-template-columns: 1fr; }
  .sv-card__img { aspect-ratio: 16 / 9; }
}

.sv-pricing__copy .sv-title { white-space: nowrap; }
@media (max-width: 1023px) { .sv-pricing__copy .sv-title { white-space: normal; } }