/* Renovations — one story, the Vertical House (round 6, 2026-10-08).
   An editorial page set in Plus Jakarta Sans (round 12): one room of
   the house taken through time (hero), its plan read stage by stage
   beside the text (retain / remove / add), the client's own site
   photographs (on site), the fourteen parts of the scope as an index, and
   the facade wiped from the site photograph to the render (closing).
   Captions are quiet sans lines, never labels; the only serif is the
   keyword <em> in a heading (global.css). Motion is transform and
   opacity only, and every piece has a still, complete reduced-motion
   state. */

.service-main--renovations {
  --display: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
  --sans: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
  --ink: var(--svc-walnut);
  --ink-soft: color-mix(in srgb, var(--svc-walnut) 78%, transparent);   /* ~9:1 on paper */
  --ink-faint: color-mix(in srgb, var(--svc-walnut) 62%, transparent);  /* ~5.6:1 on paper */
  --copper-deep: #96532a; /* 5.4:1 on paper; plain copper is 4.47:1 */
  --reno-ease: cubic-bezier(.65, 0, .35, 1);
  font-family: var(--sans);
}
.service-main--renovations :is(h1, h2, h3) {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
}
.service-main--renovations :is(h1, h2, h3) em { font-style: italic; }
.service-main--renovations button { font-family: inherit; }
:is(.reno-hero, .reno-rra, .reno-scope) strong { font-weight: 600; color: var(--ink); }

#renovation-evaluation, #renovation-scope, .reno-stage {
  scroll-margin-top: calc(var(--hdr-safe) + 1.5rem);
}

/* ================================================================== *
   1 — HERO: one room, four visits
   ================================================================== */
.svc-hero.reno-hero {
  --handoff: 0;
  --p: 0;
  padding: calc(var(--hdr-safe) + clamp(2.75rem, 8vw, 3.25rem)) 0 clamp(3rem, 8vw, 4.5rem);
  background: var(--svc-paper);
  border-bottom: 0;
}
.reno-hero__grid { gap: 1.75rem; align-items: start; }
/* Phones: heading, then the room, then the two paragraphs. */
.reno-hero__copy { display: contents; }
.reno-hero__title { order: 1; }
.reno-lens { order: 2; }
.reno-hero__intro { order: 3; }

.service-experience .svc-hero__title.reno-hero__title {
  max-width: 11ch;
  font-family: var(--display);
  font-size: calc(clamp(3.15rem, 13.5vw, 4rem) * var(--k-display));
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.03em;
}
.reno-hero__title em { color: var(--copper-deep); }
.svc-hero__intro.reno-hero__intro { padding-top: 1.15rem; border-top: 1px solid var(--svc-line); }
.reno-hero__intro p { max-width: 36rem; margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.68; }
.reno-hero__intro p + p { margin-top: .9rem; }

/* The figure drops the shared hero's mount: the photograph is the frame. */
.svc-hero__media.reno-lens {
  position: relative;
  display: grid;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.reno-lens__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--svc-sand);
  isolation: isolate;
}
.reno-lens__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: opacity, transform;
}
.reno-lens__img:not([data-frame="0"]) { opacity: 0; }
.reno-lens__img[data-stack-key="works"] { object-position: 50% 30%; }
/* A soft shade under the caption only. */
.reno-lens__stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  height: 34%;
  background: linear-gradient(to top, rgba(31, 21, 18, .62), rgba(31, 21, 18, 0));
  pointer-events: none;
}
.reno-lens__caption {
  position: absolute;
  z-index: 3;
  left: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(.9rem, 1.8vw, 1.35rem);
  display: grid;
  gap: .2rem;
  margin: 0;
  color: var(--svc-paper);
  pointer-events: none;
}
.reno-lens__caption em { font-family: var(--display); font-style: normal; font-size: calc(clamp(1.55rem, 2.1vw, 2rem) * var(--k-display)); line-height: 1; }
.reno-lens__caption span { font-size: .88rem; line-height: 1.4; color: rgba(251, 247, 239, .88); }

/* The timeline: Existing at one end, Proposed at the other, the works in
   between. The copper rule fills as far as the handle. */
