/* Sales Valuation — claude-lane field pass, 18 August 2026 (v14).
   Served ONLY through scratchpad/claude-only/server.mjs on :4290 under
   /assets/css/sales-valuation-distilled.css; the public tree keeps its
   own copy. Base is the v13 state Aarav reviewed and partially approved
   (his screenshots), NOT the parallel session's v16 rewrite. Round-5
   verdicts built in:
   - APPROVED, do not restyle: the brown/umber colourway (umber visit
     panel, dark evidence cells), the split 2×2 FAQ, the blush reviews
     treatment;
   - FIELDS: the guide's flow grammar in this page's own colourway. The
     page ground is pale sage-olive (--svx-ground) and every major
     section sits on its own full-height colour field: forest hero →
     sand assurance field → cream human band → sage priority field →
     stone story field → clay evidence field → umber appointment panel
     → sage question field → blush proof → stone tools → forest close.
     Nothing sits directly on the ground; the guide's powder blue is
     deliberately absent;
   - the visit is a VERTICAL timeline: crown placeholder plate left
     (dark slot variant), dotted brass spine with separated 01/02/03
     nodes, step copy right, the action kept at the end;
   - the hero carries the townscape alone. STANDING RULE: Claude never
     adds or sources an image; a layout that wants one gets a labelled
     crown placeholder (ratio tagged) for Aarav's generated art;
   - the hero clears the shared site header with real breathing room;
   - ONE premium white token: every light plate and the cream action
     resolve to --svx-cream; standalone text actions meet 48px targets.
   LANE OWNER: session e435a4d8 (this file's name is versioned so the
   parallel session's stale rewrites of the old filename miss the lane). */

.page--sales-valuation {
  --svx-ink: #262019;
  --svx-ink-soft: #55493d;
  --svx-forest: #155443;
  --svx-forest-deep: #0f3028;
  --svx-paper: #f3eee5;
  --svx-cream: #fffdf8;
  --svx-parchment: #f8f2e6;
  --svx-sage: #d7e2da; /* top chrome only: the page-nav hover keeps it */
  --svx-clay: #a04a30;
  --svx-clay-deep: #7d3520;
  --svx-clay-tint: #eedbcf;
  --svx-umber: #2b211a;
  --svx-umber-soft: #6d5c4c;
  --svx-brass: #8a6423;
  --svx-focus: #c59743;
  --svx-blush: #ead5d2; /* the proof field stays pink — Aarav, 18 Aug round 3 */
  --svx-stone: #e7dcc8; /* story field + closing band */
  --svx-ground: #e9ece1; /* page ground — pale sage-olive; no content sits on it directly */
  --svx-field-sand: #ebdfc6; /* assurance field */
  --svx-field-sage: #dfe7d8; /* priority + questions fields */
  /* Grounding standard (Aarav, round 3): plates carry a visible hairline and
     a tight shadow, never a wide soft halo. */
  --svx-plate-line: 1px solid rgba(38, 32, 25, 0.16);
  --svx-plate-shadow: 0 6px 16px -10px rgba(43, 33, 26, 0.3);
  --svx-field-line: 1px solid rgba(38, 32, 25, 0.1);
  --svx-shell: min(94vw, 1640px);
  background: var(--svx-ground);
  color: var(--svx-ink);
  font-family: "Manrope", sans-serif;
  scrollbar-color: var(--svx-forest) var(--svx-ground);
  scrollbar-width: thin;
}

/* --------------------------------------------------------------------------
   Sticky "On this page" control, joined to the measured header seam.
   ----------------------------------------------------------------------- */

.page--sales-valuation .svx-nav {
  position: sticky;
  top: var(--sales-nav-seam, var(--head-h, 79px));
  z-index: 900;
  height: 0;
  width: max-content;
  max-width: calc(100vw - 2rem);
  margin: 0 0 0 clamp(1rem, 3vw, 2.5rem);
  overflow: visible;
  transition: top 240ms ease;
}

.site-head.head--hidden ~ .main .svx-nav { top: 0; }

@media (prefers-reduced-motion: reduce) {
  .page--sales-valuation .svx-nav { transition: none; }
}

.page--sales-valuation .svx-nav > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  gap: 0.8rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid rgba(38, 32, 25, 0.2);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 6px 16px -8px rgba(43, 33, 26, 0.35);
  transform: translateY(0.6rem);
  color: var(--svx-ink);
  cursor: pointer;
  list-style: none;
}

.page--sales-valuation .svx-nav > summary::-webkit-details-marker { display: none; }

.page--sales-valuation .svx-nav > summary span {
  color: var(--svx-brass);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.page--sales-valuation .svx-nav > summary strong {
  font-size: 0.92rem;
  font-weight: 750;
}

.page--sales-valuation .svx-nav > summary::after {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.2rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms ease;
}

.page--sales-valuation .svx-nav[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.page--sales-valuation .svx-nav > summary:focus-visible {
  outline: 3px solid var(--svx-focus);
  outline-offset: 3px;
}

.page--sales-valuation .svx-nav:not([open]) nav { display: none; }

.page--sales-valuation .svx-nav[open] nav {
  position: fixed;
  top: var(--sales-nav-seam, var(--head-h, 79px));
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(19rem, 86vw);
  max-height: calc(100vh - var(--sales-nav-seam, var(--head-h, 79px)) - 1rem);
  padding: 0.9rem 0.85rem 1rem;
  overflow-y: auto;
  border: 1px solid rgba(38, 32, 25, 0.14);
  border-left: 0;
  border-radius: 0 16px 16px 0;
  background: var(--svx-cream);
  box-shadow: 0 10px 28px -12px rgba(43, 33, 26, 0.4);
}

.page--sales-valuation .site-head.head--hidden ~ .main .svx-nav[open] nav { top: 0; }

.page--sales-valuation .svx-nav nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  color: #23332c;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .page--sales-valuation .svx-nav nav a:hover { background: var(--svx-sage); }
}

.page--sales-valuation .svx-nav nav a:focus-visible {
  outline: 3px solid var(--svx-focus);
  outline-offset: 2px;
  background: var(--svx-sage);
}

.page--sales-valuation [data-sales-section],
.page--sales-valuation .svx-questions,
.page--sales-valuation .svx-contact {
  scroll-margin-top: calc(var(--sales-nav-seam, var(--head-h, 84px)) + 4.5rem);
}

/* --------------------------------------------------------------------------
   Branded image-slot standard: a tinted plate with a ghost crown watermark,
   one short label chip and a ratio tag. Every empty slot on the page uses
   this; Aarav fills them with generated art.
   ----------------------------------------------------------------------- */

.page--sales-valuation .svx-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(24, 32, 28, 0.3);
  border-radius: 12px;
  background: rgba(24, 32, 28, 0.04);
  color: rgba(24, 32, 28, 0.52);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.45;
  text-align: center;
}

