/* ==========================================================================
   MR. RESTORATION INC. — RESTORATION GALLERY
   ------------------------------------------------------------------------
   The gallery runs DARK while the rest of the site runs light. That is
   deliberate: the marketing pages are the reassuring voice, this page is the
   operational one — evidence, sequence and measurement. Dark ground also
   stops six sets of damage photography from fighting a white page.

   Signature device: the SEAM. The lit vertical boundary between damaged and
   restored. It appears as the before/after handle, as the active marker on
   the step list, and as the divider between cases. Nothing else on the page
   glows, so the seam always reads as the subject.

   Namespacing: site.css already owns `.steps`, `.svc`, `.drop` and `.pc`.
   Everything here is prefixed `g` or scoped under `.case` to avoid the kind
   of collision that previously made the nav 325px tall.
   ========================================================================== */

.galpage {
  background: var(--navy-950);
  color: rgba(255, 255, 255, .8);
}
.galpage ::selection { background: var(--fire-400); color: var(--navy-950); }

/* Per-case accent. Each case sets --acc / --acc-soft on itself, and every
   accented part below reads from those two variables only. */
.water { --acc: var(--water-400); --acc-soft: rgba(91, 167, 217, .16); --acc-line: rgba(91, 167, 217, .34); }
.fire  { --acc: var(--fire-400);  --acc-soft: rgba(246, 168, 60, .16);  --acc-line: rgba(246, 168, 60, .34); }

/* ---------- Page hero ---------------------------------------------------- */
.ghero {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
/* Two elemental fields bleeding in from opposite edges — water left, fire
   right — meeting in the middle. The brand's own duality, used as ground. */
.ghero::before,
.ghero::after {
  content: ''; position: absolute; top: -30%; width: 60%; height: 160%;
  pointer-events: none; opacity: .5;
}
.ghero::before {
  left: -18%;
  background: radial-gradient(closest-side, rgba(30, 99, 176, .55), transparent 72%);
}
.ghero::after {
  right: -18%;
  background: radial-gradient(closest-side, rgba(233, 63, 58, .42), transparent 72%);
}
.ghero > * { position: relative; z-index: 1; }

.ghero h1 {
  font-size: clamp(2.5rem, 6.4vw, 4.9rem);
  color: #fff; margin: 1.1rem 0 1.3rem; max-width: 17ch;
}
.ghero .lede {
  color: rgba(255, 255, 255, .68);
  font-size: clamp(1.02rem, 1.5vw, 1.16rem); max-width: 60ch;
}
.ghero .eyebrow { color: var(--fire-300); }
.ghero .eyebrow::before { background: var(--fire-300); }

/* Honest labelling of what the imagery is. Stated plainly, not buried. */
.gnote {
  margin-top: 2rem; padding: .9rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 3px solid var(--fire-400);
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, .04);
  font-size: .86rem; color: rgba(255, 255, 255, .62); max-width: 68ch;
}

/* ---------- Filter + index ----------------------------------------------- */
.gbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(4, 8, 26, .88);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  padding: .8rem 0;
}
.gbar-in { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gbar-lb {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .42); margin-right: .3rem;
}
.gfilt {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .95rem; border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .74);
  font-size: .84rem; font-weight: 600;
  transition: background .22s, border-color .22s, color .22s;
}
.gfilt:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.gfilt[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--navy-950); }
.gfilt .n {
  font-family: var(--font-mono); font-size: .72rem; opacity: .6;
  font-variant-numeric: tabular-nums;
}
.gfilt i {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: currentColor;
}
.gfilt.w i { background: var(--water-400); }
.gfilt.f i { background: var(--fire-400); }

