/* =========================================================================
   Ciano Meubles — featured collection panel for the home page
   Palette from css/tokens.css, which must load first; the two local
   token blocks that used to sit in this file are gone.
   One full-screen panel, image parallaxing against the scroll. Content comes
   from Supabase (see js/featured.js). The philosophy section below is
   the live site's own markup; it is restyled by css/home-restyle.css.
   Namespaced .apx-* ; loaded after the production CSS.
   ========================================================================= */

.apx {
  padding: 0;                     /* opt out of style.css `section{padding:120px 0}` */
  background: var(--x-paper);
}

.x-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

.x-label {
  display: block;
  font-family: var(--x-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--x-brass-ink);
  margin-bottom: 18px;
}

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

.x-title {
  font-family: var(--x-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.4vw, 3.9rem);
  line-height: 1.04;
  color: var(--x-ink);
  margin: 0 0 22px;
}

.x-title em { font-style: italic; color: var(--x-brass-ink); }

.x-sub {
  font-family: var(--x-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(var(--x-ink-rgb), 0.72);
  max-width: 56ch;
  margin: 0;
}

/* =========================================================================
   1 — COLLECTIONS: one full-screen panel that opens on scroll
   Full-bleed, full-height. The aperture is a clip-path so the layout box
   never changes — animating height here would reflow everything below it.
   ========================================================================= */

 /* Dark ground: any sliver above or below the panel during the hand-off
    should read as part of the cinematic block, never as a pale gap. */
.apx { padding: 0; background: var(--x-dark); }

.apx-item { position: relative; }

.apx-frame {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  background: var(--x-dark);
}

/* Oversized and drifting: the image is taller than its frame so it can move
   against the scroll. A slow counter-drift reads as depth; it is also what
   replaced the clip aperture, whose cream bands caused the pale seam. */
.apx-frame img,
.apx-frame video {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  display: block;
  transform: translate3d(0, var(--x-par, 0px), 0) scale(var(--x-zoom, 1));
  will-change: transform;
}

.apx-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(var(--x-dark-rgb),.86) 0%, rgba(var(--x-dark-rgb),.34) 46%, rgba(var(--x-dark-rgb),.06) 78%),
    linear-gradient(100deg, rgba(var(--x-dark-rgb),.52) 0%, rgba(var(--x-dark-rgb),.10) 52%, transparent 76%);
  opacity: var(--x-veil, 0);
  transition: opacity 0.5s var(--x-ease);
}

.apx-copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 0 clamp(48px, 9vh, 104px);
  opacity: var(--x-copy, 0);
  transform: translate3d(0, calc((1 - var(--x-copy, 0)) * 26px), 0);
  transition: opacity 0.6s var(--x-ease), transform 0.7s var(--x-ease);
}

.apx-label {
  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.78);
  margin-bottom: 18px;
}

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

.apx-name {
  font-family: var(--x-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: 1.02;
  color: var(--x-paper);
  margin: 0 0 26px;
  text-shadow: 0 1px 26px rgba(var(--x-dark-rgb),.5);
}

.apx-name em { font-style: italic; color: var(--x-brass); }

/* A grid of two <p>, not CSS columns: flowed columns break mid-sentence,
   which reads badly. featured.js splits the copy on a sentence boundary. */
.apx-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 44px;
  max-width: 780px;
  margin-bottom: 30px;
}

.apx-cols p {
  font-family: var(--x-sans);
  font-weight: 300;
  font-size: clamp(0.82rem, 1.05vw, 0.94rem);
  line-height: 1.8;
  color: rgba(var(--x-paper-rgb), 0.88);
  margin: 0;
}

.apx-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid var(--x-brass);
  background: var(--x-brass);
  font-family: var(--x-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--x-dark);
  position: relative;
  overflow: hidden;
  transition: color 0.45s var(--x-ease), border-color 0.45s var(--x-ease);
}

.apx-cta span, .apx-cta svg { position: relative; z-index: 1; }
.apx-cta svg { transition: transform 0.5s var(--x-ease); }

.apx-cta::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--x-paper);
  transform: translateY(101%);
  transition: transform 0.5s var(--x-ease);
}

.apx-cta:hover::after { transform: translateY(0); }
.apx-cta:hover svg    { transform: translateX(4px); }

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 900px) {
  .apx-cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .apx-frame img, .apx-frame video { transform: none !important; }
  .apx-copy  { opacity: 1 !important; transform: none !important; }
  .apx-veil  { opacity: 1 !important; }
}

