.sd-hero-bg-img {
  position: absolute;inset: 0;
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
}

.sd-hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(8,8,14,0.94) 0%,
    rgba(8,8,14,0.82) 35%,
    rgba(8,8,14,0.40) 65%,
    rgba(8,8,14,0.08) 100%
  );
}

/* ══════════════════════════════════════════════════
   SERVICE DETAIL PAGE — Dr Maruf
   Design: Surgical precision × luxury editorial
══════════════════════════════════════════════════ */

/* ── PAGE WRAPPER ── */
.sd-page {
  background: var(--black);
  min-height: 100vh;
  /* No overflow-x here: an ancestor with any overflow value other than
     'visible' becomes the containing block for position:sticky descendants,
     which silently breaks the sidebar's sticky behavior. Horizontal-scroll
     protection is already provided globally by html/body in index.css. */
}

/* ── SHARED UTILS ── */
.sd-num {
  font-family: 'Georgia', serif;
  font-size: clamp(0.65rem, 1vw, 0.75rem);
  letter-spacing: 0.25em;
  color: rgba(var(--accRgb), 0.7);
  font-style: italic;
}

.sd-section-header {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.sd-section-title {
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
  line-height: 1.1;
}

/* ═══════════════════════════════
   HERO
═══════════════════════════════ */
.sd-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 110px clamp(1.5rem, 6vw, 6rem) 5rem;

}

/* Glowing orbs */
.sd-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  will-change: transform;
  z-index: 2;
}
.sd-hero-orb--1 {
  width: min(700px, 80vw);
  height: min(700px, 80vw);

  top: -10%;
  right: -10%;
}
.sd-hero-orb--2 {
  width: min(400px, 60vw);
  height: min(400px, 60vw);

  bottom: 10%;
  left: -5%;
}
.sd-hero-orb--3 {
  width: min(300px, 50vw);
  height: min(300px, 50vw);

  top: 40%;
  left: 30%;
}

.sd-hero-content {
  position: relative;
  z-index: 3;
  max-width: 900px;
}

.sd-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: clamp(0.7rem, 1.2vw, 0.8rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(var(--accRgb), 0.9);
  margin-bottom: 1.4rem;
}
.sd-hero-eyebrow-line {
  display: block;
  width: 36px;
  height: 1px;
  background: rgba(var(--accRgb), 0.5);
}

.sd-hero-title {
  font-size: clamp(3.5rem, 10vw, 9rem);
  font-weight: 200;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--white);
  margin: 0 0 1.8rem;
  /* clip-path animated by GSAP */
  will-change: clip-path;
  /* Some translated service names are one long unbroken word (e.g. Russian
     "Абдоминопластика") with no space for the browser's default wrapping
     to break on. Without this, that single word silently overflows past
     .sd-hero's overflow:hidden and gets clipped instead of wrapping to a
     second line — this lets it wrap mid-word as a last resort. */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Long translated names (e.g. Russian "Абдоминопластика" — one unbroken
   word, no space to wrap on) look better shrunk down to fit closer to one
   line than blown up to 9rem and forced to wrap. Short names (English
   "Rhinoplasty", Uzbek "Burun plastikasi") keep the full dramatic size. */
.sd-hero-title--long {
  font-size: clamp(2.8rem, 7.5vw, 6.5rem);
}
.sd-hero-title--xlong {
  font-size: clamp(2.2rem, 6vw, 5rem);
}

.sd-hero-tagline {
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  color: var(--muted);
  letter-spacing: 0.12em;
  font-weight: 300;
  margin: 0 0 2.4rem;
}

.sd-hero-cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.sd-hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  background: rgba(var(--accRgb), 0.18);
  border: 1px solid rgba(var(--accRgb), 0.4);
  color: rgba(var(--accRgb), 1);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.25s, border-color 0.25s;
}
.sd-hero-btn-primary:hover {
  background: rgba(var(--accRgb), 0.28);
  border-color: rgba(var(--accRgb), 0.7);
}

