/* ======================================================================
   /sales/selling-process/ — corrections that sit ON TOP of the generated
   assistant port. 20 August 2026.

   Kept separate from selling-process-assistant-2026.css because that file
   is regenerated by scripts/port-assistant-css.py and anything written
   into it would be lost on the next run.

   TWO OF THESE ARE INHERITED HOMEPAGE DEFECTS. The port is faithful, so
   it carried them across. Measured identically on both pages:

     .rd-route__num   #c5a66a on #f1e7d3   1.89:1   (needs 4.5)
     .rd-c-label      #8a7a55 on #fbf8f2   3.97:1   (needs 4.5)

   The route numeral at 1.89:1 is effectively unreadable. Fixed here; the
   homepage needs the same one-line change and has not been touched,
   because it is a shared file another session is working in.
   ==================================================================== */

/* the closed-route numeral. The open state already darkens to forest and
   passes, so only the resting colour moves. */
[data-page="selling-process"] .rd-route__num {
  color: #7a5a1e;
}

[data-page="selling-process"] .rd-route__disclosure[open] .rd-route__num {
  color: #17483c;
}

/* the contact-row label under the routes */
/* the port scopes this one under #dukes-receptionist, so the fix has to
   match that specificity to win */
[data-page="selling-process"] #dukes-receptionist .rd-c-label {
  color: #6b5e40;
}

/* ----------------------------------------------------------------------
   Tap targets. Three links on this page measured 21–22px against the 48px
   minimum in the Design Authority: the two certificate links in the
   credentials wall and the wall's own footer link. Additive only — the
   links keep their appearance, they just gain a real target.
   ---------------------------------------------------------------------- */