/* =========================================================================
   PHILOSOPHY — expanding strip
   Four cards standing side by side. The active one grows and opens a panel
   over its right-hand side carrying the copy; the other three stay narrow
   slats showing their photograph and title. An index above names all four and
   drives the same state, so the section can be read without hovering.

   The growth is `flex-grow` rather than width: the four cards always fill the
   row exactly, whatever the viewport, and nothing has to be measured.

   Videos carry their address in `data-src` and are only fetched when their
   card is first opened.
   ========================================================================= */

.phl {
  padding: clamp(74px, 10vw, 140px) 0;
  background: var(--x-clay);
}

.phl-head { margin-bottom: clamp(22px, 3vw, 36px); max-width: 60ch; }

/* ---------------------------------------------------------------- index -- */

.phl-index {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 26px);
  margin-bottom: clamp(20px, 2.6vw, 34px);
  padding-bottom: clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--x-line);
}

.phl-ix {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--x-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--x-ink-rgb), 0.42);
  cursor: pointer;
  transition: color 0.4s var(--x-ease);
}

.phl-ix:hover { color: rgba(var(--x-ink-rgb), 0.75); }
.phl-ix.is-on { color: var(--x-brass-ink); }
.phl-ix:focus-visible { outline: 2px solid var(--x-brass); outline-offset: 4px; }

/* ---------------------------------------------------------------- strip -- */

.phl-strip {
  display: flex;
  gap: clamp(8px, 0.9vw, 14px);
  height: clamp(430px, 58vh, 580px);
}

.phc {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--x-r-photo);
  background: var(--x-dark-lift);
  cursor: pointer;
  /* The expansion. Everything else on the card follows from this one value. */
  flex-grow: 1;
  transition: flex-grow 0.75s var(--x-ease);
}

.phc.is-on { flex-grow: 2.9; }

.phc:focus-visible { outline: 2px solid var(--x-brass); outline-offset: 3px; }

/* -- photograph */

.phc-media {
  position: absolute;
  inset: 0;
}

.phc-media img,
.phc-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 1.2s var(--x-ease), filter 0.7s var(--x-ease);
  filter: saturate(0.82) brightness(0.82);
}

.phc.is-on .phc-media img,
.phc.is-on .phc-media video { transform: scale(1); filter: saturate(0.94) brightness(0.94); }

/* A floor under the tag so the name reads on any frame. */
.phc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(var(--x-dark-rgb), 0.88) 0%, rgba(var(--x-dark-rgb), 0.34) 32%, rgba(var(--x-dark-rgb), 0) 62%);
}

/* -- the collapsed label, bottom left */

.phc-tag {
  position: absolute;
  left: clamp(14px, 1.2vw, 22px);
  right: clamp(14px, 1.2vw, 22px);
  bottom: clamp(16px, 1.4vw, 24px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  transition: opacity 0.4s var(--x-ease);
}

.phc-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(var(--x-paper-rgb), 0.4);
  font-family: var(--x-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--x-paper);
}

.phc-tag-text { min-width: 0; }

/* The reference gets away with `nowrap` because its labels are first names.
   Ours are four-word titles in a 188px slat, so they have to wrap. */
.phc-name {
  display: block;
  font-family: var(--x-display);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.18;
  color: var(--x-paper);
  text-wrap: balance;
}

.phc-role {
  display: block;
  font-family: var(--x-sans);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--x-paper-rgb), 0.62);
  margin-top: 4px;
}

/* -- the panel that opens over the right of the active card */

.phc-detail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1.4vh, 20px);
  padding: clamp(24px, 2.4vw, 44px);
  background: linear-gradient(105deg, rgba(var(--x-dark-rgb), 0.82) 0%, rgba(var(--x-dark-rgb), 0.96) 42%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transform: translateX(16px);
  pointer-events: none;
  transition: opacity 0.5s var(--x-ease), transform 0.7s var(--x-ease);
}

.phc.is-on .phc-detail {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0.16s;
}

.phc-d-label {
  font-family: var(--x-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--x-brass);
}

.phc-d-title {
  font-family: var(--x-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2vw, 2.05rem);
  line-height: 1.1;
  color: var(--x-paper);
  margin: 0;
}