.sd-hero-btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 2rem;
  background: transparent;
  border: 1px solid rgba(180,185,200,0.2);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: border-color 0.25s, color 0.25s;
}
.sd-hero-btn-outline:hover {
  border-color: var(--gold);
  color: var(--white);
}

/* Scroll indicator */
.sd-hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: clamp(1.5rem, 6vw, 6rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 2;
}
.sd-hero-scroll span {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, transparent, var(--gold));
  animation: sd-scroll-line 2s ease-in-out infinite;
}
@keyframes sd-scroll-line {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50%       { opacity: 1;   transform: scaleY(0.6); transform-origin: top; }
}

/* Marquee */
.sd-marquee-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  border-top: 1px solid rgba(180,185,200,0.06);
  padding: 0.9rem 0;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
  z-index: 2;
}
.sd-marquee {
  display: flex;
  gap: 0;
  animation: sd-marquee-anim 18s linear infinite;
  width: max-content;
}
.sd-marquee-item {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(var(--accRgb), 0.5);
  padding: 0 2.5rem;
  white-space: nowrap;
}
.sd-marquee-dot {
  font-size: 0.5rem;
  opacity: 0.6;
}
@keyframes sd-marquee-anim {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════
   OVERVIEW
═══════════════════════════════ */
.sd-overview {
  padding: clamp(5rem, 10vw, 8rem) clamp(1.5rem, 6vw, 6rem);
  border-bottom: 1px solid rgba(180,185,200,0.06);
  position: relative;
  /* overflow-x (not overflow, to avoid any accidental vertical clipping)
     — this section sits after .sd-content-grid's sticky sidebar in the
     DOM, not inside it, so clipping here is safe (see the overflow-x
     writeup in src/styles/index.css: never on .sd-page/html/body/#root,
     but individual sibling sections are fine and is how hero/specs/
     rehab/scars/cta already do it). Closes off mobile horizontal-scroll
     leaks from any long untranslated word or decorative element here. */
  overflow-x: hidden;
}

.sd-overview::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accRgb), 0.3), transparent);
}

.sd-overview-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 3rem;
  align-items: start;
}

.sd-overview-label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.sd-overview-quote {
  font-size: clamp(1.15rem, 2.5vw, 1.6rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--white);
  margin: 0 0 2rem;
  border-left: 2px solid rgba(var(--accRgb), 0.5);
  padding-left: 2rem;
  font-style: italic;
}

.sd-overview-langs {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.sd-dot { opacity: 0.4; }

/* ═══════════════════════════════
   SPECS
═══════════════════════════════ */
.sd-specs {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 6vw, 6rem);
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

.sd-specs::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(var(--accRgb), 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.sd-specs-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.sd-specs-label {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Distinct, separated cards (real gap, individually rounded) instead of
   one hairline-divided block — reads as four premium tiles rather than
   a flat spreadsheet row. Each has its own subtle border + radial glow
   that blooms on hover, and a circular icon badge (matches the
   rehab-timeline icon treatment elsewhere on this page) instead of a
   bare emoji, which rendered as a different, clashing icon style per
   OS/browser and looked out of place next to the page's custom SVGs. */
.sd-specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.sd-spec-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.2rem 1.5rem 1.8rem;
  background: linear-gradient(160deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid rgba(180,185,200,0.1);
  border-radius: 10px;
  gap: 0.9rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s, transform 0.35s, background 0.35s;
}

.sd-spec-card::before {
  /* Soft glow blooming from the top edge on hover — purely decorative,
     sits behind the content (z-index default, icon/text given z-index
     below) so it never affects legibility. */
  content: '';
  position: absolute;
  top: -40%; left: 50%;
  width: 140%; height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accRgb), 0.14) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.sd-spec-card:hover {
  border-color: rgba(var(--accRgb), 0.35);
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  transform: translateY(-3px);
}
.sd-spec-card:hover::before {
  opacity: 1;
}

.sd-spec-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 1.3rem;
  line-height: 1;
  border-radius: 50%;
  color: rgba(var(--accRgb), 0.95);
  background: rgba(var(--accRgb), 0.1);
  border: 1px solid rgba(var(--accRgb), 0.25);
  transition: background 0.35s, border-color 0.35s, transform 0.35s;
}
.sd-spec-card:hover .sd-spec-icon {
  background: rgba(var(--accRgb), 0.18);
  border-color: rgba(var(--accRgb), 0.5);
  transform: scale(1.06);
}

.sd-spec-val {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.01em;
  text-align: center;
}

.sd-spec-label {
  position: relative;
  z-index: 1;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(var(--accRgb), 0.7);
}

/* ═══════════════════════════════
   PROCESS / STEPS
═══════════════════════════════ */
.sd-process {
  padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 6vw, 6rem);
  position: relative;
  overflow-x: hidden; /* zig-zag step timeline — see .sd-overview's note */
}

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