[data-page="selling-process"] .spj-credentials__foot a,
[data-page="selling-process"] main a[href$=".pdf"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ======================================================================
   Premium alignment pass — 20 August 2026.

   The page reads as one editorial journey: centred chapter lockups mark a
   new part of the story, while the useful copy inside stages and cards stays
   left aligned. The short rule is part of that shared lockup rather than an
   independently positioned decoration.
   ==================================================================== */

/* One centre axis and one section-aware metalwork system for every standalone
   chapter head. The field chooses the metal: oxblood on powder blue, warm
   copper on paper and brass on midnight. */
[data-page="selling-process"] .spj__heading-copy {
  --spj-heading-metal: var(--spj-oxblood);
}

[data-page="selling-process"] .spj-compare__head {
  --spj-heading-metal: var(--hx-gold-lift);
}

[data-page="selling-process"] .spj-next > header {
  --spj-heading-metal: var(--spj-oxblood);
}

[data-page="selling-process"] .spj-faq > div {
  --spj-heading-metal: var(--hxo-dusk);
}

[data-page="selling-process"] .spj-proof > header {
  --spj-heading-metal: var(--spj-forest);
}

[data-page="selling-process"] .spj-distribution > header {
  --spj-heading-metal: var(--hxo-dusk);
}

[data-page="selling-process"] .spj-credentials__head {
  --spj-heading-metal: var(--spj-forest);
}

/* These local assignments deliberately outrank older route rules that set
   every label independently. The label, side rails and underline now read as
   one material treatment. */
.page--selling-process[data-page="selling-process"] :is(
  .spj__heading-copy,
  .spj-compare__head,
  .spj-next > header,
  .spj-faq > div,
  .spj-proof > header,
  .spj-credentials__head,
  .spj-distribution > header
) .spj-kicker {
  color: var(--spj-heading-metal, var(--spj-oxblood, #7b2430));
}

[data-page="selling-process"] :is(
  .spj__heading-copy,
  .spj-compare__head,
  .spj-next > header,
  .spj-faq > div,
  .spj-proof > header,
  .spj-credentials__head,
  .spj-distribution > header
) {
  width: min(100%, 54rem);
  margin-inline: auto;
  text-align: center;
}

[data-page="selling-process"] :is(
  .spj__heading-copy,
  .spj-compare__head,
  .spj-next > header,
  .spj-faq > div,
  .spj-proof > header,
  .spj-credentials__head,
  .spj-distribution > header
) .spj-kicker {
  display: grid;
  grid-template-columns: minmax(2.5rem, 1fr) auto minmax(2.5rem, 1fr);
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.35rem);
  width: min(100%, 31rem);
  max-width: 31rem;
  margin-inline: auto;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.35;
}

[data-page="selling-process"] :is(
  .spj__heading-copy,
  .spj-compare__head,
  .spj-next > header,
  .spj-faq > div,
  .spj-proof > header,
  .spj-credentials__head,
  .spj-distribution > header
) .spj-kicker::before,
[data-page="selling-process"] :is(
  .spj__heading-copy,
  .spj-compare__head,
  .spj-next > header,
  .spj-faq > div,
  .spj-proof > header,
  .spj-credentials__head,
  .spj-distribution > header
) .spj-kicker::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.82;
}

[data-page="selling-process"] :is(
  .spj__heading-copy,
  .spj-compare__head,
  .spj-next > header,
  .spj-faq > div,
  .spj-proof > header,
  .spj-credentials__head,
  .spj-distribution > header
) :is(h2, h3) {
  max-width: 20ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}

[data-page="selling-process"] :is(
  .spj__heading-copy,
  .spj-compare__head,
  .spj-next > header,
  .spj-faq > div,
  .spj-proof > header,
  .spj-credentials__head,
  .spj-distribution > header
) :is(h2, h3)::after {
  content: "";
  position: static;
  display: block;
  width: clamp(8rem, 11vw, 11rem);
  height: 2px;
  margin: 0.62em auto 0;
  border-radius: 2px;
  background: var(--spj-heading-metal, var(--spj-oxblood, #7b2430));
  transform: none;
}

/* The generated route sheet carries a more specific legacy brass rule for
   this dark chapter. Keep the colour token local and make the newer system
   the explicit final authority. */
.page--selling-process[data-page="selling-process"] .spj-compare .spj-compare__head h2::after {
  background: var(--spj-heading-metal);
}

[data-page="selling-process"] :is(
  .spj__heading-copy,
  .spj-compare__head,
  .spj-next > header,
  .spj-faq > div,
  .spj-proof > header,
  .spj-credentials__head,
  .spj-distribution > header
) > p:last-child,
[data-page="selling-process"] .spj-proof > header > p,
[data-page="selling-process"] .spj-distribution > header > p:last-child {
  margin-inline: auto;
  text-align: center;
}

[data-page="selling-process"] .spj-proof > header > div {
  width: 100%;
}

[data-page="selling-process"] .spj-distribution > header h3 {
  max-width: 22ch;
}

/* Restore the design-authority zig-zag. A legacy nth-child rule otherwise
   forces every non-feature photograph into the right column. */
@media (min-width: 64.01em) {
  [data-page="selling-process"]
    .spj-stage.spj-stage:not(.spj-stage--feature):not(.spj-stage--reverse)
    .spj-stage__frame {
    grid-column: 1;
    grid-row: 1;
  }

  [data-page="selling-process"]
    .spj-stage.spj-stage:not(.spj-stage--feature):not(.spj-stage--reverse)
    .spj-stage__panel {
    grid-column: 2;
    grid-row: 1;
  }

  [data-page="selling-process"]
    .spj-stage.spj-stage--reverse:not(.spj-stage--feature)
    .spj-stage__frame {
    grid-column: 2;
    grid-row: 1;
  }

  [data-page="selling-process"]
    .spj-stage.spj-stage--reverse:not(.spj-stage--feature)
    .spj-stage__panel {
    grid-column: 1;
    grid-row: 1;
  }
}

/* Remove the inherited second grid row that has no content. */
[data-page="selling-process"] .spj-next .spj-next__grid {
  grid-template-rows: auto;
}

/* The four readiness conditions are one balanced set, not loose chips. */
[data-page="selling-process"] .spj-readiness ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-page="selling-process"] .spj-readiness li {
  justify-content: center;
  min-height: 44px;
  text-align: center;
}

/* The open stage drawer must be as operable as its 44px summary. */
[data-page="selling-process"] details.spj-guide-nav nav a {
  min-height: 44px;
}

/* The automatic welcome card obscures this long reading surface on narrow
   screens. The assistant launcher remains available at all times. */
[data-page="selling-process"] .dbubble {
  display: none !important;
}

@media (max-width: 64em) {
  /* The collage is intrinsically sized at tablet/mobile; the desktop cinema
     minimum was leaving a large, empty navy band beneath it. */
  [data-page="selling-process"] :is(.spj-hero__cinema, .spj-gallery) {
    min-height: 0;
  }
}

/* Stage 01 lockup: the stage marker sits directly over the title on the
   same centre axis; the longer explanatory copy remains left aligned. */
@media (min-width: 64.01em) {
  [data-page="selling-process"] #journey-priorities .spj-stage__number,
  [data-page="selling-process"] #journey-priorities .spj-stage__panel h3 {
    align-self: center;
    width: fit-content;
    text-align: center;
  }

  [data-page="selling-process"] #journey-priorities .spj-stage__number {
    justify-content: center;
  }
}