/* ---------- Case index grid ---------------------------------------------- */
.gindex {
  display: grid; gap: 1rem;
  /* Six cases divide evenly into 3x2. auto-fill left a single orphan on the
     second row at most desktop widths. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: clamp(2rem, 4vw, 3rem) 0;
}
.gcard {
  position: relative; display: block; overflow: hidden;
  border-radius: 16px; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .12);
  background: var(--navy-900);
  transition: transform .4s var(--ease-out), border-color .3s, box-shadow .4s;
}
.gcard:hover { transform: translateY(-4px); border-color: var(--acc-line); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.gcard-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.gcard-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* The card micro-interaction: hovering wipes the restored image across the
   damaged one, left to right. The whole business in one gesture. */
.gcard-media .aft {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .72s var(--ease-out);
}
.gcard:hover .aft, .gcard:focus-visible .aft { clip-path: inset(0 0 0 0); }
.gcard-media::after {
  content: ''; position: absolute; inset: 0;
  /* Weighted well up the frame: the element tag sits above the title and was
     disappearing against bright kitchens and ceilings. */
  background: linear-gradient(to top, rgba(4, 8, 26, .96) 0%, rgba(4, 8, 26, .88) 26%, rgba(4, 8, 26, .3) 58%, transparent 82%);
}
.gcard-cap { position: absolute; inset: auto 0 0 0; padding: 1rem 1.1rem; z-index: 2; }
.gcard-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acc); margin-bottom: .4rem;
}
.gcard-tag::before { content: ''; width: 14px; height: 1.5px; background: var(--acc); }
.gcard h3 { font-size: 1.12rem; color: #fff; line-height: 1.18; }
.gcard-go {
  margin-top: .5rem; font-size: .78rem; font-weight: 600;
  color: rgba(255, 255, 255, .6); display: flex; align-items: center; gap: .35rem;
  transition: gap .25s, color .25s;
}
.gcard:hover .gcard-go { gap: .6rem; color: #fff; }

/* ---------- A case ------------------------------------------------------- */
.case {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
  position: relative;
  scroll-margin-top: 70px;
}
/* The seam, as a section divider: a short lit segment on the top border,
   tinted to the case's element. */
.case::before {
  content: ''; position: absolute; top: -1px; left: 0; width: 128px; height: 2px;
  background: var(--acc);
  box-shadow: 0 0 18px var(--acc);
}
.case[hidden] { display: none; }

.case-hd { max-width: 74ch; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.case-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--acc);
  padding: .34rem .8rem; border-radius: 100px;
  border: 1px solid var(--acc-line); background: var(--acc-soft);
}
.case-hd h2 {
  font-size: clamp(1.9rem, 4.2vw, 3rem); color: #fff;
  margin: 1rem 0 .5rem;
}
.case-kick {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em;
  color: var(--acc); margin-bottom: .9rem;
}
.case-sum { color: rgba(255, 255, 255, .68); font-size: 1.02rem; }

/* Facts strip — pure data, so it is set entirely in the mono face. */
.case-facts {
  display: grid; gap: 0; margin-top: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; overflow: hidden;
}
.case-facts > div {
  padding: .85rem 1rem;
  border-right: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
}
.case-facts > div:last-child { border-right: 0; }
.case-facts dt {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255, 255, 255, .42); margin-bottom: .3rem;
}
.case-facts dd {
  font-family: var(--font-mono); font-size: .95rem; font-weight: 500;
  color: #fff; margin: 0; font-variant-numeric: tabular-nums;
}

/* ---------- Stage viewer ------------------------------------------------- */
.case-body {
  display: grid; gap: clamp(1.5rem, 3vw, 2.4rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
}

.stagewrap { position: sticky; top: 84px; }
.stage-media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 16px; background: var(--navy-900);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
}
.stage-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .55s var(--ease-out);
}
.stage-media img.on { opacity: 1; }
/* No-JS: the first stage is visible because it carries .on in the markup and
   the others simply never reveal. Content for all four stages is still in
   the DOM and readable below. */

