/* Cabinet Tune-Up, elevation pass. Loaded only by Version 1.
   Everything is scoped under .elevated so Versions 2 and 3 stay untouched as
   controls. The diagnosis this answers: the page was all one volume. Same
   contrast, same scale, same density, same rhythm, top to bottom. */

.elevated{
  /* A real warm mid-tone. The old pair of surfaces sat 3% apart, which the eye
     reads as one continuous field rather than as two. */
  --clay:#E8E0D0;
  --clay-line:#D8CDB8;
}

/* ---------- 1 · tonal range ----------
   The scroll now runs light, clay, light, surface, light, PHOTO, clay, light,
   navy, light. Two of those are events. Before, none were. */
.elevated .band-clay{background:var(--clay)}
/* Cards keep a light ground so they read as objects on the clay. The estimator
   is deliberately excluded: the whole point of move 3 is that the price sits
   directly on the surface with nothing boxing it in. */
.elevated .band-clay .rev{background:var(--bg);border-color:transparent}
.elevated .band-clay .specs div{background:var(--bg)}

/* ---------- 2 · one full-bleed photograph ----------
   The container gets broken exactly once. No card, no radius, no max-width. */
.elevated .bleed{padding:0}
.elevated .bleed figure{position:relative;margin:0}
.elevated .bleed img{
  width:100%;height:clamp(340px,54vh,640px);object-fit:cover;display:block;
}
.elevated .bleed figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(48px,8vw,90px) var(--pad) clamp(22px,3vw,34px);
  color:#fff;font-size:clamp(16px,1.4vw,18px);line-height:1.6;
  background:linear-gradient(to top,rgba(12,14,10,.92),rgba(12,14,10,.7) 40%,
    rgba(12,14,10,.28) 72%,rgba(12,14,10,0));
}
.elevated .bleed figcaption b{font-weight:600}
.elevated .bleed figcaption span{display:block;max-width:52ch;text-shadow:0 1px 10px rgba(10,12,8,.5)}

/* ---------- 3 · the price as an event ----------
   $250 is the whole strategy and it was sitting at the same weight as a
   section heading, inside a white card on a near-white ground. The card is
   now air and the number carries the section. */
.elevated .est__card{
  background:transparent;box-shadow:none;padding:0;max-width:none;
  gap:clamp(28px,5vw,72px);margin-top:clamp(30px,4vw,48px);
}
.elevated .est__out{text-align:left}
.elevated .est__lbl{
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.elevated .est__total{
  font-size:clamp(62px,11vw,142px);line-height:.94;letter-spacing:-.055em;
  color:var(--brand);
}
.elevated .est__card .stp button{
  width:74px;height:74px;font-size:34px;background:var(--bg);
  box-shadow:inset 0 0 0 1.5px var(--clay-line);
}
.elevated .est__card .stp button:hover:not(:disabled){background:#fff;box-shadow:inset 0 0 0 1.5px var(--brand)}
.elevated .est__card .stp .n{font-size:40px}
@media(max-width:760px){
  .elevated .est__card{flex-direction:column;align-items:flex-start}
  .elevated .est__out{width:100%}
}

/* ---------- 4 · the quiet-premium voice ----------
   This was a serif, which read cheap next to the rest of the page. The
   emphasis now comes from scale and weight in the same family instead. A sans
   at a given size reads larger than a serif at that size, so the review quotes
   step down from 25px to 22px to keep the same optical weight. */
.elevated .guar h2{
  font-weight:600;letter-spacing:-.035em;
  font-size:clamp(32px,4.2vw,54px);line-height:1.12;
}
.elevated .rev p{
  font-weight:400;
  font-size:clamp(19px,1.6vw,22px);line-height:1.58;letter-spacing:-.015em;
  color:var(--ink);
}
.elevated .rev cite{font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.elevated .bleed figcaption b{font-weight:700;
  font-size:clamp(21px,2vw,27px);display:block;margin-bottom:7px;letter-spacing:-.025em;
  text-shadow:0 1px 12px rgba(10,12,8,.55)}

/* ---------- 5 · break the centred symmetry ----------
   Every section was centred, which is the single most templated thing a page
   can do. Two of them now sit left with a wide right margin. */
.elevated .lead-left .center{text-align:left;margin-inline:0 auto;max-width:none}
.elevated .lead-left .center h2{max-width:16ch}
.elevated .lead-left .center .lede{margin-inline:0;max-width:46ch}
.elevated .lead-left .oneline{text-align:left}

/* ---------- rhythm ----------
   Density was identical everywhere. The quiet sections now breathe more and
   the working sections tighten up. */
.elevated .band-clay{padding-block:clamp(64px,8.5vw,124px)}
.elevated .guar{padding-block:clamp(72px,9.5vw,140px)}
.elevated .specs{margin-top:clamp(30px,4vw,46px)}

/* --faint was picked against the near-white page background. On the clay band
   it drops to 2.5:1, which fails AA outright and is exactly the wrong thing to
   get wrong for a 45-75 audience. Redefining the token inside the band fixes
   every element that uses it in one place rather than patching them one by one. */
.elevated .band-clay{--faint:#5C6158}