.sd-steps-wrap {
  position: relative;
  padding: 1rem 0;
}

.sd-steps-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(var(--accRgb), 0.3), transparent);
  transform: translateX(-50%);
  will-change: transform;
}

.sd-step {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: start;
  margin-bottom: 3.5rem;
  gap: 0;
}

.sd-step--left .sd-step-num {
  grid-column: 2;
  grid-row: 1;
}
.sd-step--left .sd-step-card {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding-right: 2.5rem;
}
.sd-step--right .sd-step-num {
  grid-column: 2;
  grid-row: 1;
}
.sd-step--right .sd-step-card {
  grid-column: 3;
  grid-row: 1;
  text-align: left;
  padding-left: 2.5rem;
}

.sd-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accRgb), 0.4);
  background: var(--black);
  color: rgba(var(--accRgb), 0.9);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  font-family: 'Georgia', serif;
  font-style: italic;
  justify-self: center;
  position: relative;
  z-index: 1;
}

.sd-step-card {
  padding-top: 0.6rem;
}

.sd-step-title {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--white);
  margin: 0 0 0.55rem;
}

.sd-step-desc {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

/* ═══════════════════════════════
   IDEAL FOR
═══════════════════════════════ */
.sd-ideal {
  padding: clamp(5rem, 10vw, 8rem) clamp(1.5rem, 6vw, 6rem);
  background: var(--surface);
  position: relative;
  overflow-x: hidden; /* see .sd-overview's note */
}

.sd-ideal-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.sd-ideal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(180,185,200,0.07);
  border-radius: 6px;
  overflow: hidden;
}

.sd-ideal-col {
  background: var(--surface);
  padding: 2.5rem;
}

.sd-ideal-col:first-child {
  border-right: 2px solid rgba(180,185,200,0.06);
}

.sd-ideal-col-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 1.8rem;
}
.sd-ideal-col-title--yes { color: rgba(80,200,130,0.9); }
.sd-ideal-col-title--no  { color: rgba(200,80,80,0.9); }

.sd-ideal-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}
.sd-ideal-icon--yes {
  background: rgba(80,200,130,0.15);
  color: rgba(80,200,130,0.95);
  border: 1px solid rgba(80,200,130,0.25);
}
.sd-ideal-icon--no {
  background: rgba(200,80,80,0.12);
  color: rgba(200,80,80,0.85);
  border: 1px solid rgba(200,80,80,0.2);
}

.sd-ideal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sd-ideal-list li {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--white);
  padding-left: 1.1rem;
  position: relative;
}
.sd-ideal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(80,200,130,0.7);
}
.sd-ideal-list--no li::before {
  background: rgba(200,80,80,0.6);
}

/* ═══════════════════════════════
   FAQ
═══════════════════════════════ */
.sd-faq {
  padding: clamp(5rem, 10vw, 8rem) clamp(1.5rem, 6vw, 6rem);
  overflow-x: hidden; /* see .sd-overview's note */
}

.sd-faq-inner {
  max-width: 800px;
  margin: 0 auto;
}

.sd-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(180,185,200,0.1);
}

.sd-faq-item {
  border-bottom: 1px solid rgba(180,185,200,0.1);
}