.reno-scrub {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  margin-top: .65rem;
}
.reno-scrub__end {
  position: relative;
  min-height: 44px;
  padding: .35rem 0 .45rem;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: color 300ms var(--ease-out);
}
.reno-scrub__end::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .3rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 420ms var(--ease-out);
}
.reno-scrub__end.is-active { color: var(--ink); }
.reno-scrub__end.is-active::after { transform: scaleX(1); }
.reno-scrub__end:hover { color: var(--ink); }
.reno-scrub__end:focus-visible { outline: 1px solid var(--svc-copper); outline-offset: 4px; }

.reno-scrub__track {
  position: relative;
  height: 44px;
  margin-inline: .5rem;
  cursor: pointer;
  touch-action: pan-y;
}
.reno-scrub__rule { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: color-mix(in srgb, var(--svc-walnut) 26%, transparent); }
.reno-scrub__rule i {
  position: absolute;
  left: 0;
  right: 0;
  top: -.5px;
  height: 2px;
  background: var(--svc-copper);
  transform: scaleX(var(--p));
  transform-origin: 0 50%;
}
.reno-scrub__stop {
  position: absolute;
  top: 50%;
  left: calc(var(--at) / 3 * 100%);
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border: 1px solid var(--svc-copper);
  border-radius: 50%;
  background: var(--svc-paper);
}
.reno-scrub__stop i {
  position: absolute;
  bottom: 13px;
  left: 50%;
  display: none;
  color: var(--ink-faint);
  font-family: var(--display);
  font-style: normal;
  font-size: .98rem;
  white-space: nowrap;
  transform: translateX(-50%);
}
.reno-scrub__stop:nth-of-type(3) i { top: 13px; bottom: auto; }
.reno-scrub__handle {
  position: absolute;
  top: 50%;
  left: calc(var(--p) * 100%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  cursor: grab;
  outline: none;
}
.reno-scrub__handle::before {
  content: "";
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--svc-copper);
  box-shadow: 0 0 0 4px var(--svc-paper), 0 0 0 5px color-mix(in srgb, var(--svc-copper) 45%, transparent);
  transition: transform 240ms var(--ease-out);
}
.reno-scrub__handle:hover::before, .reno-lens.is-dragging .reno-scrub__handle::before { transform: scale(1.18); }
.reno-lens.is-dragging .reno-scrub__handle { cursor: grabbing; }
.reno-lens .reno-scrub__handle:focus,
.reno-lens .reno-scrub__handle:focus-visible { outline: none; }
.reno-scrub__handle:focus-visible::before { box-shadow: 0 0 0 4px var(--svc-paper), 0 0 0 6px var(--svc-walnut); }

/* ================================================================== *
   2 — RETAIN / REMOVE / ADD
   ================================================================== */
.reno-rra {
  position: relative;
  z-index: 1;
  padding: clamp(4.25rem, 9vw, 8rem) 0 clamp(4rem, 8vw, 7rem);
  background: var(--svc-ivory);
  box-shadow: 0 -1px 0 var(--svc-line);
}
.reno-rra__head { display: grid; gap: 1.4rem; margin-bottom: clamp(2.75rem, 6vw, 5rem); }
.reno-rra__head h2 {
  margin: 0;
  font-size: calc(clamp(3.3rem, 13vw, 8.25rem) * var(--k-display));
  line-height: 1.02;
  letter-spacing: -.035em;
}
.reno-rra__lede { display: grid; gap: 1rem; }
.reno-rra__sub { margin: 0; color: var(--ink); font-family: var(--display); font-size: calc(clamp(1.55rem, 2.6vw, 2.35rem) * var(--k-display)); font-style: normal; line-height: 1.1; }
.reno-rra__lede > p:last-child { max-width: 36rem; margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; }