.page--sales-valuation .svx-slot {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border: var(--svx-plate-line);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(160, 74, 48, 0.1), rgba(160, 74, 48, 0)), var(--svx-clay-tint);
}

.page--sales-valuation .svx-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/brand/dukes-crown.png") center / clamp(3.5rem, 34%, 7rem) no-repeat;
  opacity: 0.14;
}

.page--sales-valuation .svx-slot__chip {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.92);
  color: #5f4c3f;
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1.2;
}

.page--sales-valuation .svx-slot__ratio {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(43, 33, 26, 0.78);
  color: #f2ece2;
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* Dark-field variant for slots seated on the umber panel. */
.page--sales-valuation .svx-slot--dark {
  border: 1px solid rgba(246, 239, 223, 0.22);
  background: linear-gradient(150deg, rgba(197, 151, 67, 0.16), rgba(197, 151, 67, 0)), #3a2d22;
}

.page--sales-valuation .svx-slot--dark::before { filter: invert(1); opacity: 0.1; }

.page--sales-valuation .svx-slot--dark .svx-slot__chip {
  background: rgba(38, 30, 22, 0.72);
  color: #f2e9d8;
}

.page--sales-valuation .svx-slot--dark .svx-slot__ratio {
  background: rgba(255, 253, 248, 0.16);
  color: #f2e9d8;
}

/* --------------------------------------------------------------------------
   Hero: deep-forest signature panel, stacked Gloock statement, the real
   townscape plate alone. Round 5: clear breathing room under the shared
   header; no second image and no companion tile (Aarav generates all art).
   ----------------------------------------------------------------------- */

.page--sales-valuation .svx-hero {
  display: grid;
  width: var(--svx-shell);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  min-height: clamp(540px, 64vh, 680px);
  margin: clamp(1.4rem, 2.6vw, 2.4rem) auto clamp(4rem, 7vw, 7rem);
  padding: clamp(2rem, 4.5vw, 4.5rem);
  border-radius: 18px 18px 72px 18px;
  background:
    radial-gradient(120% 140% at 88% 8%, rgba(21, 84, 67, 0.55) 0%, transparent 55%),
    var(--svx-forest-deep);
  box-shadow: 0 14px 30px -18px rgba(15, 48, 40, 0.55);
  color: #f2efe6;
}

.page--sales-valuation .svx-hero h1 {
  max-width: 12ch;
  margin: 0;
  color: #f7f3e9;
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(2.8rem, 4.6vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.96;
  text-wrap: balance;
}

.page--sales-valuation .svx-hero h1 span,
.page--sales-valuation .svx-hero h1 em { display: block; }

.page--sales-valuation .svx-hero h1 em {
  color: #b9d4c3;
  font-style: normal;
}

.page--sales-valuation .svx-hero__lede {
  max-width: 46ch;
  margin: 1.3rem 0 0;
  color: #e4e0d4;
  font-size: clamp(0.98rem, 1.25vw, 1.12rem);
  line-height: 1.55;
}

.page--sales-valuation .svx-hero__edition {
  width: fit-content;
  margin: 1.1rem 0 0;
  color: #cbb98a;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.page--sales-valuation .svx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.3rem;
  margin: 1.7rem 0 0;
}

.page--sales-valuation .svx-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0.82rem 1.35rem;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 750;
  text-decoration: none;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms ease, color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .page--sales-valuation .svx-button:hover { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .page--sales-valuation .svx-button,
  .page--sales-valuation .svx-button:hover { transform: none; transition: background 180ms ease, color 180ms ease; }
}

.page--sales-valuation .svx-button:focus-visible {
  outline: 3px solid var(--svx-focus);
  outline-offset: 3px;
}

/* One premium white: the cream action rests on the same token as the
   plates and presses one step warmer on hover. */
.page--sales-valuation .svx-button--cream { background: var(--svx-cream); color: var(--svx-forest-deep); }
.page--sales-valuation .svx-button--cream:hover { background: #efe6d2; }
.page--sales-valuation .svx-button--forest { background: var(--svx-forest); color: #f5f1e6; }
.page--sales-valuation .svx-button--forest:hover { background: var(--svx-forest-deep); }
.page--sales-valuation .svx-button--clay { background: var(--svx-clay); color: #fff7ef; }
.page--sales-valuation .svx-button--clay:hover { background: var(--svx-clay-deep); }

.page--sales-valuation .svx-text-action {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(242, 239, 230, 0.55);
  color: #f2efe6;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .page--sales-valuation .svx-text-action:hover { color: #b9d4c3; border-bottom-color: currentColor; }
}

.page--sales-valuation .svx-hero__stage {
  position: relative;
  height: 100%;
  min-height: 24rem;
}

.page--sales-valuation .svx-hero__plate {
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 14px 14px 44px 14px;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.45);
}

.page--sales-valuation .svx-hero__plate img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Assurance triptych on its sand field: three document cards, each led by
   a full-width 4:5 crown placeholder plate with number, title and line in
   one lockup beneath — nothing floats beside a stamp.
   ----------------------------------------------------------------------- */

.page--sales-valuation .svx-kicker {
  margin: 0 0 1.1rem;
  color: var(--svx-clay-deep);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page--sales-valuation .svx-kicker--dark { color: var(--svx-focus); }

.page--sales-valuation .svx-mark {
  width: min(92vw, 1440px);
  margin: 0 auto clamp(4rem, 7vw, 7rem);
  padding: clamp(2rem, 4vw, 3.5rem);
  border: var(--svx-field-line);
  border-radius: 16px 16px 52px 16px;
  background: var(--svx-field-sand);
}

.page--sales-valuation .svx-mark__band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.page--sales-valuation .svx-mark__item {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: var(--svx-plate-line);
  border-radius: 14px 14px 36px 14px;
  background: var(--svx-cream);
  box-shadow: var(--svx-plate-shadow);
}

.page--sales-valuation .svx-mark__slot {
  margin: 0;
  aspect-ratio: 4 / 5;
  border: 0;
  border-bottom: var(--svx-plate-line);
  border-radius: 0;
}

.page--sales-valuation .svx-mark__copy {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.15rem 1.25rem 1.5rem;
}

.page--sales-valuation .svx-mark__n {
  color: var(--svx-clay);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.page--sales-valuation .svx-mark__copy strong {
  color: var(--svx-ink);
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 400;
  line-height: 1.15;
}

.page--sales-valuation .svx-mark__copy > span:last-child {
  max-width: 34ch;
  color: var(--svx-ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Human editorial row on its own cream band.
   ----------------------------------------------------------------------- */

.page--sales-valuation .svx-human {
  display: grid;
  width: min(92vw, 1440px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin: 0 auto clamp(4rem, 7vw, 7rem);
  padding: clamp(2rem, 4vw, 3.5rem);
  border: var(--svx-field-line);
  border-radius: 16px 16px 52px 16px;
  background: var(--svx-cream);
}

/* No text overlays on photographs (Aarav, round 3, point 3). */
.page--sales-valuation .svx-human__media { margin: 0; }

.page--sales-valuation .svx-human__media img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: var(--svx-plate-line);
  border-radius: 14px 44px 14px 14px;
  box-shadow: var(--svx-plate-shadow);
}

.page--sales-valuation .svx-human__media figcaption {
  margin-top: 0.6rem;
  color: var(--svx-ink-soft);
  font-size: 0.875rem;
  line-height: 1.45;
}

.page--sales-valuation .svx-human__copy h2 {
  max-width: 17ch;
  margin: 0;
  color: var(--svx-ink);
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(2rem, 3.3vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

.page--sales-valuation .svx-human__copy p {
  max-width: 56ch;
  margin: 1.1rem 0 0;
  color: var(--svx-ink-soft);
  font-size: 1.05rem;
  line-height: 1.68;
}

/* --------------------------------------------------------------------------
   Reading shell and chapter heads: a short clay keyline under each head.
   ----------------------------------------------------------------------- */

.page--sales-valuation .svx-shell {
  width: min(92vw, 1440px);
  margin: 0 auto;
}

.page--sales-valuation .svx-head {
  display: block;
  max-width: 64ch;
  padding-bottom: 1.5rem;
}

.page--sales-valuation .svx-head .svx-head__intro { margin-top: 1rem; }

.page--sales-valuation .svx-head h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin-top: 1rem;
  border-radius: 2px;
  background: var(--svx-clay);
}

.page--sales-valuation .svx-head h2,
.page--sales-valuation .svx-evidence h2,
.page--sales-valuation .svx-visit h2,
.page--sales-valuation .svx-proof h2,
.page--sales-valuation .svx-contact h2 {
  margin: 0;
  color: var(--svx-ink);
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}

.page--sales-valuation .svx-head__intro {
  max-width: 58ch;
  margin: 0;
  color: var(--svx-ink-soft);
  font-size: 1rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Priority chooser on its sage field: segment track, sliding cream pill,
   result plate with the labelled starting-point slot.
   ----------------------------------------------------------------------- */

.page--sales-valuation .svx-priority {
  margin: 0 0 clamp(4rem, 7vw, 7rem);
  padding: clamp(2rem, 4vw, 3.5rem);
  border: var(--svx-field-line);
  border-radius: 16px 16px 52px 16px;
  background: var(--svx-field-sage);
}

.page--sales-valuation .svx-priority__choice {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0.7rem 1.25rem;
  border: 1px solid rgba(24, 32, 28, 0.28);
  border-radius: 999px;
  background: var(--svx-cream);
  color: var(--svx-ink);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.page--sales-valuation .svx-priority__choice:hover { border-color: var(--svx-clay); background: var(--svx-clay-tint); }

.page--sales-valuation .svx-priority__choice.is-active {
  border-color: var(--svx-forest);
  background: var(--svx-forest);
  color: #f2efe6;
}

.page--sales-valuation .svx-priority__choice:focus-visible {
  outline: 3px solid var(--svx-focus);
  outline-offset: 3px;
}

.page--sales-valuation .svx-priority__n {
  color: var(--svx-clay-deep);
  font-size: 0.875rem;
  font-weight: 800;
}

.page--sales-valuation .svx-priority__choice.is-active .svx-priority__n { color: #cbb98a; }

.page--sales-valuation .svx-priority__title {
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.3;
}

.page--sales-valuation .svx-priority__results {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 0.42fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: stretch;
  margin: 1.6rem 0 0;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: var(--svx-plate-line);
  border-radius: 14px 14px 32px 14px;
  background: var(--svx-cream);
  box-shadow: var(--svx-plate-shadow);
}

.page--sales-valuation .svx-priority__slot { min-height: 13rem; }

.page--sales-valuation .svx-priority__result { display: none; max-width: 62ch; }
.page--sales-valuation .svx-priority__result[data-active] { display: block; }

.page--sales-valuation .svx-priority__result h3 {
  margin: 0;
  color: var(--svx-ink);
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.55rem, 2.4vw, 2.35rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.page--sales-valuation .svx-priority__result p {
  max-width: 62ch;
  margin: 0.8rem 0 1rem;
  color: var(--svx-ink-soft);
  font-size: 1.02rem;
  line-height: 1.65;
}

.page--sales-valuation .svx-priority__result a {
  color: var(--svx-clay-deep);
  font-size: 0.9rem;
  font-weight: 800;
  text-underline-offset: 0.24em;
}

/* --------------------------------------------------------------------------
   Takeaways on the stone story field: composed plates, each photograph
   with its copy card overlapping the plate edge; sides alternate.
   ----------------------------------------------------------------------- */

.page--sales-valuation .svx-takeaways {
  margin: 0 0 clamp(4rem, 7vw, 7rem);
  padding: clamp(2rem, 4vw, 3.5rem);
  border: var(--svx-field-line);
  border-radius: 16px 16px 52px 16px;
  background: var(--svx-stone);
}

.page--sales-valuation .svx-story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.page--sales-valuation .svx-story + .svx-story {
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
}

.page--sales-valuation .svx-story__media {
  grid-column: 1 / span 8;
  grid-row: 1;
  min-height: clamp(16rem, 30vw, 26rem);
  margin: 0;
  overflow: hidden;
  border-radius: 14px 14px 44px 14px;
  border: var(--svx-plate-line);
  box-shadow: var(--svx-plate-shadow);
}

.page--sales-valuation .svx-story__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.page--sales-valuation .svx-story__card {
  z-index: 1;
  grid-column: 7 / -1;
  grid-row: 1;
  margin-top: clamp(2.25rem, 5vw, 4.25rem);
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  border: var(--svx-plate-line);
  border-radius: 14px 14px 36px 14px;
  background: var(--svx-cream);
  box-shadow: var(--svx-plate-shadow);
}

.page--sales-valuation .svx-story--flip .svx-story__media { grid-column: 5 / -1; }
.page--sales-valuation .svx-story--flip .svx-story__card { grid-column: 1 / span 6; }

.page--sales-valuation .svx-story__n {
  margin: 0 0 0.7rem;
  color: var(--svx-clay);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.page--sales-valuation .svx-story__card h3 {
  max-width: 24ch;
  margin: 0;
  color: var(--svx-ink);
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.page--sales-valuation .svx-story__card p:not(.svx-story__n) {
  max-width: 52ch;
  margin: 0.9rem 0 1.1rem;
  color: var(--svx-ink-soft);
  font-size: 1.02rem;
  line-height: 1.68;
}

.page--sales-valuation .svx-story__card a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 48px;
  color: var(--svx-clay-deep);
  font-size: 0.92rem;
  font-weight: 800;
  text-underline-offset: 0.24em;
}

/* --------------------------------------------------------------------------
   Evidence: clay field, asymmetric bento — the opening cell in the
   bottom's espresso dark, the closing cell in deep clay, cream between.
   ----------------------------------------------------------------------- */

.page--sales-valuation .svx-evidence {
  margin: 0 0 clamp(4rem, 7vw, 7rem);
  padding: clamp(2.2rem, 5vw, 4.5rem);
  border: 1px solid rgba(125, 53, 32, 0.18);
  border-radius: 16px 16px 52px 16px;
  background: var(--svx-clay-tint);
  box-shadow: none;
}

.page--sales-valuation .svx-evidence h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin-top: 1rem;
  border-radius: 2px;
  background: var(--svx-clay);
}

.page--sales-valuation .svx-evidence__intro {
  max-width: 52ch;
  margin: 1rem 0 0;
  color: var(--svx-umber-soft);
  font-size: 1rem;
  line-height: 1.65;
}

.page--sales-valuation .svx-evidence__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  margin-top: 2.25rem;
}

.page--sales-valuation .svx-evidence__grid > div {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: clamp(1.1rem, 1.9vw, 1.7rem);
  border: var(--svx-plate-line);
  border-radius: 12px 12px 26px 12px;
  background: var(--svx-cream);
}

.page--sales-valuation .svx-evidence__grid > div:nth-child(1),
.page--sales-valuation .svx-evidence__grid > div:nth-child(6) {
  grid-column: span 2;
}

.page--sales-valuation .svx-evidence__grid > div:nth-child(1) {
  border-color: transparent;
  background: var(--svx-umber);
}

.page--sales-valuation .svx-evidence__grid > div:nth-child(1) .svx-evidence__n { color: var(--svx-focus); }
.page--sales-valuation .svx-evidence__grid > div:nth-child(1) strong { color: #f4ecdd; }
.page--sales-valuation .svx-evidence__grid > div:nth-child(1) > span:last-child { color: #cfc2b1; }

.page--sales-valuation .svx-evidence__grid > div:nth-child(6) {
  border-color: transparent;
  background: var(--svx-clay-deep);
}

.page--sales-valuation .svx-evidence__grid > div:nth-child(6) .svx-evidence__n { color: #f0c9a8; }
.page--sales-valuation .svx-evidence__grid > div:nth-child(6) strong { color: #fff3e9; }
.page--sales-valuation .svx-evidence__grid > div:nth-child(6) > span:last-child { color: #f2d9c9; }

.page--sales-valuation .svx-evidence__n {
  color: var(--svx-clay-deep);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.page--sales-valuation .svx-evidence__grid strong {
  color: var(--svx-umber);
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.1rem, 1.55vw, 1.4rem);
  font-weight: 400;
  line-height: 1.15;
}

.page--sales-valuation .svx-evidence__grid > div > span:last-child {
  max-width: 44ch;
  color: var(--svx-ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

/* Lane claude-4: the markup carries the stamped assessment note (crown in a
   brass ring beside the three standing disclosures); these are its styles —
   the old dot-separated footline rules matched markup that no longer exists. */
.page--sales-valuation .svx-evidence__note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: center;
  margin-top: 1.9rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid rgba(138, 100, 35, 0.4);
  border-radius: 12px;
  background: var(--svx-cream);
}

.page--sales-valuation .svx-evidence__stamp {
  display: flex;
  width: 3.4rem;
  height: 3.4rem;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(138, 100, 35, 0.6);
  border-radius: 50%;
}

.page--sales-valuation .svx-evidence__stamp img {
  width: 2rem;
  height: auto;
  display: block;
  opacity: 0.9;
}

.page--sales-valuation .svx-evidence__note-lines { display: grid; gap: 0.25rem; }

.page--sales-valuation .svx-evidence__note p {
  margin: 0;
  color: #5f4c3f;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Visit: the bottom's dark chapter as a VERTICAL timeline. Crown
   placeholder plate left, dotted brass spine with separated nodes,
   step copy right, the action at the end. (Round 5.)
   ----------------------------------------------------------------------- */

.page--sales-valuation .svx-visit {
  margin: 0 0 clamp(4rem, 7vw, 7rem);
  padding: clamp(2.2rem, 5vw, 4rem);
  border-radius: 16px 16px 52px 16px;
  background:
    radial-gradient(120% 150% at 92% 0%, rgba(160, 74, 48, 0.26) 0%, transparent 55%),
    var(--svx-umber);
  box-shadow: 0 14px 30px -18px rgba(43, 33, 26, 0.6);
}

.page--sales-valuation .svx-visit h2 { color: #f6efdf; }

.page--sales-valuation .svx-visit h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin-top: 1rem;
  border-radius: 2px;
  background: var(--svx-focus);
}

.page--sales-valuation .svx-visit__head { display: block; max-width: 64ch; }

.page--sales-valuation .svx-visit__head p {
  max-width: 58ch;
  margin: 1rem 0 0;
  color: #cfc2b1;
  font-size: 1rem;
  line-height: 1.65;
}

.page--sales-valuation .svx-visit__body {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: start;
  margin-top: clamp(1.9rem, 3vw, 2.6rem);
}

.page--sales-valuation .svx-visit__slot {
  width: 100%;
  aspect-ratio: 4 / 5;
  align-self: center;
}

.page--sales-valuation .svx-visit__steps {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 3.2vw, 2.8rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page--sales-valuation .svx-visit__steps li {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  column-gap: 1.25rem;
  row-gap: 0.55rem;
  align-items: start;
}

.page--sales-valuation .svx-visit__steps li > span {
  grid-row: 1 / 3;
  display: inline-flex;
  width: 2.6rem;
  height: 2.6rem;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--svx-focus);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.07);
  color: #e8c98f;
  font-family: "Gloock", Georgia, serif;
  font-size: 1.15rem;
  line-height: 1;
}

/* The spine: a dotted brass thread running node to node, stopping clear
   of each medallion so the sequence reads as separated stations. */
.page--sales-valuation .svx-visit__steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3rem;
  bottom: calc(-1 * clamp(2rem, 3.2vw, 2.8rem) + 0.4rem);
  left: 1.3rem;
  border-left: 2px dotted rgba(197, 151, 67, 0.5);
}

.page--sales-valuation .svx-visit__steps h3 {
  grid-column: 2;
  margin: 0;
  padding-top: 0.45rem;
  color: #f6efdf;
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.2rem, 1.75vw, 1.6rem);
  font-weight: 400;
  line-height: 1.15;
}

.page--sales-valuation .svx-visit__steps p {
  grid-column: 2;
  max-width: 52ch;
  margin: 0;
  color: #c9bcab;
  font-size: 1rem;
  line-height: 1.6;
}

.page--sales-valuation .svx-visit__action { margin: clamp(2rem, 3vw, 2.5rem) 0 0; }

/* --------------------------------------------------------------------------
   Questions on the sage field: four cream documents in a two-across grid,
   separated by space alone. Plus signs kept. (Split FAQ approved.)
   ----------------------------------------------------------------------- */

.page--sales-valuation .svx-questions {
  margin: 0 0 clamp(4rem, 7vw, 7rem);
  padding: clamp(2rem, 4vw, 3.5rem);
  border: var(--svx-field-line);
  border-radius: 16px 16px 52px 16px;
  background: var(--svx-field-sage);
}

.page--sales-valuation .svx-questions__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  align-items: start;
  margin-top: 0.5rem;
}

.page--sales-valuation .svx-question {
  border: var(--svx-plate-line);
  border-radius: 12px 12px 26px 12px;
  background: var(--svx-cream);
  box-shadow: var(--svx-plate-shadow);
  transition: background 180ms ease, border-color 180ms ease;
}

.page--sales-valuation .svx-question[open] {
  border-color: rgba(160, 74, 48, 0.4);
  background: var(--svx-parchment);
}

.page--sales-valuation .svx-question summary {
  display: grid;
  min-height: 68px;
  grid-template-columns: 2.5rem 1fr 2rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.4rem;
  color: var(--svx-ink);
  cursor: pointer;
  list-style: none;
}

.page--sales-valuation .svx-question summary::-webkit-details-marker { display: none; }

.page--sales-valuation .svx-question summary:focus-visible {
  outline: 3px solid var(--svx-focus);
  outline-offset: 2px;
}

.page--sales-valuation .svx-question__n {
  color: var(--svx-clay-deep);
  font-size: 0.875rem;
  font-weight: 800;
}

.page--sales-valuation .svx-question__label {
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.05rem, 1.6vw, 1.32rem);
  line-height: 1.25;
}

.page--sales-valuation .svx-question__sign {
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
  justify-self: end;
}

.page--sales-valuation .svx-question__sign::before,
.page--sales-valuation .svx-question__sign::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  width: 100%;
  height: 1.5px;
  background: var(--svx-clay-deep);
  transition: transform 180ms ease;
}

.page--sales-valuation .svx-question__sign::after { transform: rotate(90deg); }
.page--sales-valuation .svx-question[open] .svx-question__sign::after { transform: rotate(0deg); }

@media (prefers-reduced-motion: reduce) {
  .page--sales-valuation .svx-question__sign::before,
  .page--sales-valuation .svx-question__sign::after { transition: none; }
}

.page--sales-valuation .svx-question__answer {
  max-width: 68ch;
  margin: 0;
  padding: 0 2rem 1.4rem 4.5rem;
  color: var(--svx-ink-soft);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Proof: the blush field stays (approved). Star lockup, review-count
   link, monogram chips; the happy-clients slot pins to the column foot.
   ----------------------------------------------------------------------- */

.page--sales-valuation .svx-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  margin: 0 0 clamp(4rem, 7vw, 7rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid rgba(94, 60, 54, 0.2);
  border-radius: 14px 14px 54px 14px;
  background: var(--svx-blush);
  color: #3c2a26;
}

.page--sales-valuation .svx-proof h2 { color: #3c2a26; }

.page--sales-valuation .svx-proof h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin-top: 1rem;
  border-radius: 2px;
  background: var(--svx-focus);
}

.page--sales-valuation .svx-proof__lockup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin: 1.1rem 0 0;
}

.page--sales-valuation .svx-proof .sales-review__stars {
  width: 7.25rem;
  height: 1.45rem;
  fill: var(--svx-clay-deep);
}

.page--sales-valuation .svx-proof__count {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(125, 53, 32, 0.4);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.85);
  color: var(--svx-clay-deep);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .page--sales-valuation .svx-proof__count:hover { background: var(--svx-cream); border-color: var(--svx-clay-deep); }
}

.page--sales-valuation .svx-proof__count:focus-visible {
  outline: 3px solid var(--svx-focus);
  outline-offset: 3px;
}

.page--sales-valuation .svx-proof__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.page--sales-valuation .svx-proof__slot { margin-top: auto; aspect-ratio: 4 / 3; align-self: stretch; }

.page--sales-valuation .svx-review__monogram {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--svx-clay-deep);
  color: #f7ede5;
  font-family: "Gloock", Georgia, serif;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.page--sales-valuation .svx-proof__copy > p:not(.svx-proof__lockup) {
  max-width: 40ch;
  margin: 1rem 0 0;
  color: #59453f;
  font-size: 1rem;
  line-height: 1.65;
}

.page--sales-valuation .svx-proof__copy a.svx-proof__all {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 0.4rem;
  margin-bottom: 1.5rem;
  color: var(--svx-clay-deep);
  font-size: 0.9rem;
  font-weight: 800;
  text-underline-offset: 0.22em;
}

.page--sales-valuation .svx-proof__quotes { display: grid; gap: 1.8rem; align-self: center; }

.page--sales-valuation .svx-review { margin: 0; }

.page--sales-valuation .svx-review blockquote { margin: 0; }

.page--sales-valuation .svx-review blockquote p {
  margin: 0;
  color: #3c2a26;
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  line-height: 1.34;
}

.page--sales-valuation .svx-review--feature blockquote p {
  font-size: clamp(1.5rem, 2.5vw, 2.3rem);
  line-height: 1.3;
}

.page--sales-valuation .svx-review .sales-review__stars {
  width: 6.25rem;
  height: 1.25rem;
  margin-bottom: 0.6rem;
  fill: var(--svx-clay-deep);
}

.page--sales-valuation .svx-review figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  align-items: center;
  margin-top: 1rem;
  color: #6b544d;
  font-size: 0.875rem;
}

.page--sales-valuation .svx-review figcaption strong { display: block; color: var(--svx-ink); }
.page--sales-valuation .svx-review figcaption small { font-size: 0.875rem; }

.page--sales-valuation .svx-review figcaption a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--svx-clay-deep);
  font-weight: 800;
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Contact close: deep-forest bookend, cream action, route chips.
   ----------------------------------------------------------------------- */

.page--sales-valuation .svx-contact {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
  gap: clamp(2rem, 7vw, 7rem);
  margin: 0 0 clamp(4rem, 7vw, 7rem);
  padding: clamp(2.2rem, 5vw, 5rem);
  border-radius: 14px 14px 54px 14px;
  background:
    radial-gradient(120% 140% at 90% 100%, rgba(21, 84, 67, 0.5) 0%, transparent 55%),
    var(--svx-forest-deep);
  color: #e9efe7;
}

.page--sales-valuation .svx-contact h2 { color: #f2f4ec; }

.page--sales-valuation .svx-contact__copy p {
  max-width: 54ch;
  margin: 1rem 0 1.5rem;
  color: #c3d0c6;
  font-size: 1.02rem;
  line-height: 1.68;
}

.page--sales-valuation .svx-contact__routes {
  display: grid;
  gap: 0.8rem;
  align-self: center;
}

.page--sales-valuation .svx-contact__routes a {
  display: grid;
  min-height: 64px;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.7rem 1.2rem;
  border-radius: 12px;
  background: rgba(242, 239, 230, 0.08);
  color: #edf2ea;
  text-decoration: none;
  transition: background 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .page--sales-valuation .svx-contact__routes a:hover { background: rgba(242, 239, 230, 0.16); }
}
.page--sales-valuation .svx-contact__routes span { font-size: 0.875rem; color: #b9c8bc; }
.page--sales-valuation .svx-contact__routes strong { font-size: 0.92rem; text-align: right; }

.page--sales-valuation .svx-contact__routes a:focus-visible {
  outline: 3px solid var(--svx-focus);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Tools band on stone, kept before the forest close so the page ends on
   the booking panel. Three cream cards; thumbs ramp parchment → cream →
   clay-tint, each a named crown placeholder.
   ----------------------------------------------------------------------- */

.page--sales-valuation .svx-close {
  margin: 0 0 clamp(4rem, 7vw, 7rem);
  padding: clamp(1.8rem, 3.5vw, 3rem);
  border: 1px solid rgba(38, 32, 25, 0.12);
  border-radius: 16px 16px 44px 16px;
  background: var(--svx-stone);
}

.page--sales-valuation .svx-close > .svx-kicker { margin: 0 0 1.4rem; }

.page--sales-valuation .svx-next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin: 0;
}

.page--sales-valuation .svx-next a {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: clamp(1.2rem, 2vw, 1.6rem);
  border: var(--svx-plate-line);
  border-radius: 14px 14px 28px 14px;
  background: var(--svx-cream);
  box-shadow: var(--svx-plate-shadow);
  color: var(--svx-ink);
  text-decoration: none;
  transition: box-shadow 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .page--sales-valuation .svx-next a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -12px rgba(43, 33, 26, 0.45);
  }
}

.page--sales-valuation .svx-next a:hover em span { transform: translateX(4px); }

.page--sales-valuation .svx-next em span {
  display: inline-block;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .page--sales-valuation .svx-next em span,
  .page--sales-valuation .svx-next a:hover em span { transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page--sales-valuation .svx-next a,
  .page--sales-valuation .svx-next a:hover { transform: none; transition: box-shadow 180ms ease; }
}

.page--sales-valuation .svx-next a:focus-visible {
  outline: 3px solid var(--svx-focus);
  outline-offset: 3px;
}

.page--sales-valuation .svx-next__thumb {
  height: 7.5rem;
  margin-bottom: 0.5rem;
}

.page--sales-valuation .svx-next a:nth-child(1) .svx-next__thumb {
  background: linear-gradient(150deg, rgba(138, 100, 35, 0.16), rgba(138, 100, 35, 0)), var(--svx-parchment);
}

.page--sales-valuation .svx-next a:nth-child(2) .svx-next__thumb {
  background: linear-gradient(150deg, rgba(160, 74, 48, 0.12), rgba(160, 74, 48, 0)), var(--svx-cream);
}

.page--sales-valuation .svx-next strong {
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.1rem, 1.55vw, 1.4rem);
  font-weight: 400;
}

.page--sales-valuation .svx-next span:not(.svx-next__thumb) {
  max-width: 34ch;
  color: var(--svx-ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

.page--sales-valuation .svx-next em {
  color: var(--svx-clay-deep);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 800;
}

.page--sales-valuation .svx-notes {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
  margin: clamp(1rem, 2vw, 1.75rem) 0 0;
  padding: 1.1rem 1.3rem;
  border: var(--svx-plate-line);
  border-left: 3px solid var(--svx-brass);
  border-radius: 10px;
  background: var(--svx-cream);
}

/* The crown stamp on the honesty note — the one brand mark allowed to
   repeat outside the shared shell. */
.page--sales-valuation .svx-notes__stamp img {
  display: block;
  width: 44px;
  height: auto;
  opacity: 0.75;
}

.page--sales-valuation .svx-notes p {
  max-width: 100ch;
  margin: 0;
  color: var(--svx-ink-soft);
  font-size: 0.875rem;
  line-height: 1.62;
}

/* Footer belongs to the same ground/forest world on this route. */
.page--sales-valuation .site-foot { border-top: 1px solid rgba(24, 32, 28, 0.14); background: #e9e3d7; }
.page--sales-valuation .legalstrip { background: var(--svx-forest-deep); }

/* --------------------------------------------------------------------------
   Tablet.
   ----------------------------------------------------------------------- */

@media (max-width: 68em) {
  .page--sales-valuation .svx-hero { grid-template-columns: 1fr; min-height: 0; }
  .page--sales-valuation .svx-hero__stage { min-height: 20rem; }
  .page--sales-valuation .svx-mark__band { grid-template-columns: 1fr; gap: 1rem; }
  .page--sales-valuation .svx-mark__item { grid-template-rows: none; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
  .page--sales-valuation .svx-mark__slot { border-bottom: 0; border-right: var(--svx-plate-line); }
  .page--sales-valuation .svx-mark__copy { padding: 1rem 1.15rem 1.2rem; }
  .page--sales-valuation .svx-evidence__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page--sales-valuation .svx-visit__body { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .page--sales-valuation .svx-visit__head { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
  .page--sales-valuation .svx-proof { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Mobile.
   ----------------------------------------------------------------------- */

@media (max-width: 47.9em) {
  .page--sales-valuation .svx-hero {
    width: calc(100vw - 1.25rem);
    padding: 1.6rem 1.2rem 2.4rem;
    border-radius: 14px 14px 44px 14px;
    margin-bottom: 4rem;
  }

  .page--sales-valuation .svx-hero h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .page--sales-valuation .svx-hero__actions { align-items: stretch; flex-direction: column; }
  .page--sales-valuation .svx-hero__actions .svx-button { width: 100%; }
  .page--sales-valuation .svx-hero__stage { min-height: 15rem; }

  .page--sales-valuation .svx-mark { width: calc(100vw - 2.5rem); margin-bottom: 4rem; padding: 1.4rem 1.1rem 1.6rem; border-radius: 12px 12px 36px 12px; }
  .page--sales-valuation .svx-mark__band { gap: 0.9rem; }
  .page--sales-valuation .svx-mark__item { grid-template-rows: none; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); }
  .page--sales-valuation .svx-mark__slot { border-bottom: 0; border-right: var(--svx-plate-line); }
  .page--sales-valuation .svx-mark__copy { padding: 1rem 1.1rem 1.2rem; }

  .page--sales-valuation .svx-human { grid-template-columns: 1fr; width: calc(100vw - 2.5rem); margin-bottom: 4rem; padding: 1.4rem 1.1rem 1.6rem; border-radius: 12px 12px 36px 12px; }
  .page--sales-valuation .svx-human__media { min-height: 15rem; }

  .page--sales-valuation .svx-shell { width: calc(100vw - 2.5rem); }

  .page--sales-valuation .svx-head { grid-template-columns: 1fr; gap: 0.9rem; align-items: start; }

  .page--sales-valuation .svx-priority { padding: 1.4rem 1.1rem 1.6rem; border-radius: 12px 12px 36px 12px; }
  .page--sales-valuation .svx-priority__choice { width: 100%; }
  .page--sales-valuation .svx-priority__results { min-height: 0; }

  .page--sales-valuation .svx-takeaways { padding: 1.4rem 1.1rem 1.6rem; border-radius: 12px 12px 36px 12px; }
  .page--sales-valuation .svx-story { display: block; }
  .page--sales-valuation .svx-story__media { min-height: 13rem; }
  .page--sales-valuation .svx-story__card { position: relative; margin: -2.2rem 0.8rem 0; padding: 1.2rem 1.1rem 1.5rem; }

  .page--sales-valuation .svx-evidence { padding: 1.6rem 1.2rem 1.8rem; border-radius: 12px 12px 36px 12px; }
  .page--sales-valuation .svx-evidence__grid { grid-template-columns: 1fr; }
  .page--sales-valuation .svx-evidence__grid > div:nth-child(1),
  .page--sales-valuation .svx-evidence__grid > div:nth-child(6) { grid-column: auto; }
  .page--sales-valuation .svx-evidence__note { grid-template-columns: 1fr; gap: 0.8rem; }

  .page--sales-valuation .svx-visit { padding: 1.6rem 1.2rem 1.8rem; border-radius: 12px 12px 36px 12px; }
  .page--sales-valuation .svx-visit__body { grid-template-columns: 1fr; }
  .page--sales-valuation .svx-visit__slot { align-self: stretch; }
  .page--sales-valuation .svx-visit .svx-button { width: 100%; }

  .page--sales-valuation .svx-questions { padding: 1.4rem 1.1rem 1.6rem; border-radius: 12px 12px 36px 12px; }
  .page--sales-valuation .svx-questions__list { grid-template-columns: 1fr; }
  .page--sales-valuation .svx-question summary { grid-template-columns: 2rem 1fr 1.6rem; min-height: 60px; padding: 0.6rem 1rem; }
  .page--sales-valuation .svx-question__answer { padding: 0 1rem 1.2rem 3rem; }

  .page--sales-valuation .svx-proof { padding: 1.6rem 1.2rem 1.8rem; border-radius: 12px 12px 36px 12px; }

  .page--sales-valuation .svx-contact { grid-template-columns: 1fr; padding: 1.6rem 1.2rem; border-radius: 12px 12px 36px 12px; }
  .page--sales-valuation .svx-contact .svx-button { width: 100%; }

  .page--sales-valuation .svx-next { grid-template-columns: 1fr; }
  .page--sales-valuation .svx-close { padding: 1.1rem 1rem 1.3rem; border-radius: 12px 12px 32px 12px; }
  .page--sales-valuation .svx-priority__results { grid-template-columns: 1fr; }
  .page--sales-valuation .svx-priority__slot { min-height: 10rem; }
  .page--sales-valuation .svx-proof__slot { aspect-ratio: 16 / 10; }
  .page--sales-valuation .svx-nav { margin-left: 0.75rem; }
}

/* ==========================================================================
   Segment-group control (21st.dev conversion, vanilla): one clay-tint
   track, equal segments, and a cream indicator pill that slides behind
   the active choice (JS-measured; without JavaScript .is-active paints
   the same pill in place, so nothing depends on the script).
   ========================================================================== */

.page--sales-valuation .svx-priority__choices {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  width: min(100%, 56rem);
  margin-top: 1rem;
  padding: 4px;
  border-radius: 12px;
  background: var(--svx-clay-tint);
}

.page--sales-valuation .svx-priority__indicator {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  border-radius: 9px;
  background: var(--svx-cream);
  box-shadow: 0 1px 3px rgba(43, 33, 26, 0.2);
  transition: transform 200ms ease, width 200ms ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .page--sales-valuation .svx-priority__indicator { transition: none; }
}

.page--sales-valuation .svx-priority__choice {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  justify-content: center;
  min-height: 48px;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--svx-ink-soft);
  transition: color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .page--sales-valuation .svx-priority__choice:hover {
    border-color: transparent;
    background: transparent;
    color: var(--svx-ink);
  }
}

.page--sales-valuation .svx-priority__choice.is-active {
  border-color: transparent;
  background: var(--svx-cream);
  box-shadow: 0 1px 3px rgba(43, 33, 26, 0.2);
  color: var(--svx-ink);
}

/* once the JS indicator exists it paints the pill; the item goes quiet so
   the pill is never doubled */
.page--sales-valuation [data-svx-has-indicator] .svx-priority__choice.is-active {
  background: transparent;
  box-shadow: none;
}

.page--sales-valuation .svx-priority__choice.is-active .svx-priority__n { color: var(--svx-clay); }

.page--sales-valuation .svx-priority__choice:focus-visible {
  outline: 3px solid var(--svx-focus);
  outline-offset: -3px;
}

@media (max-width: 760px) {
  .page--sales-valuation .svx-priority__choices { flex-direction: column; gap: 4px; }
  .page--sales-valuation .svx-priority__indicator { display: none; }
  .page--sales-valuation [data-svx-has-indicator] .svx-priority__choice.is-active {
    background: var(--svx-cream);
    box-shadow: 0 1px 3px rgba(43, 33, 26, 0.2);
  }
  .page--sales-valuation .svx-priority__choice { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Round-5 target sizes: standalone text actions meet 48px without
   changing the reading flow (prose links inside sentences are exempt).
   ----------------------------------------------------------------------- */

.page--sales-valuation .svx-priority__result a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

/* --------------------------------------------------------------------------
   Filled slots. Where Aarav's art has landed, the clay tint, the crown
   watermark and the production chips all drop away and the plate carries the
   photograph edge to edge. Unfilled slots keep the placeholder treatment
   above, so the two states can sit side by side while art is still coming in.
   -------------------------------------------------------------------------- */
.page--sales-valuation .svx-slot--filled {
  background: var(--svx-clay-tint);
}

.page--sales-valuation .svx-slot--filled::before { content: none; }

.page--sales-valuation .svx-slot--filled > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The starting-point plate carries one frame per question and swaps with the
   chooser. Without JS the first frame stays put, matching the first result. */
/* Width-driven, and align-self:start is load-bearing. The results grid sets
   align-items:stretch, so a stretched plate takes the copy column's height
   and aspect-ratio then derives its WIDTH from that height (238 -> 317px),
   bursting the 200px track at tablet widths. Sizing from the width instead
   keeps the plate inside its column at every size. min-width:0 stops the
   frames' intrinsic 1200px from setting a grid minimum. */
.page--sales-valuation .svx-priority__slot.svx-slot--filled {
  display: grid;
  align-self: start;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  min-width: 0;
  min-height: 0;
}

/* Every frame sits in the same grid cell, so the plate holds one height
   whichever question is chosen and the answer beside it never jumps. Only
   opacity moves, so the change reads as a dissolve rather than a flicker,
   and the frames that are not showing leave the accessibility tree instead
   of merely turning transparent. */
.page--sales-valuation .svx-priority__slot > img {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 320ms;
}

.page--sales-valuation .svx-priority__slot > img[data-active] {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .page--sales-valuation .svx-priority__slot > img,
  .page--sales-valuation .svx-priority__slot > img[data-active] { transition: none; }
}

.page--sales-valuation .svx-next__thumb.svx-slot--filled { display: block; }

/* ==========================================================================
   THE FLOATING SECTION PILL — 20 August 2026. Ported verbatim from the
   homepage (home-hero-2026.css REVISION 10.5 + home-section-nav.mjs):
   centred dark-glass pill, fixed below the header seam, sliding cursor
   that tracks the live section. Replaces the old .svx-nav left drawer,
   whose markup no longer ships; its rules above are dead and harmless.
   --sales-nav-seam is measured by sales-valuation-page.mjs.
   ======================================================================== */

.page--sales-valuation .hxnav {
  position: fixed;
  top: calc(var(--sales-nav-seam, 65px) + 10px);
  left: 50%;
  z-index: 900;
  transform: translate(-50%, -14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), top 240ms ease;
}
.page--sales-valuation .hxnav.is-in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.page--sales-valuation .hxnav.is-docked { top: 10px; }

.page--sales-valuation .hxnav__list {
  position: relative;
  display: flex;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: 999px;
  background: rgba(14, 26, 21, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 18px 44px -20px rgba(8, 16, 12, 0.7);
}
.page--sales-valuation .hxnav [data-hxnav-link] {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  color: rgba(244, 238, 227, 0.88);
  font-size: 0.875rem;
  font-weight: 750;
  text-decoration: none;
  transition: color 200ms ease;
}
.page--sales-valuation .hxnav [data-hxnav-link] i {
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 800;
  color: rgba(227, 201, 143, 0.85);
  transition: color 200ms ease;
}
.page--sales-valuation .hxnav [data-hxnav-link].is-on { color: #171a20; }
.page--sales-valuation .hxnav [data-hxnav-link].is-on i { color: #7b2430; }
.page--sales-valuation .hxnav [data-hxnav-link]:focus-visible { outline: 3px solid var(--svx-focus, #c59743); outline-offset: 2px; }

.page--sales-valuation .hxnav__cursor {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  width: 0;
  border-radius: 999px;
  background: #fbf8f2;
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
  pointer-events: none;
}

/* phones: numbers only, so the pill stays genuinely small */
@media (max-width: 47.99em) {
  .page--sales-valuation .hxnav [data-hxnav-link] { padding: 0.5rem 0.7rem; min-height: 40px; }
  .page--sales-valuation .hxnav [data-hxnav-link] span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page--sales-valuation .hxnav,
  .page--sales-valuation .hxnav__cursor,
  .page--sales-valuation .hxnav [data-hxnav-link] { transition: none !important; }
}