.phc-d-text {
  font-family: var(--x-sans);
  font-weight: 300;
  font-size: 0.84rem;
  line-height: 1.8;
  color: rgba(var(--x-paper-rgb), 0.74);
  margin: 0;
  max-width: 42ch;
}

.phc-d-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  font-family: var(--x-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--x-brass);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(var(--x-brass-rgb), 0.45);
  transition: border-color 0.4s var(--x-ease), gap 0.4s var(--x-ease);
}

.phc-d-link:hover { border-bottom-color: var(--x-brass); gap: 14px; }

/* Once the panel is open the collapsed label would sit under it. */
.phc.is-on .phc-tag { opacity: 0; }

/* --------------------------------------------------------- responsive ---- */

/* Below this the slats are too narrow to hold a name, so the strip becomes a
   stack of full cards with the copy always shown. */
@media (max-width: 900px) {
  .phl-strip { flex-direction: column; height: auto; gap: 12px; }
  .phc, .phc.is-on { flex: none; height: clamp(300px, 52vh, 420px); }
  .phc-detail {
    position: static;
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: linear-gradient(to top, rgba(var(--x-dark-rgb), 0.94) 30%, rgba(var(--x-dark-rgb), 0.5) 100%);
    justify-content: flex-end;
  }
  .phc-tag { display: none; }
  .phl-index { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .phc, .phc-detail, .phc-media img, .phc-media video { transition: none !important; }
}

/* ---- stats ----
   These used to sit as a loose three-across row under the strip, reading as
   an afterthought. The headline block only fills the left of the measure, so
   the stats now occupy the empty right of it as a small ledger, ranged right
   and hairline-ruled, and the section closes on the strip instead. */

.phl-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 90px);
  align-items: end;
  margin-bottom: clamp(22px, 3vw, 36px);
}

.phl-top .phl-head { margin-bottom: 0; }

.phl-stats {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  min-width: clamp(190px, 17vw, 240px);
  text-align: right;
}

.phl-stat {
  padding-top: clamp(11px, 1.3vw, 16px);
  border-top: 1px solid var(--x-line);
}

.phl-stat:first-child { border-top: 0; padding-top: 0; }

.phl-stat-n {
  display: block;
  font-family: var(--x-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.2vw, 2.05rem);
  line-height: 1;
  color: var(--x-brass-ink);
}

.phl-stat-n--word { font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.2; }

.phl-stat-l {
  display: block;
  margin-top: 7px;
  font-family: var(--x-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--x-ink-rgb), 0.62);
}

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 1080px) {
  .phl-top { grid-template-columns: 1fr; gap: clamp(22px, 3vw, 34px); }
  .phl-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: left;
    min-width: 0;
    padding-top: clamp(18px, 2.4vw, 26px);
    border-top: 1px solid var(--x-line);
  }
  .phl-stat { border-top: 0; padding-top: 0; }
  .dsvc-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px 0; gap: 18px; }
  .dsvc-stage .dsvc-card--1, .dsvc-stage .dsvc-card--2,
  .dsvc-stage .dsvc-card--3, .dsvc-stage .dsvc-card--4 { --sv-y: 0px; }
  .dsvc-centre { grid-column: 1 / -1; aspect-ratio: 16 / 9; order: -1; margin-bottom: 12px; }
  .phl-media { display: none; }
}

@media (max-width: 620px) {
  .dsvc-stage { grid-template-columns: 1fr; }
  .dsvc-band { grid-template-columns: 1fr; }
  .dsvc-band-img { min-height: 220px; }
  .phl-stats { grid-template-columns: 1fr; gap: 22px; }
  .phl-row { grid-template-columns: 40px minmax(0, 1fr) 20px; }
}