.reno-rra__visual { display: none; }
.reno-rra__plan { position: relative; margin: 0; aspect-ratio: 1473 / 797; background: #f7f0e4; box-shadow: 0 0 0 1px var(--svc-line), 0 2.5rem 4.5rem -3rem rgba(49, 32, 29, .4); }
.reno-rra__drawing { display: block; width: 100%; height: 100%; }
/* The stages not being read settle back under paper. */
.reno-rra__veil {
  position: absolute;
  top: 0;
  height: 88.6%;
  background: rgba(245, 239, 228, .8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 650ms var(--ease-out);
}
.reno-rra__veil--legend { top: 91.6%; height: 5.6%; }
.reno-rra__plan[data-mode="retain"] .reno-rra__veil:not([data-panel="retain"]),
.reno-rra__plan[data-mode="remove"] .reno-rra__veil:not([data-panel="remove"]),
.reno-rra__plan[data-mode="add"] .reno-rra__veil:not([data-panel="add"]) { opacity: 1; }

.reno-rra__stages { position: relative; display: grid; grid-template-columns: 33.55fr 34fr 32.45fr; margin-top: 1.35rem; border-top: 1px solid color-mix(in srgb, var(--svc-walnut) 22%, transparent); }
.reno-rra__stages a {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .85rem .25rem .25rem 0;
  color: var(--ink-faint);
  font-family: var(--display);
  font-size: calc(clamp(1.6rem, 2.1vw, 2.15rem) * var(--k-display));
  line-height: 1;
  text-decoration: none;
  transition: color 400ms var(--ease-out);
}
.reno-rra__stages a span { color: inherit; font-size: .7em; font-style: normal; }
.reno-rra__stages a[aria-current] { color: var(--ink); }
.reno-rra__stages a[aria-current] span { color: var(--copper-deep); }
.reno-rra__stages a:hover { color: var(--ink); }
.reno-rra__marker {
  position: absolute;
  top: -1px;
  left: var(--panel-x, 0%);
  width: var(--panel-w, 33.55%);
  height: 2px;
  background: var(--svc-copper);
  transition: left 650ms var(--reno-ease), width 650ms var(--reno-ease);
}

.reno-rra__list { display: grid; gap: clamp(4rem, 10vw, 5.5rem); margin: 0; padding: 0; list-style: none; }
.reno-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 1rem; align-items: end; }
.reno-stage__crop {
  position: relative;
  grid-column: 1;
  aspect-ratio: 480 / 705;
  overflow: hidden;
  background: #f7f0e4;
  box-shadow: 0 0 0 1px var(--svc-line);
}
.reno-stage__crop img {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% * 100 / 32.6);
  max-width: none;
  height: auto;
  transform: translateX(calc(var(--crop-x, 0) * -1%));
}
.reno-stage__no {
  grid-column: 2;
  margin: 0 0 -.12em;
  color: var(--copper-deep);
  font-family: var(--display);
  font-size: calc(clamp(6rem, 30vw, 8.5rem) * var(--k-display));
  font-style: normal;
  line-height: .78;
  transition: color 500ms var(--ease-out);
}
.reno-stage__text { grid-column: 1 / -1; display: grid; gap: 1.05rem; }
.reno-stage__principle { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin: 0; }
.reno-stage__principle span { color: var(--ink-faint); font-size: .9rem; }
.reno-stage__principle em { color: var(--copper-deep); font-family: var(--display); font-style: normal; font-size: calc(clamp(1.4rem, 1.9vw, 1.65rem) * var(--k-display)); line-height: 1.1; }
.reno-stage h3 { margin: 0; font-size: calc(clamp(2.15rem, 3.4vw, 2.8rem) * var(--k-display)); line-height: 1.06; letter-spacing: -.025em; }
.reno-stage__copy { max-width: 36rem; margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }
.reno-stage__facts { display: grid; gap: .95rem; margin: .35rem 0 0; padding-top: 1.15rem; border-top: 1px solid color-mix(in srgb, var(--svc-walnut) 18%, transparent); }
.reno-stage__facts > div { display: grid; gap: .2rem; }
.reno-stage__facts dt { color: var(--ink); font-family: var(--display); font-size: 1.15rem; font-style: normal; line-height: 1.2; }
.reno-stage__facts dd { max-width: 36rem; margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.62; }
.reno-evaluate-records { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.reno-evaluate-records li { color: var(--ink); }
.reno-evaluate-records li + li { text-transform: lowercase; }
.reno-evaluate-records li:not(:last-child)::after { content: ","; margin-right: .3em; }

/* ================================================================== *
   3 — ON SITE: the client's photographs, in order
   ================================================================== */

/* ================================================================== *
   4 — SCOPE: an index of fourteen
   ================================================================== */
.reno-scope {
  position: relative;
  z-index: 1;
  padding: clamp(4.25rem, 9vw, 8rem) 0 clamp(4.5rem, 9vw, 8rem);
  background: var(--svc-ivory);
}
.reno-scope__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.reno-scope__head h2 { max-width: 13ch; margin: 0; font-size: calc(clamp(2.9rem, 11vw, 6rem) * var(--k-display)); line-height: 1.04; letter-spacing: -.03em; }
.reno-scope__head p { max-width: 36rem; margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; }

.reno-index { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 6.5rem); margin: 0; padding: 0; list-style: none; }
.reno-scope-card {
  position: relative;
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
  padding: .95rem 0 1.05rem;
  color: var(--ink);
  transform-origin: 50% 0;
}
/* the rule above each row, and below the last of each column */
.reno-scope-card::before,
.reno-scope-card:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: color-mix(in srgb, var(--svc-walnut) 20%, transparent);
  transform-origin: 0 50%;
}
.reno-scope-card:last-child::after { top: auto; bottom: 0; }
.reno-scope-no {
  color: var(--copper-deep);
  font-family: var(--display);
  font-size: calc(clamp(2.2rem, 3vw, 3rem) * var(--k-display));
  line-height: .9;
  font-variant-numeric: lining-nums tabular-nums;
  transition: color 300ms var(--ease-out);
}
.reno-scope-title { font-size: clamp(1.02rem, 1.2vw, 1.16rem); font-weight: 500; line-height: 1.35; letter-spacing: -.003em; transition: transform 380ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .reno-scope-card:hover .reno-scope-title { transform: translateX(.4rem); }
}

