/* ============================================================
   DARK BLOCK (stats + services intro, testimonials)
   ============================================================ */
.dark-block {
  position: relative;
  background: var(--dark);
  color: var(--on-dark);
  border-radius: var(--radius-block) var(--radius-block) 0 0;
  padding-block: clamp(54px, 7vw, 90px) var(--section-y);
}
.dark-block + .categories,
.dark-block + .gift { position: relative; }
.dark-block::after {
  /* soft rounded bottom so the next light section tucks under */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: var(--radius-block);
  background: var(--dark);
  border-radius: 0 0 var(--radius-block) var(--radius-block);
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: center;
  padding-bottom: clamp(56px, 8vw, 110px);
}
.stat-num {
  font-size: clamp(42px, 6vw, 74px);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.stat-num sup { font-size: 0.42em; vertical-align: super; }
.stat-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  opacity: 0.7;
}

/* Services intro */
.services-intro {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(34px, 6vw, 80px);
  align-items: center;
}
.services-intro h2 { font-size: clamp(42px, 6.4vw, 78px); margin-bottom: 26px; }
.services-intro p {
  font-size: 14.5px;
  color: var(--on-dark-soft);
  max-width: 56ch;
  margin-bottom: 34px;
}
.services-intro strong { color: var(--on-dark); font-weight: 500; }

.services-intro-media { position: relative; }
.arch-services {
  aspect-ratio: 4 / 5;
  max-width: 340px;
  margin-inline: auto;
  background: linear-gradient(160deg, #4a3d38, #2c2523);
}
.sparkle-c { width: 20px; top: -14px; left: 8%; fill: var(--accent); opacity: 0.8; }
.sparkle-d { width: 14px; bottom: 8%; right: 2%; fill: var(--accent); opacity: 0.6; }

/* ============================================================
   CATEGORISED SERVICES
   ============================================================ */
.categories {
  position: relative;
  background: var(--beige-2);
  padding-block: clamp(70px, 9vw, 120px);
}
.squiggle-cat { right: -34px; top: 8%; width: 120px; height: 420px; }

.service-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.service-row + .service-row { margin-top: clamp(56px, 8vw, 96px); }
.service-row-alt .service-media { order: 2; }

.service-media { position: relative; }
.soft-frame {
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(150deg, var(--beige-3), #cbc2b7);
  aspect-ratio: 4 / 3.3;
}
.soft-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Duration chip that overlaps the image edge */
.chip {
  position: absolute;
  top: 50%;
  right: -26px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  min-width: 124px;
  padding: 16px 22px;
  border-radius: 26px;
  text-align: center;
  line-height: 1.3;
  /* frosted glass over the photograph */
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow), var(--glass-inner);
  isolation: isolate;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* specular highlight — the light catching the top-left of the lens */
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 26% 12%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 58%),
    linear-gradient(200deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%);
}
.service-media:hover .chip { transform: translateY(-50%) scale(1.04); }
.chip strong {
  font-size: 16px;
  font-weight: 500;
  font-family: var(--serif);
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.chip small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.service-row-alt .chip { right: auto; left: -34px; }

.service-copy { max-width: 46ch; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 16px;
}
.tag svg { width: 14px; height: 14px; fill: var(--accent-deep); }
.service-copy h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 3.9vw, 46px);
  line-height: 1.1;
  margin-bottom: 16px;
}
.service-copy h3 span { color: var(--ink-faint); }
.service-copy > p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-bottom: 26px;
}