/* No pointer: there is no hover to reveal on, so show the media in flow. */
@media (hover: none) {
  .phl-media {
    position: static;
    opacity: 1;
    transform: none;
    width: 100%;
    max-width: 260px;
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dsvc-card, .dsvc-card:hover, .dsvc-centre img, .dsvc-centre video, .dsvc-band-img img,
  .phl-media, .phl-row { transition: none !important; }
}

/* =========================================================================
   SERVICES — full-bleed, espresso ground / hairline cards  (option B)
   Edge to edge on espresso, with a warm pool of light behind the centre.
   There is no card panel at all: each service is a brass rule down the left
   with a large numeral beside it, and the photograph is a wide ellipse
   holding the middle. Nothing here has a fill, so the section reads as type
   on a ground rather than as boxes on a background.
   ========================================================================= */

/* The ground and the headline block that used to open this section now live
   in css/dband.css, aliased to .dband so the About page's "How It Works" can
   be the same band without wearing a class called "services". Load that file
   alongside this one. What follows is still services-only: the stage, the
   centre plate, the entries and the commercial band. */

/* ---------------------------------------------------------------- stage -- */

.dsvc-stage {
  position: relative;
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  /* The centre column carries most of the width — the photograph is the
     centrepiece and the entries flank it. */
  grid-template-columns: 1fr 1fr 2.5fr 1fr 1fr;
  gap: clamp(16px, 2.2vw, 38px);
  align-items: center;
  padding: clamp(12px, 2.4vh, 28px) 0 clamp(28px, 5.5vh, 74px);
}

/* Wide ellipse, matted off the dark ground with a faint brass ring. */
.dsvc-centre {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  display: block;
  /* Reaching into the gutters buys width without taking it off the entries. */
  margin-inline: clamp(-22px, -1vw, -8px);
  aspect-ratio: 1.5 / 1;
  overflow: hidden;
  z-index: 1;
  border-radius: var(--x-r-photo);
  background: var(--x-dark-lift);
  box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
}

.dsvc-centre img,
.dsvc-centre video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  display: block;
  filter: saturate(0.92) contrast(1.04);
}

/* A rule set in from the edge, so the photograph reads as a mounted plate
   rather than as a picture dropped onto the ground. */
.dsvc-centre::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: var(--x-r);
  box-shadow: inset 0 0 0 1px rgba(var(--x-paper-rgb), 0.42);
  pointer-events: none;
}

/* ------------------------------------------------------------- entries -- */
/* No fill, no border box, no shadow — a brass rule down the left edge and a
   numeral doing the work a badge would normally do. */

.dsvc-card {
  grid-row: 1;
  position: relative;
  z-index: 2;
  display: block;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: none;
  border: 0;
  border-left: 1px solid rgba(var(--x-brass-rgb), 0.42);
  border-radius: 0;
  padding: 6px 8px 6px clamp(16px, 1.4vw, 24px);
  transition: border-left-color 0.5s var(--x-ease), background 0.5s var(--x-ease),
              transform 0.6s var(--x-ease);
}

.dsvc-card--1 { grid-column: 1; --sv-y: 52px; }
.dsvc-card--2 { grid-column: 2; --sv-y: -38px; }
.dsvc-card--3 { grid-column: 4; --sv-y: 52px; }
.dsvc-card--4 { grid-column: 5; --sv-y: -38px; }

/* style.css owns transform on these via `.reveal.visible` (0,2,0), which would
   flatten the offsets the moment each entry revealed. Composing through a
   variable lets the reveal slide and the stagger coexist. */
.dsvc-stage .dsvc-card.reveal            { transform: translateY(calc(var(--sv-y) + 30px)); }
.dsvc-stage .dsvc-card.reveal.visible    { transform: translateY(var(--sv-y)); }
.dsvc-stage .dsvc-card.reveal.visible:hover { transform: translateY(calc(var(--sv-y) - 8px)); }

.dsvc-card:hover {
  border-left-color: var(--x-brass);
  background: rgba(var(--x-brass-rgb), 0.06);
}

.dsvc-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 0 14px;
  border-radius: 50%;
  border: 1px solid rgba(var(--x-brass-rgb), 0.34);
  background: transparent;
  color: var(--x-brass);
  transition: border-color 0.5s var(--x-ease);
}

.dsvc-badge svg { width: 52%; height: 52%; }
.dsvc-card:hover .dsvc-badge { border-color: var(--x-brass); }

/* The numeral is the anchor of each entry, so it is set large. */
.dsvc-num {
  display: block;
  font-family: var(--x-display);
  font-size: 2.1rem;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--x-brass);
  margin-bottom: 10px;
}

.dsvc-name {
  font-family: var(--x-display);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  line-height: 1.15;
  color: var(--x-paper);
  margin: 0 0 10px;
  text-wrap: balance;
}

.dsvc-desc {
  display: block;
  font-family: var(--x-sans);
  font-weight: 300;
  font-size: 0.76rem;
  line-height: 1.75;
  color: rgba(var(--x-paper-rgb), 0.68);
  margin-bottom: 14px;
}