/* The unfold: each row hinges down from its rule into place, the rule
   drawing across as it lands. Armed by renovations.js only. */
.reno-index.is-armed .reno-scope-card > * {
  display: block;
  opacity: 0;
  transform: perspective(700px) rotateX(-75deg);
  transform-origin: 50% 0;
  transition: transform 900ms cubic-bezier(.2, .8, .25, 1) calc(var(--roll-delay, 0ms) + 120ms), opacity 500ms ease calc(var(--roll-delay, 0ms) + 120ms);
}
.reno-index.is-armed .reno-scope-card::before { transform: scaleX(0); transition: transform 900ms var(--ease-out) var(--roll-delay, 0ms); }
.reno-index.is-armed .reno-scope-card.is-in > * { opacity: 1; transform: none; }
.reno-index.is-armed .reno-scope-card.is-in::before { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .reno-index.is-armed .reno-scope-card.is-in:hover .reno-scope-title { transform: translateX(.4rem); transition-delay: 0ms; transition-duration: 380ms; }
}

/* ================================================================== *
   5 — CLOSING: the facade, rethought
   ================================================================== */
.service-experience .reno-closing .svc-closing__copy h2 {
  max-width: calc(12ch * var(--k-measure));
  color: var(--text-on-dark);
  font-family: var(--display);
  font-size: calc(clamp(2.7rem, 10vw, 5rem) * var(--k-display));
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.reno-closing .svc-closing__copy > p { font-size: 1.02rem; line-height: 1.7; }
.reno-closing .svc-closing__copy strong { color: var(--text-on-dark); font-weight: 500; }

.svc-closing__visual.reno-facade { overflow: visible; border: 0; background: none; }
.reno-facade__frame {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border: 1px solid var(--svc-line-dark);
  background: #2a1b18;
  isolation: isolate;
  cursor: ew-resize;
}
.svc-closing__visual.reno-facade img { aspect-ratio: auto; }
.reno-facade__render { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reno-facade__existing { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 calc(100% - var(--facade, 0%)) 0 0); }
.reno-facade__existing img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reno-facade__line { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--facade, 0%); width: 2px; margin-left: -1px; background: var(--svc-copper); box-shadow: 0 0 16px 1px rgba(169, 96, 40, .5); pointer-events: none; }
.reno-facade.is-playing .reno-facade__existing { transition: clip-path 2.4s var(--reno-ease); }
.reno-facade.is-playing .reno-facade__line,
.reno-facade.is-playing .reno-facade__handle { transition: left 2.4s var(--reno-ease); }
.reno-facade__label {
  position: absolute;
  z-index: 1;
  top: .85rem;
  color: #fbf7ef;
  font-family: var(--display);
  font-size: 1.15rem;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 1px 12px rgba(20, 12, 10, .65), 0 0 2px rgba(20, 12, 10, .5);
  pointer-events: none;
}
.reno-facade__label--render { right: 1rem; }
.reno-facade__label--existing { left: 1rem; }
.reno-facade__handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: clamp(1.5rem, var(--facade, 0%), calc(100% - 1.5rem)); display: grid; place-items: center; width: 3rem; margin-left: -1.5rem; cursor: ew-resize; touch-action: none; outline: none; }
.reno-facade__handle i { position: relative; width: 2.6rem; height: 2.6rem; border: 1px solid var(--svc-copper); border-radius: 50%; background: rgba(49, 32, 29, .82); box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .3); transition: transform 240ms var(--ease-out), background-color 240ms var(--ease-out); }
.reno-facade__handle i::before, .reno-facade__handle i::after { content: ""; position: absolute; top: 50%; width: .42rem; height: .42rem; border-top: 1px solid var(--text-on-dark); border-left: 1px solid var(--text-on-dark); }
.reno-facade__handle i::before { left: .6rem; transform: translateY(-50%) rotate(-45deg); }
.reno-facade__handle i::after { right: .6rem; transform: translateY(-50%) rotate(135deg); }
.reno-facade__handle:hover i, .reno-facade.is-dragging .reno-facade__handle i { transform: scale(1.08); background: var(--svc-copper); }
.reno-facade__handle:focus-visible i { outline: 2px solid var(--clay-on-dark); outline-offset: 3px; }
/* "Rethought, not rebuilt." — the image's caption, in the client's quotes. */
.reno-closing .reno-facade figcaption {
  position: static;
  margin-top: 1.1rem;
  padding: 0;
  background: none;
  color: var(--text-on-dark);
  font-family: var(--display);
  font-size: calc(clamp(1.55rem, 2.3vw, 2.1rem) * var(--k-display));
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
}
.reno-closing .reno-facade figcaption::before { content: "\201C"; }
.reno-closing .reno-facade figcaption::after { content: "\201D"; }