@media (max-width: 48em) {
  [data-page="selling-process"] :is(
    .spj,
    .spj-compare,
    .spj-readiness,
    .spj-next,
    .spj-faq,
    .spj-proof
  ) {
    margin-left: 0.625rem;
    margin-right: 0.625rem;
  }

  [data-page="selling-process"] :is(.spj, .spj-compare, .spj-readiness, .spj-next, .spj-faq, .spj-proof) {
    padding-left: clamp(1.25rem, 5vw, 1.5rem);
    padding-right: clamp(1.25rem, 5vw, 1.5rem);
  }
}

@media (max-width: 32em) {
  [data-page="selling-process"] .spj-readiness ul {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-page="selling-process"] :is(
    .spj__heading-copy,
    .spj-compare__head,
    .spj-next > header,
    .spj-faq > div,
    .spj-proof > header,
    .spj-credentials__head,
    .spj-distribution > header
  ) :is(h2, h3)::after {
    transform: none;
  }
}

/* ======================================================================
   Stage-card density pass — 21 August 2026.

   The media and copy previously hugged opposite outer edges of a very wide
   card. The new geometry centres each readable block inside its own half and
   removes the oversized blank middle without centring paragraph text.
   ==================================================================== */

@media (min-width: 64.01em) {
  [data-page="selling-process"] .spj-stage.spj-stage,
  [data-page="selling-process"] .spj-stage.spj-stage--reverse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 2.5vw, 2.75rem);
    padding: clamp(1.1rem, 1.5vw, 1.4rem);
  }

  [data-page="selling-process"] .spj-stage:not(.spj-stage--feature) .spj-stage__frame img {
    aspect-ratio: 16 / 9;
  }

  [data-page="selling-process"] .spj-stage:not(.spj-stage--feature) .spj-stage__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-self: center;
    width: min(100%, 38rem);
    padding: clamp(0.5rem, 1vw, 0.9rem);
  }

  /* The two bookends are one centred narrative instead of two small copy
     islands at opposite sides of a full-width white panel. */
  [data-page="selling-process"] .spj-stage.spj-stage--feature {
    grid-template-columns: 1fr;
  }

  [data-page="selling-process"] .spj-stage.spj-stage--feature .spj-stage__frame img {
    aspect-ratio: 3 / 1;
  }

  [data-page="selling-process"] .spj-stage.spj-stage--feature .spj-stage__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: min(100%, 54rem);
    max-width: 54rem;
    margin-inline: auto;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0 clamp(0.5rem, 1vw, 0.8rem);
    text-align: left;
  }

  [data-page="selling-process"] .spj-stage.spj-stage--feature .spj-stage__number,
  [data-page="selling-process"] .spj-stage.spj-stage--feature .spj-stage__signal {
    justify-content: flex-start;
  }

  [data-page="selling-process"] .spj-stage.spj-stage--feature .spj-stage__panel h3,
  [data-page="selling-process"] .spj-stage.spj-stage--feature .spj-stage__answer,
  [data-page="selling-process"] .spj-stage.spj-stage--feature .spj-stage__signal,
  [data-page="selling-process"] .spj-stage.spj-stage--feature .spj-stage__detail {
    width: 100%;
    max-width: 60ch;
  }

  [data-page="selling-process"] .spj-stage.spj-stage--feature .spj-stage__answer {
    margin-top: 0.85rem;
  }
}

@media (max-width: 64em) {
  [data-page="selling-process"] .spj-stage .spj-stage__panel,
  [data-page="selling-process"] .spj-stage.spj-stage--feature .spj-stage__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.75rem 0.25rem 0.25rem;
    text-align: left;
  }

  [data-page="selling-process"] .spj-stage.spj-stage--feature .spj-stage__number,
  [data-page="selling-process"] .spj-stage.spj-stage--feature .spj-stage__signal {
    justify-content: flex-start;
  }
}

/* Stage 01 is a two-part decision lockup: the stage and decision sit in the
   left half; the explanation and action are centred as a group in the right. */
@media (min-width: 64.01em) {
  [data-page="selling-process"] #journey-priorities .spj-stage__panel {
    display: grid;
    grid-template-columns: minmax(18rem, 0.82fr) minmax(26rem, 1.18fr);
    align-items: center;
    column-gap: clamp(3rem, 7vw, 8rem);
    width: 100%;
    max-width: none;
    padding: clamp(2rem, 3vw, 3.5rem) clamp(2rem, 4vw, 5rem);
  }

  [data-page="selling-process"] #journey-priorities .spj-stage__lead {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1rem;
    min-width: 0;
    text-align: center;
  }

  [data-page="selling-process"] #journey-priorities .spj-stage__support {
    display: grid;
    align-content: center;
    justify-self: center;
    gap: 1.1rem;
    width: min(100%, 44rem);
    min-width: 0;
    text-align: left;
  }

  [data-page="selling-process"] #journey-priorities :is(
    .spj-stage__number,
    .spj-stage__panel h3,
    .spj-stage__answer,
    .spj-stage__signal,
    .spj-stage__detail
  ) {
    width: auto;
    max-width: none;
    margin: 0;
  }
}

