/* =========================================================================
   Ciano Meubles — the dark band, shared
   A full-bleed section on the near-black ground with a warm pool of light
   behind its middle, and the headline block that opens it: brass dash, muted
   eyebrow, Cormorant title whose second line falls to underlined brass italic.

   Lifted out of home-sections.css because the home page's services section is
   no longer the only thing built this way — "How It Works" is the same band
   with different contents, on About and on every Services page that runs it.
   They all read from here, so the ground and the headline cannot drift apart.

   TWO NAMES, ONE RULE SET. .dsvc is what the home services section has always
   been called and its markup is unchanged; .dband is the neutral name for
   everything else, because a section about a build process should not be
   wearing a class called "services". They are aliases, not variants — if you
   change one, you have changed both, which is the point.

   Load order: tokens.css first. Nothing here decides a colour of its own.
   ========================================================================= */

.dsvc,
.dband {
  position: relative;
  /* Full viewport width, out of any container. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(58px, 7vw, 104px) clamp(20px, 2.6vw, 44px) clamp(46px, 6vw, 86px);
  /* Warm light centred on the ellipse, so the photograph reads as lit rather
     than pasted onto a flat panel. */
  background:
    radial-gradient(112% 88% at 50% 46%,
      rgba(62, 60, 55, 0.55) 0%, rgba(40, 39, 36, 0.26) 40%,
      rgba(var(--x-dark-rgb), 0) 68%),
    var(--x-dark);
  overflow: hidden;
}

/* ------------------------------------------------------------- headline -- */

.dsvc-head,
.dband-head {
  position: relative;
  max-width: 1560px;
  margin: 0 auto clamp(8px, 1.3vw, 18px);
}

.dsvc-eyebrow,
.dband-eyebrow {
  display: block;
  font-family: var(--x-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(var(--x-paper-rgb), 0.62);
  margin-bottom: 18px;
}

.dsvc-eyebrow::before,
.dband-eyebrow::before {
  content: "";
  display: inline-block;
  width: 40px; height: 1px;
  margin-right: 14px;
  vertical-align: middle;
  background: var(--x-brass);
}

.dsvc-title,
.dband-title {
  font-family: var(--x-display);
  font-weight: 300;
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  line-height: 1.02;
  color: var(--x-paper);
  margin: 0 0 20px;
  max-width: 16ch;
}

.dsvc-title em,
.dband-title em {
  font-style: italic;
  color: var(--x-brass);
  border-bottom: 1px solid rgba(var(--x-brass-rgb), 0.55);
  padding-bottom: 2px;
}

.dsvc-lead,
.dband-lead {
  font-family: var(--x-sans);
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.85;
  color: rgba(var(--x-paper-rgb), 0.68);
  max-width: 42ch;
  margin: 0;
}