.sd-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 1.4rem 0;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--white);
  text-align: left;
  cursor: pointer;
  gap: 1.5rem;
  transition: color 0.2s;
}
.sd-faq-q:hover { color: rgba(var(--accRgb), 1); }
.sd-faq-q--open { color: rgba(var(--accRgb), 1); }

.sd-faq-icon {
  font-size: 1.2rem;
  color: rgba(var(--accRgb), 0.7);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  line-height: 1;
}

.sd-faq-a {
  overflow: hidden;
}
.sd-faq-a p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--muted);
  padding: 0 0 1.4rem;
  margin: 0;
}

/* ═══════════════════════════════
   OTHER SERVICES
═══════════════════════════════ */
.sd-other {
  padding: clamp(4rem, 8vw, 6rem) clamp(1.5rem, 6vw, 6rem);
  background: var(--surface);
  border-top: 1px solid rgba(180,185,200,0.06);
  overflow-x: hidden; /* see .sd-overview's note */
}

.sd-other-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.sd-other-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.sd-other-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.8rem 1.5rem;
  background: linear-gradient(135deg, rgba(var(--c1-vals, 40,40,60), 0.25), rgba(0,0,0,0.2));
  border: 1px solid rgba(180,185,200,0.08);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s;
  position: relative;
  overflow: hidden;
}

.sd-other-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  opacity: 0;
  transition: opacity 0.3s;
}

.sd-other-card:hover {
  border-color: rgba(180,185,200,0.2);
  transform: translateY(-3px);
}

.sd-other-card:hover::before {
  opacity: 0.08;
}

.sd-other-name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--white);
  position: relative;
}

.sd-other-sub {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  position: relative;
}

.sd-other-arrow {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--gold);
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
  position: relative;
}
.sd-other-card:hover .sd-other-arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* ═══════════════════════════════
   CTA
═══════════════════════════════ */
.sd-cta {
  position: relative;
  padding: clamp(5rem, 12vw, 10rem) clamp(1.5rem, 6vw, 6rem);
  text-align: center;
  overflow: hidden;
  background: var(--black);
}

.sd-cta-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(var(--accRgb), 0.14) 0%, transparent 70%);
  pointer-events: none;
}

.sd-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}

.sd-cta-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(var(--accRgb), 0.7);
  margin-bottom: 1.2rem;
}

.sd-cta-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 200;
  letter-spacing: -0.03em;
  color: var(--white);
  line-height: 1.15;
  margin: 0 0 1.2rem;
}

.sd-cta-sub {
  font-size: 0.88rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin: 0 0 2.5rem;
}

.sd-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.8rem;
  background: rgba(var(--accRgb), 0.16);
  border: 1px solid rgba(var(--accRgb), 0.45);
  color: rgba(var(--accRgb), 1);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  border-radius: 2px;
  text-transform: uppercase;
  transition: background 0.25s, border-color 0.25s;
}
.sd-cta-btn:hover {
  background: rgba(var(--accRgb), 0.28);
  border-color: rgba(var(--accRgb), 0.8);
}

/* ═══════════════════════════════
   NOT FOUND
═══════════════════════════════ */
.sd-not-found {
  background: var(--black);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sd-nf-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  color: var(--white);
}