.reno-closing .next-service { grid-template-areas: "copy arrow"; }
.reno-closing .next-service__copy strong { font-family: var(--display); font-size: calc(clamp(2.1rem, 3.6vw, 3.3rem) * var(--k-display)); font-weight: 300; letter-spacing: -.02em; line-height: 1.06; }
.reno-closing .next-service__copy > span { font-size: .95rem; }

/* The closing stays a plain walnut ground: the facade image is the only
   picture in it, so nothing competes with the wipe. */
.service-main--renovations [data-uk-atmosphere="renovation-closing"] { --uk-atm-image: none; }

/* ================================================================== *
   BREAKPOINTS
   ================================================================== */
@media (min-width: 600px) {
  .reno-scrub__stop i { display: block; }
  .reno-scrub { margin-top: 1.6rem; }
}

@media (min-width: 768px) {
  /* Tablet: copy and room side by side. */
  .reno-hero__copy { display: grid; align-content: start; gap: 2rem; }
  .reno-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 2.5rem; }
  .service-experience .svc-hero__title.reno-hero__title { font-size: calc(clamp(3.8rem, 7.4vw, 5rem) * var(--k-display)); }

  .reno-rra__lede { gap: 1.25rem; max-width: 46rem; }
  .reno-stage { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0 2.5rem; align-items: start; }
  .reno-stage__crop { grid-row: 1 / span 2; }
  .reno-stage__no { grid-column: 2; grid-row: 1; margin-bottom: .6rem; font-size: calc(6rem * var(--k-display)); }
  .reno-stage__text { grid-column: 2; grid-row: 2; }
  .reno-stage__facts > div { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; }

  .reno-scope__head { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; align-items: end; }
  .reno-index { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); grid-auto-flow: column; }
  .reno-scope-card:nth-child(7)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: color-mix(in srgb, var(--svc-walnut) 20%, transparent); }
  .reno-scope-card { grid-template-columns: 4.6rem minmax(0, 1fr); padding: 1.1rem 0 1.2rem; }

  .svc-closing__visual.reno-facade { width: min(100%, 32rem); justify-self: end; }
}