@media (max-width: 64em) {
  [data-page="selling-process"] #journey-priorities :is(.spj-stage__lead, .spj-stage__support) {
    display: grid;
    justify-items: start;
    gap: 0.9rem;
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  [data-page="selling-process"] #journey-priorities .spj-stage__support {
    margin-top: 0.85rem;
  }
}

/* Premium hero statement: the established navy field and documentary gallery
   remain, while the H1 takes on the centred Gloock authority of the Dukes
   campaign language. */
[data-page="selling-process"] {
  --font-display: "Gloock", Georgia, "Times New Roman", serif;
}

[data-page="selling-process"] .spj-hero__copy {
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 4.8vw, 5rem) clamp(1.5rem, 2vw, 2.25rem);
  text-align: center;
}

[data-page="selling-process"] .spj-hero__label {
  display: grid;
  grid-template-columns: minmax(2.5rem, 1fr) auto minmax(2.5rem, 1fr);
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.35rem);
  width: min(100%, 30rem);
  margin-inline: auto;
  color: var(--hx-gold-lift, #d3b87f);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

[data-page="selling-process"] .spj-hero__label::before,
[data-page="selling-process"] .spj-hero__label::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.88;
}

[data-page="selling-process"] .spj-hero__title {
  width: 100%;
  max-width: none;
  margin: 1rem auto 0;
  color: var(--hx-cream-text, #f4eee3);
  font-family: "Gloock", Georgia, "Times New Roman", serif;
  font-size: clamp(3.6rem, 4.3vw, 5.25rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.94;
  text-align: center;
  text-wrap: balance;
}

[data-page="selling-process"] .spj-hero__title span {
  display: block;
}

[data-page="selling-process"] .spj-hero__title::after {
  content: "";
  display: block;
  width: clamp(8rem, 10vw, 10.5rem);
  height: 2px;
  margin: 1.45rem auto 0;
  background: var(--hx-gold-lift, #d3b87f);
}

[data-page="selling-process"] .spj-hero__lede {
  max-width: 38rem;
  margin: 1.35rem auto 0;
  color: var(--hx-cream-text-soft, #d3ccbe);
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.6;
  text-align: center;
  text-wrap: pretty;
}

[data-page="selling-process"] .spj-hero__actions {
  justify-content: center;
  margin-inline: auto;
}

@media (min-width: 71.25em) {
  [data-page="selling-process"] .spj-hero {
    grid-template-columns: minmax(31rem, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2.5rem, 4vw, 4.5rem);
  }
}

@media (max-width: 47.99em) {
  [data-page="selling-process"] .spj-hero__copy {
    padding: 3.25rem 1.25rem 2.5rem;
  }

  [data-page="selling-process"] .spj-hero__title {
    font-size: clamp(2.75rem, 11.5vw, 3.6rem);
  }

  [data-page="selling-process"] .spj-hero__title::after {
    width: 7.5rem;
    margin-top: 1.2rem;
  }

  [data-page="selling-process"] :is(
    .spj__heading-copy,
    .spj-compare__head,
    .spj-next > header,
    .spj-faq > div,
    .spj-proof > header,
    .spj-credentials__head,
    .spj-distribution > header
  ) .spj-kicker,
  [data-page="selling-process"] .spj-hero__label {
    width: min(100%, 22rem);
    gap: 0.75rem;
  }
}

/* Explicit stage placement wins over the retired nth-child composition. */
@media (min-width: 70.01em) {
  .page--selling-process .spj-stage:not(.spj-stage--reverse):not(.spj-stage--feature) .spj-stage__frame {
    grid-column: 1;
    grid-row: 1;
  }
  .page--selling-process .spj-stage:not(.spj-stage--reverse):not(.spj-stage--feature) .spj-stage__panel {
    grid-column: 2;
    grid-row: 1;
  }
  .page--selling-process .spj-stage.spj-stage--reverse:not(.spj-stage--feature) .spj-stage__frame {
    grid-column: 2;
    grid-row: 1;
  }
  .page--selling-process .spj-stage.spj-stage--reverse:not(.spj-stage--feature) .spj-stage__panel {
    grid-column: 1;
    grid-row: 1;
  }
}

.page--selling-process details.spj-guide-nav nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
}