.sd-nf-btn {
  color: var(--gold);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media (max-width: 900px) {
.sd-hero{
  padding-top: 200px;
}
.sd-hero-bg-img{
  background-size: cover;
  background-position: 95% center !important;
}
  .sd-other-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sd-specs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sd-overview-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .sd-overview-label {
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 700px) {
.sd-hero{
  min-height: 60px;
}
.sd-hero-bg-img{
    background-size: cover;
    background-position: 98% center !important;
  }

  .sd-hero-title {
    font-size: clamp(3rem, 16vw, 4.5rem);
  }

  .sd-steps-line { display: none; }

  .sd-step {
    grid-template-columns: 50px 1fr;
    margin-bottom: 2.5rem;
  }
  .sd-step--left .sd-step-num,
  .sd-step--right .sd-step-num {
    grid-column: 1;
    grid-row: 1;
  }
  .sd-step--left .sd-step-card,
  .sd-step--right .sd-step-card {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    padding-left: 1rem;
    padding-right: 0;
  }
  .sd-step-num {
    justify-self: start;
    width: 38px;
    height: 38px;
  }

  .sd-ideal-grid {
    grid-template-columns: 1fr;
  }
  .sd-ideal-col:first-child {
    border-right: none;
    border-bottom: 2px solid rgba(180,185,200,0.06);
  }

  .sd-other-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sd-specs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .sd-hero{
    min-height: 60px;
  }
  .sd-other-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
  .sd-hero-cta-row {
    flex-direction: column;
  }
  .sd-hero-btn-primary,
  .sd-hero-btn-outline {
    text-align: center;
    justify-content: center;
  }
}

/* ══════════════════════════════════════
   BOOKING SIDEBAR (Overview + Specs + Process)
══════════════════════════════════════ */
.sd-content-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  /* align-items: start (the default per-item box stays content-sized and
     sits at the top of its row) — this is correct and required. A CSS
     Grid item's sticky "travel room" comes from its grid AREA (the full
     row-track height, matching the taller sibling column), not from the
     item's own box height, so it does NOT need align-items:stretch to
     work. Verified against a known-working reference implementation. */
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

.sd-main-col > section {
  padding-left: clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 3vw, 2rem);
}

.sd-sidebar {
  position: relative;
}

.sd-sidebar-sticky {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2.5rem 0;
}

.sd-price-card,
.sd-sidebar-card {
  background: var(--surface);
  border: 1px solid rgba(180,185,200,0.1);
  border-radius: 10px;
  padding: 1.5rem;
}

.sd-price-label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.sd-price-value {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.1;
}
.sd-price-value span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.3rem;
}

.sd-price-note {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.5rem;
  line-height: 1.4;
}

.sd-price-fallback {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--gold);
}

.sd-sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
  padding: 0.85rem 1.25rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s;
}

.sd-sidebar-btn--primary {
  background: var(--gold);
  color: var(--black);
  border: 1px solid var(--gold);
}
.sd-sidebar-btn--primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.sd-sidebar-btn--outline {
  background: transparent;
  border: 1px solid rgba(180,185,200,0.25);
  color: var(--white);
  margin-top: 0.7rem;
}
.sd-sidebar-btn--outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.sd-sidebar-card-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 1rem;
}

.sd-sidebar-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(180,185,200,0.06);
  transition: color 0.2s;
}
.sd-sidebar-row:last-child {
  border-bottom: none;
}
a.sd-sidebar-row:hover {
  color: var(--gold);
}
.sd-sidebar-row svg {
  flex-shrink: 0;
  color: var(--gold);
  opacity: 0.85;
}

.sd-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0;
  font-size: 0.85rem;
  color: var(--muted);
  border-bottom: 1px solid rgba(180,185,200,0.06);
}
.sd-hours-row:last-child {
  border-bottom: none;
}
.sd-hours-row span:last-child {
  color: var(--white);
  font-weight: 600;
}

/* Stack sidebar above content on narrower screens; drop sticky behaviour */
@media (max-width: 1100px) {
  .sd-content-grid {
    grid-template-columns: 1fr;
  }
  .sd-sidebar {
    order: -1;
  }
  .sd-sidebar-sticky {
    position: static;
    padding: clamp(2rem, 6vw, 3rem) 0 0;
  }
}

/* ══════════════════════════════════════
   REHABILITATION SECTION
══════════════════════════════════════ */
.sd-rehab {
  background: #0e0e14;
  padding: 100px 60px;
  position: relative;
  overflow: hidden;
}

.sd-rehab::before {
  content: '';
  position: absolute;
  inset: 0;

  pointer-events: none;
}

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