@media (min-width: 900px) {
  .reno-closing .svc-closing__grid { align-items: center; }
}

@media (min-width: 1100px) {
  /* Desktop hero: the heading and the paragraphs hold the left, the room
     stands at full height on the right with its timeline beneath. The
     stage is sized from the window height so stage and timeline share the
     first screen even on a 1536 x 730 laptop. */
  .svc-hero.reno-hero {
    min-height: 100svh;
    padding: calc(var(--hdr-safe) + 1.25rem) 0 1.5rem;
  }
  .reno-hero__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(3rem, 5.5vw, 7rem);
    align-items: stretch;
  }
  .reno-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(2rem, 4.5vh, 3rem);
    max-width: none;
    padding: 2.25rem 0 .35rem;
    opacity: calc(1 - var(--handoff) * 1.6);
  }
  .service-experience .svc-hero__title.reno-hero__title {
    max-width: 10.5em;
    font-size: calc(clamp(5rem, 7.2vw, 7.2rem) * var(--k-display));
    line-height: 1.02;
  }
  .reno-hero__intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem; max-width: 52rem; }
  .reno-hero__intro p { font-size: .98rem; }
  .reno-hero__intro p + p { margin-top: 0; }
  .svc-hero__media.reno-lens {
    --stage-h: clamp(24rem, calc(100svh - var(--hdr-safe) - 1.25rem - 1.5rem - 4.6rem), 50rem);
    width: min(calc(var(--stage-h) * .92), 36vw);
    transform: translate3d(0, calc(var(--handoff) * 26vh), 0);
  }
  .reno-lens__stage { height: var(--stage-h); aspect-ratio: auto; }
  .reno-scrub { margin-top: 1.1rem; }

  .reno-rra__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; row-gap: 2rem; }
  .reno-rra__head h2 { grid-column: 1 / -1; font-size: calc(clamp(6rem, 8.6vw, 9.5rem) * var(--k-display)); }
  /* Owner, round 7: one reading column under the heading instead of a
     subtitle and a paragraph split across the width. */
  .reno-rra__lede { grid-column: 1 / span 7; gap: 1.25rem; padding-top: 1.75rem; border-top: 1px solid var(--svc-line); }
  .reno-rra__lede > p:last-child { max-width: 40rem; font-size: 1.1rem; line-height: 1.68; }

  /* The plan holds still while the three stages are read beside it. */
  .reno-rra__body { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: clamp(3rem, 5.5vw, 6.5rem); align-items: start; }
  .reno-rra__visual { position: sticky; top: calc(var(--hdr-safe) + 2rem); display: block; }
  .reno-rra__list { gap: 0; }
  .reno-stage { display: block; min-height: min(78vh, 46rem); padding-bottom: 4rem; }
  .reno-stage:last-child { min-height: 0; padding-bottom: 0; }
  .reno-stage__crop { display: none; }
  .reno-stage__no { margin: 0 0 1.1rem; font-size: calc(5.5rem * var(--k-display)); color: color-mix(in srgb, var(--svc-walnut) 30%, transparent); }
  .reno-stage.is-current .reno-stage__no { color: var(--copper-deep); }
  .reno-stage__facts > div { grid-template-columns: 9rem minmax(0, 1fr); }


  .reno-scope__head { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 6rem; }

  .reno-closing .svc-closing__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); gap: clamp(3rem, 7vw, 8rem); }
  .svc-closing__visual.reno-facade { width: min(100%, 32rem, calc((100svh - 12rem) * .833)); }
}

@media (max-width: 767px) {
  .reno-stage__crop { width: 100%; max-width: 15rem; }
}

/* ================================================================== *
   REDUCED MOTION — every state change is instant and complete.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .service-main--renovations *,
  .service-main--renovations *::before,
  .service-main--renovations *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation: none !important; }
  .svc-hero__media.reno-lens { transform: none !important; }
  .reno-hero__copy { opacity: 1 !important; }
  .reno-lens__img { transform: none !important; }
}