.stage-meta {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 2.4rem 1.1rem .95rem;
  background: linear-gradient(to top, rgba(4, 8, 26, .93), transparent);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.stage-meta b {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; font-weight: 500;
}
.stage-count {
  font-family: var(--font-mono); font-size: .72rem; color: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums; flex: none;
}
.stage-count b { color: var(--acc); font-size: .72rem; letter-spacing: 0; }

/* Progress rail under the image — four segments, filled to the active stage. */
.stage-prog { display: flex; gap: 4px; margin-top: .7rem; }
.stage-prog span {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  transition: background .35s;
}
.stage-prog span.on { background: var(--acc); }

/* ---------- The step list (the control) ---------------------------------- */
.gsteps { list-style: none; padding: 0; margin: 0; counter-reset: gs; }
.gstep { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.gstep:first-child { border-top: 1px solid rgba(255, 255, 255, .1); }

.gstep-btn {
  width: 100%; display: flex; align-items: baseline; gap: .85rem;
  padding: 1rem .2rem; text-align: left; color: rgba(255, 255, 255, .66);
  transition: color .25s;
  position: relative;
}
.gstep-btn:hover { color: #fff; }
.gstep-n {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  color: rgba(255, 255, 255, .38); flex: none; font-variant-numeric: tabular-nums;
  transition: color .25s;
}
.gstep-t {
  font-family: var(--font-display); font-weight: 700; font-stretch: 92%;
  letter-spacing: -.02em; font-size: 1.14rem; line-height: 1.2; flex: 1;
}
/* The seam again: the active step is marked by a lit vertical edge, matching
   the before/after handle. */
.gstep-btn::before {
  content: ''; position: absolute; left: -.9rem; top: .95rem; bottom: .95rem;
  width: 2px; border-radius: 2px; background: var(--acc);
  opacity: 0; transform: scaleY(.3); transform-origin: center;
  transition: opacity .3s, transform .4s var(--ease-out);
}
.gstep[aria-current="step"] .gstep-btn { color: #fff; }
.gstep[aria-current="step"] .gstep-btn::before { opacity: 1; transform: scaleY(1); box-shadow: 0 0 14px var(--acc); }
.gstep[aria-current="step"] .gstep-n { color: var(--acc); }

.gstep-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease-out);
}
.gstep[aria-current="step"] .gstep-body { grid-template-rows: 1fr; }
.gstep-body > div { overflow: hidden; }
.gstep-body p {
  color: rgba(255, 255, 255, .66); font-size: .93rem; padding-bottom: .85rem;
}
.gstep-body ul { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: .45rem; }
.gstep-body li {
  display: flex; gap: .6rem; font-size: .85rem; color: rgba(255, 255, 255, .58);
  line-height: 1.5;
}
.gstep-body li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--acc); margin-top: .52rem; flex: none;
}

/* ---------- Per-case before / after -------------------------------------- */
.case-ba { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.case-ba .ba { border-radius: 16px; }
.case-ba .cap {
  display: flex; align-items: center; gap: .55rem; margin-top: .8rem;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  color: rgba(255, 255, 255, .48);
}
.case-ba .cap svg { width: 14px; height: 14px; stroke: var(--acc); fill: none; stroke-width: 2; flex: none; }

/* ---------- Closing band ------------------------------------------------- */
.gband {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: clamp(3rem, 7vw, 5rem) 0;
  text-align: center;
}
.gband h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); color: #fff; max-width: 20ch; margin: 0 auto 1rem; }
.gband p { color: rgba(255, 255, 255, .66); max-width: 56ch; margin: 0 auto 2rem; }
.gband .row { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 940px) {
  .case-body { grid-template-columns: 1fr; }
  .stagewrap { position: static; }
}
@media (max-width: 720px) {
  .case-facts { grid-template-columns: repeat(2, 1fr); }
  .case-facts > div:nth-child(2n) { border-right: 0; }
  .case-facts > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .gindex { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .gcard h3 { font-size: .92rem; }
  .gcard-cap { padding: .75rem .8rem; }
  .gcard-go { display: none; }
  .stage-media { border-radius: 13px; }
  .gstep-t { font-size: 1.02rem; }
  /* The sticky filter bar plus the sticky site header would eat half a phone
     screen, so the filter bar gives up its stickiness on small viewports. */
  .gbar { position: static; }
}
@media (max-width: 420px) {
  .gindex { grid-template-columns: 1fr; }
}

/* ---------- Crop correction ----------
   `.ba` defaults to a 21:9 cinematic band, which suits the wide hallway shots
   it was built for. The gallery sources are 16:9, and cover-cropping them to
   21:9 slices roughly a quarter off the top and bottom — which on a water
   case removes the floor, i.e. the entire subject. Full frame here. */
.case-ba .ba img { aspect-ratio: 16 / 9; }