.sd-rehab-track {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.sd-rehab-item {
  display: grid;
  grid-template-columns: 52px 110px 1fr;
  gap: 0 24px;
  align-items: start;
  position: relative;
  padding-bottom: 40px;
}

.sd-rehab-connector {
  position: absolute;
  left: 24px;
  top: 52px;
  bottom: 0;
  width: 2px;
  /* This never had a background before, which is why the timeline
     icons looked like disconnected floating badges instead of a
     connected vertical timeline. */
  background: linear-gradient(to bottom, rgba(var(--accRgb), 0.4), rgba(var(--accRgb), 0.05));
}

.sd-rehab-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(var(--accRgb),0.12);
  border: 1.5px solid rgba(var(--accRgb),0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.sd-rehab-day {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(var(--accRgb),1);
  padding-top: 14px;
  white-space: nowrap;
}

.sd-rehab-body {
  padding-top: 10px;
}

.sd-rehab-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
  margin: 0 0 8px;
}

.sd-rehab-desc {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  line-height: 1.75;
  margin: 0;
}

/* ══════════════════════════════════════
   PHOTO + VIDEO GALLERY
══════════════════════════════════════ */
.sd-media {
  background: #0a0a10;
  padding: 100px 60px;
  overflow-x: hidden; /* see .sd-overview's note */
}

.sd-videos {
  background: #0e0e14;
  padding: 100px 60px;
  overflow-x: hidden; /* see .sd-overview's note */
}

.sd-media-inner,
.sd-videos-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.sd-section-sub {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,0.38);
  margin: 6px 0 0;
  letter-spacing: 0.3px;
}

.sd-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.sd-media-card {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  background: #1a1a24;
}

.sd-media-card--video {
  aspect-ratio: 9/16;
}

.sd-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.6s cubic-bezier(.22,1,.36,1);
}

.sd-media-card:hover .sd-media-img {
  transform: scale(1.06);
}

.sd-media-overlay {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.sd-media-card:hover .sd-media-overlay {
  opacity: 1;
}

/* Touch devices have no real hover, so the play button on video tiles
   would never show (or stick on whichever tile was last touched). Keep
   it always visible there; desktop hover behavior is unchanged. */
@media (hover: none) {
  .sd-media-card--video .sd-media-overlay {
    opacity: 1;
  }
}

.sd-media-zoom {
  font-size: 32px;
  color: var(--white);
  line-height: 1;
}

.sd-play-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--white);
  padding-left: 4px;
}

.sd-media-num {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
}

/* Video placeholder when no src */
.sd-media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

}

.sd-media-placeholder-icon {
  font-size: 36px;
  color: rgba(var(--accRgb),0.5);
}

.sd-media-placeholder-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
}

/* ══════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════ */
.sd-lb-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(16px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sd-lb-box {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sd-lb-media {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 6px;
}

.sd-lb-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.sd-lb-close:hover { background: rgba(255,255,255,0.2); }

.sd-lb-prev,
.sd-lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 2;
}

.sd-lb-prev { left: -60px; }
.sd-lb-next { right: -60px; }
.sd-lb-prev:hover,
.sd-lb-next:hover { background: rgba(255,255,255,0.2); }
.sd-lb-prev:disabled,
.sd-lb-next:disabled { opacity: 0.3; cursor: default; }

.sd-lb-counter {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .sd-rehab { padding: 70px 32px; }
  .sd-rehab-item { grid-template-columns: 44px 90px 1fr; gap: 0 16px; }
  .sd-media { padding: 70px 32px; }
  .sd-videos { padding: 70px 32px; }
  .sd-media-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Was previously nested inside .sd-media-grid above, which meant it
     only ever matched ".sd-media-grid .sd-rehab-icon" (never true —
     rehab icons live inside .sd-rehab-item) and silently never applied.
     This 42px size now actually reaches the timeline icons on both
     tablet and phone (this query cascades down to the 600px block too,
     since phones also match max-width:900px). */
  .sd-rehab-icon {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 600px) {
  .sd-rehab { padding: 60px 20px; }
  .sd-rehab-item { grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 8px 12px; }
  .sd-rehab-day { padding-top: 10px; grid-column: 2; }
  .sd-rehab-body { grid-column: 2; padding-top: 0; }
  .sd-rehab-connector { left: 19px; }
  .sd-media { padding: 60px 16px; }
  .sd-videos { padding: 60px 16px; }
  .sd-media-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sd-lb-prev { left: -10px; }
  .sd-lb-next { right: -10px; }
}

/* ── Scar Progression ── */
.sd-scars {
  background: #0a0a10;
  padding: 100px 60px;
  position: relative;
  overflow: hidden;
}
.sd-scars::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 300px;

  pointer-events: none;
}
.sd-scars-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.sd-scars-intro {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  line-height: 1.8;
  max-width: 780px;
  margin: 0 0 60px;
  border-left: 2px solid rgba(var(--accRgb),0.3);
  padding-left: 24px;
}

/* 4-card track */
.sd-scars-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}
/* connecting line between cards */
.sd-scars-track::before {
  content: '';
  position: absolute;
  top: 56px;
  left: calc(50% / 4);
  right: calc(50% / 4);
  height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--accRgb),0.15),
    rgba(var(--accRgb),0.4) 50%,
    rgba(var(--accRgb),0.15)
  );
  pointer-events: none;
}