.dsvc-arrow {
  display: inline-flex;
  color: var(--x-brass);
  transition: transform 0.5s var(--x-ease);
}

.dsvc-card:hover .dsvc-arrow { transform: translate(3px, -3px); }

/* ------------------------------------------------------ commercial band -- */
/* Same logic as the entries: a rule instead of a panel. */

/* Framed plate: copy left, photograph right, the whole thing inside a brass
   keyline with air around it, so it reads as a considered panel rather than a
   strip pinned under the entries. */
.dsvc-band {
  position: relative;
  max-width: 1560px;
  margin: clamp(30px, 5vw, 60px) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 44px);
  /* A warm veil, a couple of steps up from the ground — enough to read as a
     panel rather than a floating keyline, not enough to become a card. */
  background: linear-gradient(158deg,
    rgba(214, 198, 176, 0.085) 0%, rgba(186, 168, 145, 0.045) 100%);
  border: 0;
  /* Same corner as the centre plate above it, so the two read as one family. */
  border-radius: var(--x-r-photo);
  box-shadow: none;
  text-decoration: none;
  padding: clamp(18px, 1.8vw, 30px);
  align-items: center;
  transition: background 0.5s var(--x-ease);
}

.dsvc-band:hover {
  background: linear-gradient(158deg,
    rgba(224, 209, 189, 0.12) 0%, rgba(196, 178, 154, 0.065) 100%);
}

/* Copy first, photograph second. */
.dsvc-band-img {
  display: block;
  position: relative;
  order: 2;
  overflow: hidden;
  min-height: 400px;
  border-radius: var(--x-r-photo);
}

.dsvc-band-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The centre plate's grade, so both photographs sit at the same weight. */
  filter: saturate(0.92) contrast(1.04);
  transition: transform 1.5s var(--x-ease);
}

.dsvc-band:hover .dsvc-band-img img { transform: scale(1.05); }

.dsvc-band-body { display: block; order: 1; padding: clamp(14px, 2vw, 40px); align-self: center; }

.dsvc-band-title {
  font-family: var(--x-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  line-height: 1.08;
  color: var(--x-paper);
  margin: 0 0 16px;
}

.dsvc-band-title em { font-style: italic; color: var(--x-brass); }

.dsvc-band-desc {
  display: block;
  font-family: var(--x-sans);
  font-weight: 300;
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(var(--x-paper-rgb), 0.68);
  margin-bottom: 24px;
  max-width: 44ch;
}

.dsvc-band-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border: 1px solid rgba(var(--x-paper-rgb), 0.34);
  font-family: var(--x-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--x-paper);
  position: relative;
  overflow: hidden;
  transition: color 0.45s var(--x-ease), border-color 0.45s var(--x-ease);
}

.dsvc-band-cta > * { position: relative; z-index: 1; }

.dsvc-band-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--x-brass);
  transform: translateY(101%);
  transition: transform 0.5s var(--x-ease);
}

.dsvc-band:hover .dsvc-band-cta::after { transform: translateY(0); }
.dsvc-band:hover .dsvc-band-cta { color: var(--x-dark); border-color: var(--x-brass); }

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 1240px) {
  .dsvc-stage { grid-template-columns: 1fr 1fr 2.1fr 1fr 1fr; }
}

@media (max-width: 1080px) {
  .dsvc-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; padding: 20px 0 30px; }
  .dsvc-card { grid-row: auto; }
  .dsvc-card--1, .dsvc-card--2, .dsvc-card--3, .dsvc-card--4 {
    grid-column: auto; --sv-y: 0px;
  }
  .dsvc-centre {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-inline: 0;
    aspect-ratio: 16 / 9;
    margin-bottom: 18px;
    border-radius: var(--x-r-photo);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.45);
  }
}

@media (max-width: 1080px) {
  .dsvc-band-body { order: 2; }
  .dsvc-band-img { order: 1; }
}

@media (max-width: 620px) {
  .dsvc-stage { grid-template-columns: 1fr; }
  .dsvc-band { grid-template-columns: 1fr; }
  .dsvc-band-img { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .dsvc-card, .dsvc-centre img, .dsvc-band-img img { transition: none !important; }
}
/* The SECTION REVEAL block that used to close this file now lives in
   css/reveal.css: the pinned hero and its riding sheet are no longer unique
   to the home page, and the collections and services pages need the same
   panel behaviour without pulling in all of the home-only sections above.
   Load css/reveal.css alongside this file. */