.sd-scar-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.35s, background 0.35s, transform 0.35s;
}
.sd-scar-card:hover {
  border-color: rgba(var(--accRgb),0.35);
  background: rgba(var(--accRgb),0.04);
  transform: translateY(-6px);
}

.sd-scar-swatch {
  height: 112px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 14px 18px;
  /* overlay gradient for legibility */
  background-image: linear-gradient(160deg, transparent 40%, rgba(0,0,0,0.45) 100%) !important;
}
.sd-scar-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.55);
}

.sd-scar-body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.sd-scar-period {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(var(--accRgb),0.9);
}
.sd-scar-label {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  margin: 0;
  line-height: 1.25;
}
.sd-scar-desc {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.45);
  line-height: 1.65;
  margin: 4px 0 0;
}

/* Responsive */
@media (max-width: 900px) {
  .sd-scars { padding: 70px 32px; }
  .sd-scars-track { grid-template-columns: repeat(2, 1fr); }
  .sd-scars-track::before { display: none; }
}
@media (max-width: 540px) {
  .sd-scars { padding: 60px 20px; }
  .sd-scars-track { grid-template-columns: 1fr; gap: 12px; }
  .sd-scar-swatch { height: 90px; }
}


/* NOTE: this block used to be missing its closing brace, which silently
   nested the 700px and 480px queries below inside this 900px one (CSS
   nesting = AND intersection — happened to still work by coincidence
   since 700/480 < 900, but any rule added after this point in the file
   would've been silently scoped to mobile-only). Also, all three
   gradients had their stop order backwards — a stop already at 100%
   forces every later stop to clamp to 100% too, per spec, which
   collapsed the intended dark-at-bottom gradient into one flat, too-
   light rgba(8,8,14,0.55) overlay across the whole hero. That's what
   washed out the eyebrow text and buttons on tablet/phone. Fixed both:
   proper 0% → 40% → 100% ascending stops, and the missing brace. */
@media (max-width: 900px) {

  .sd-hero-bg-img {
    background-position: 65% center!important;
  }
  .sd-hero-bg-overlay {
    background: linear-gradient(
            to bottom,
            rgba(8,8,14,0.55) 0%,
            rgba(8,8,14,0.75) 40%,
            rgba(8,8,14,0.96) 100%
    ) !important;
  }
}
@media (max-width: 700px) {

  .sd-hero-bg-overlay {
    background: linear-gradient(
            to bottom,
            rgba(8,8,14,0.55) 0%,
            rgba(8,8,14,0.75) 40%,
            rgba(8,8,14,0.96) 100%
    ) !important;
  }
}
@media (max-width: 480px) {

  .sd-hero-bg-img {
    background-position: center top;
  }
  .sd-hero-bg-overlay {
    background: linear-gradient(
      to bottom,
      rgba(8,8,14,0.55) 0%,
      rgba(8,8,14,0.75) 40%,
      rgba(8,8,14,0.96) 100%
    );
  }
}