/* ══════════════════════════════════════════════════════════════════════════
   MINEERS 2.0 — OUR WORK
   results.html (Smile Gallery) · patient-reviews.html
   Loaded after treatment.css, whose tokens, chapter bar, hero, "in brief",
   chapters, final moment and booking drawer these pages use as they are.
   Only what these two pages add lives here:
     · before/after sliders, diptychs and after-only details (gallery)
     · the typographic score, the review wall and the word index (reviews)
   Site rule for the gallery: BEFORE on the LEFT, AFTER on the RIGHT, and a
   label never sits on the other photograph.
   Everything is scoped to .tx; no other page loads this file.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shared with the Who-we-are pages (who.css is not loaded here) ───────── */
.tx .txi--who .txi__statement { grid-column: 4 / 12; text-wrap: balance; }
.tx .txi--who .txi__answer { grid-column: 4 / 10; }
.tx .txf__title--long { font-size: clamp(46px, 6.2vw, 116px); }
.tx [data-tone="light"] .txc__sub { color: var(--tx-champ); }
.tx .txc__head .tx-h2 .ln > span { text-wrap: balance; }
html:not(.js) .tx .txf { --p: 1; }

/* the chapter bar holds seven chapters here */
@media (max-width: 1240px) and (min-width: 801px) {
  .tx .txnav__list { gap: 14px; }
  .tx .txnav__list a { letter-spacing: .1em; font-size: 9.5px; }
  .tx .txnav__list a span { display: none; }
}

/* ══ SMILE GALLERY ══════════════════════════════════════════════════════════ */
.tx .txgal__meta { margin-top: 26px; font: 500 10.5px/1.5 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-soft); }
.tx .txgal__link { margin-top: 18px; }
.tx .txcases { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(56px, 6vw, 100px) 24px; align-items: start; }
.tx .txcmp--xl { grid-column: 2 / 12; }
.tx .txcmp--l { grid-column: 1 / 9; }
.tx .txcmp--half { grid-column: span 6; }
.tx .txcmp--pano { grid-column: 1 / 13; }
.tx .txcmp--small { grid-column: 4 / 10; }

/* the slider: the AFTER photo is the base; the BEFORE photo covers the left
   part, up to --pos. The line and handle sit at --pos. */
.tx .txcmp { position: relative; margin: 0; }
.tx .txcmp__stage {
  position: relative; overflow: hidden; aspect-ratio: var(--ar, 16 / 10); background: #15110e;
  touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.tx .txcmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.tx .txcmp__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.tx .txcmp__line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); z-index: 2; width: 0; pointer-events: none; }
.tx .txcmp__line::before { content: ""; position: absolute; top: 0; bottom: 0; left: -.5px; width: 1px; background: rgba(246, 241, 233, .92); box-shadow: 0 0 14px rgba(0, 0, 0, .28); }
.tx .txcmp__line i {
  position: absolute; top: 50%; left: 0; width: 48px; height: 48px; transform: translate(-50%, -50%);
  border: 1px solid rgba(246, 241, 233, .9); border-radius: 50%;
  background: rgba(28, 22, 18, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tx .txcmp__line i::before, .tx .txcmp__line i::after { /* ‹ › */
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-top: 1px solid #fff; border-left: 1px solid #fff;
}
.tx .txcmp__line i::before { left: 11px; transform: rotate(-45deg); }
.tx .txcmp__line i::after { right: 11px; transform: rotate(135deg); }
.tx .txcmp.is-anim .txcmp__before { transition: clip-path .75s var(--tx-ease); }
.tx .txcmp.is-anim .txcmp__line { transition: left .75s var(--tx-ease); }
.tx .txcmp__tag {
  position: absolute; top: 16px; z-index: 2; pointer-events: none;
  padding: 7px 10px; background: rgba(20, 15, 12, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 500 9.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #fff;
  transition: opacity .25s;
}
.tx .txcmp__tag--b { left: 16px; }
.tx .txcmp__tag--a { right: 16px; }
.tx .txcmp.is-nob .txcmp__tag--b, .tx .txcmp.is-noa .txcmp__tag--a { opacity: 0; }
/* the range is for keyboards and screen readers; pointers drag the stage */
.tx .txcmp__range { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.tx .txcmp:focus-within .txcmp__stage { outline: 1px solid var(--tx-champ); outline-offset: 5px; }
.tx .txcmp__cap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; }
.tx .txcmp__cap b { font: italic 500 22px/1 var(--serif); color: var(--tx-champ); }
.tx .txcmp__what { font: 500 10px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-soft); }
.tx .txcmp__ctl { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.tx .txcmp__ctl button {
  padding: 8px 12px; border: 1px solid var(--tx-line); background: transparent; cursor: pointer;
  font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-ink);
  transition: background-color .4s, color .4s, border-color .4s;
}
.tx .txcmp__ctl button:hover { background: var(--tx-esp); color: var(--tx-ivory); border-color: var(--tx-esp); }
.tx .txcmp__read { min-width: 58px; text-align: center; font: 500 10px/1 var(--mono); letter-spacing: .1em; color: var(--tx-soft); font-variant-numeric: tabular-nums; }
html:not(.js) .tx .txcmp__ctl { display: none; }

/* the hero: a framed slider on the dark ground, with crop marks, like the drawn heroes */
.tx .txh__media--cmp { display: grid; place-items: center; background: radial-gradient(110% 80% at 50% 45%, #2e241d 0%, #1a1410 72%); }
.tx .txh__media--cmp::after { display: none; }
.tx .txh__media--cmp::before {
  content: ""; position: absolute; inset: 22px; pointer-events: none; z-index: 1;
  --c: rgba(241, 233, 221, .5); --l: 18px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--l) no-repeat;
}
.tx .txh__cmp { position: relative; z-index: 2; width: 86%; }
.tx .txcmp--hero .txcmp__stage { box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }
.tx .txh__cmpnote {
  display: flex; align-items: baseline; gap: 12px; margin-top: 18px;
  font: 500 10px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-od-soft);
}
.tx .txh__cmpnote b { font: italic 500 22px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--tx-champ-lt); }
.tx .txh__cmpnote span { margin-left: auto; color: var(--tx-od); }
html:not(.js) .tx .txh__cmpnote span { display: none; }
.tx .txh__media--cmp .txh__cap { color: var(--tx-od-soft); }
.js .tx .txh__cmp { opacity: 0; transform: scale(.96); transition: opacity 1.6s var(--tx-ease) .5s, transform 2.2s var(--tx-ease) .5s; }
.tx.tx-ready .txh__cmp { opacity: 1; transform: none; }

/* diptychs: two photographs side by side, before first */
.tx .txdips__label, .tx .txdets .tx-label { margin-bottom: 26px; }
.tx .txdips__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(44px, 5vw, 80px) clamp(24px, 3vw, 48px); align-items: start; }
.tx .txdip { margin: 0; }
.tx .txdip__row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tx .txdip__half { position: relative; overflow: hidden; background: var(--tx-beige); }
.tx .txdip__half img { width: 100%; height: auto; transition: filter .6s var(--tx-ease), transform 1.4s var(--tx-ease); }
.tx .txdip__tag {
  position: absolute; left: 10px; bottom: 10px; padding: 6px 9px; background: rgba(20, 15, 12, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 500 9px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #fff;
}
@media (hover: hover) {
  .tx .txdip__row:hover .txdip__half img { filter: saturate(.55) brightness(.82); }
  .tx .txdip__row .txdip__half:hover img { filter: none; transform: scale(1.025); }
}

/* after-only details */
.tx .txdets__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
.tx .txdet { margin: 0; }
.tx .txdet__img { overflow: hidden; background: #15110e; }
.tx .txdet__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.4s var(--tx-ease); }
.tx .txdet:hover .txdet__img img { transform: scale(1.04); }
.tx .txc--cream .txdets__grid, .tx #implants .txdets__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tx #implants .txdet__img img { aspect-ratio: 4 / 5; object-position: 50% 30%; }

/* ══ PATIENT REVIEWS ════════════════════════════════════════════════════════ */
/* the hero's "photograph" is the score itself */
.tx .txh__media--score { display: grid; place-items: center; background: radial-gradient(110% 80% at 50% 42%, #2e241d 0%, #1a1410 72%); color: var(--tx-od); }
.tx .txh__media--score::after { display: none; }
.tx .txscore { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; text-align: center; }
.tx .txscore__n { font: 400 clamp(150px, 17vw, 300px)/.78 var(--serif); letter-spacing: -.06em; color: var(--tx-od); }
.tx .txscore__stars { display: flex; gap: clamp(8px, 1vw, 14px); }
.tx .txscore__stars svg { width: clamp(26px, 2.6vw, 40px); height: auto; overflow: visible; }
.tx .txscore__stars path {
  fill: var(--tx-champ-lt); stroke: var(--tx-champ-lt); stroke-width: 1; stroke-linejoin: round;
  stroke-dasharray: 80; stroke-dashoffset: 0; fill-opacity: 1;
}
.js .tx .txscore__stars path { stroke-dashoffset: 80; fill-opacity: 0; transition: stroke-dashoffset 1.2s var(--tx-ease), fill-opacity .8s var(--tx-ease); }
.js .tx .txscore__stars svg { --d: calc(.8s + var(--i) * .16s); }
.js .tx .txscore__stars path { transition-delay: var(--d), calc(var(--d) + .7s); }
.tx.tx-ready .txscore__stars path { stroke-dashoffset: 0; fill-opacity: 1; }
.tx .txscore__src { font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--tx-od-soft); }
.js .tx .txscore__n { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity 1.4s var(--tx-ease) .35s, transform 1.8s var(--tx-ease) .35s; }
.tx.tx-ready .txscore__n { opacity: 1; transform: none; }

/* a pull quote */
.tx .txpull { max-width: 1180px; }
.tx .txpull p { font: 400 clamp(42px, 5.8vw, 104px)/1 var(--serif); letter-spacing: -.035em; text-indent: -.4em; }
.tx .txpull em { font-style: italic; color: var(--tx-champ); }
.tx .txpull cite { display: block; margin-top: 28px; font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; font-style: normal; color: var(--tx-soft); }
.tx .txpull cite::before { content: "— "; }

/* the wall, with its filters kept in reach while scrolling */
.tx .txwall__bar {
  position: sticky; top: calc(var(--nav-h, 92px) + var(--tx-bar)); z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  margin: 0 calc(var(--tx-g) * -1); padding: 16px var(--tx-g);
  background: rgba(246, 241, 233, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tx-line);
}
.tx .txchips { display: flex; flex-wrap: wrap; gap: 8px; }
.tx .txchips button, .tx .txidx button { cursor: pointer; font: inherit; color: inherit; }
.tx .txchips button {
  padding: 10px 13px; border: 1px solid var(--tx-line); background: transparent;
  font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-ink);
  transition: background-color .4s, color .4s, border-color .4s;
}
.tx .txchips button span { color: var(--tx-champ); margin-left: 4px; }
.tx .txchips button:hover { border-color: var(--tx-ink); }
.tx .txchips button[aria-pressed="true"] { background: var(--tx-esp); border-color: var(--tx-esp); color: var(--tx-ivory); }
.tx .txchips button[aria-pressed="true"] span { color: var(--tx-champ-lt); }
.tx .txwall__count { margin-left: auto; font: 500 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-soft); }
html:not(.js) .tx .txchips, html:not(.js) .tx .txwall__count { display: none; }
html:not(.js) .tx .txwall__bar { display: none; }

.tx .txwall__list { columns: 3 300px; column-gap: clamp(28px, 3.4vw, 64px); margin-top: clamp(30px, 3vw, 48px); }
.tx .txrev { break-inside: avoid; padding: 30px 0 40px; border-top: 1px solid var(--tx-line); animation: tx-fade .6s var(--tx-ease); }
.tx .txrev[hidden] { display: none; }
.tx .txrev__stars { font-size: 13px; letter-spacing: .3em; color: var(--tx-champ); }
.tx .txrev blockquote { margin-top: 18px; }
.tx .txrev blockquote p { font: 400 clamp(20px, 1.6vw, 25px)/1.38 var(--serif); letter-spacing: -.008em; text-indent: -.36em; }
.tx .txrev--l blockquote p { font-size: clamp(26px, 2.2vw, 36px); line-height: 1.18; letter-spacing: -.018em; }
.tx .txrev--xl blockquote p { font-size: clamp(40px, 3.8vw, 64px); line-height: 1.02; letter-spacing: -.03em; }
.tx .txrev em { font-style: italic; color: var(--tx-champ); }
.tx .txrev mark { background: none; color: inherit; transition: background-size .6s var(--tx-ease); background-image: linear-gradient(rgba(217, 193, 154, .55), rgba(217, 193, 154, .55)); background-repeat: no-repeat; background-position: 0 88%; background-size: 0 .34em; }
.tx .txrev mark.is-on { background-size: 100% .34em; }
.tx .txrev__who { display: flex; align-items: baseline; gap: 12px; margin-top: 22px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.tx .txrev__no { font: italic 500 17px/1 var(--serif); letter-spacing: 0; color: var(--tx-champ); }
.tx .txrev__tags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; }
.tx .txrev__tags li { font: 500 9.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-soft); }
.tx .txrev__tags a { border-bottom: 1px solid currentColor; transition: color .4s; }
.tx .txrev__tags a:hover { opacity: 1; color: var(--tx-champ); }

/* the word index, set like the index at the back of a book */
.tx .txidx__lead { max-width: 640px; }
.tx .txidx { border-top: 1px solid var(--tx-line); columns: 2 420px; column-gap: clamp(40px, 6vw, 110px); }
.tx .txidx li { break-inside: avoid; border-bottom: 1px solid var(--tx-line); }
.tx .txidx button {
  display: grid; grid-template-columns: auto minmax(20px, 1fr) auto; align-items: baseline; gap: 6px 14px;
  width: 100%; padding: 22px 0 20px; border: 0; background: none; text-align: left;
}
.tx .txidx__word { font: 500 clamp(30px, 3vw, 50px)/1 var(--serif); letter-spacing: -.025em; transition: color .4s, transform .7s var(--tx-ease); }
.tx .txidx__dots { border-bottom: 1px dotted rgba(37, 32, 28, .35); transform: translateY(-.35em); }
.tx .txidx__n { font: italic 500 clamp(26px, 2.4vw, 40px)/1 var(--serif); color: var(--tx-champ); }
.tx .txidx__who { grid-column: 1 / -1; font: 500 9.5px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-soft); }
.tx .txidx button:hover .txidx__word, .tx .txidx button[aria-pressed="true"] .txidx__word { color: var(--tx-champ); font-style: italic; transform: translateX(10px); }
html:not(.js) .tx .txidx button { cursor: default; }

/* ══ RATING STRIP (as on treatments.html) ═══════════════════════════════════ */
.tx .txrate { background: var(--tx-ivory); padding: clamp(80px, 9vw, 150px) var(--tx-g); }
.tx .txrate .tx-label { margin-bottom: 26px; }
.tx .txrate__in {
  position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center;
  column-gap: clamp(22px, 3.4vw, 64px); padding: clamp(28px, 3vw, 44px) 0;
  border-top: 1px solid var(--tx-line); border-bottom: 1px solid var(--tx-line); color: var(--tx-ink);
}
.tx .txrate__in::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--tx-champ);
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--tx-ease);
}
.tx .txrate__in:hover::after { transform: scaleX(1); }
.tx .txrate__score { font: 500 clamp(72px, 8vw, 132px)/.8 var(--serif); letter-spacing: -.045em; transition: color .6s var(--tx-ease); }
.tx .txrate__in:hover .txrate__score { color: var(--tx-champ); }
.tx .txrate__stars { display: grid; gap: 12px; }
.tx .txrate__row { font-size: 17px; line-height: 1; letter-spacing: .3em; color: var(--tx-champ); }
.tx .txrate__src { font: 500 9.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--tx-soft); }
.tx .txrate__text { font: italic 400 clamp(26px, 2.6vw, 44px)/1.1 var(--serif); letter-spacing: -.015em; }
.tx .txrate__in:hover .txlink::before { transform: scaleX(.35); }
.tx .txrate__in:hover .txlink::after { transform: translateX(5px); }

/* ══ TABLET ═════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) and (min-width: 801px) {
  .tx .txcmp--xl, .tx .txcmp--l { grid-column: 1 / 13; }
  .tx .txcmp--small { grid-column: 3 / 11; }
  .tx .txdets__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ══ MOBILE ═════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .tx .txi--who .txi__statement { font-size: 30px; }
  .tx .txh__title--long { font-size: clamp(46px, 15vw, 72px); }  /* a later treatment.css rule restores 20vw on phones */
  .tx .txf__title--long { font-size: clamp(44px, 12.5vw, 64px); }
  .tx .txf--frame .txf__media { right: auto; }   /* treatment.css keeps the desktop offset on phones */

  .tx .txcases { display: block; }
  .tx .txcmp + .txcmp { margin-top: 56px; }
  .tx .txcmp .txcmp__stage { margin: 0 calc(var(--tx-g) * -1); }
  .tx .txcmp__tag { top: 12px; padding: 6px 8px; font-size: 8.5px; }
  .tx .txcmp__tag--b { left: 12px; } .tx .txcmp__tag--a { right: 12px; }
  .tx .txcmp__line i { width: 42px; height: 42px; }
  .tx .txcmp__ctl { margin-left: 0; width: 100%; }
  .tx .txcmp__ctl button { flex: 1; padding: 12px; }
  .tx .txh.txh--cmp .txh__media { height: 62svh; min-height: 400px; max-height: none; align-content: start; padding-top: 34px; }
  .tx .txh.txh--cmp .txh__copy { margin-top: calc(max(62svh, 400px) - 70px); }
  .tx .txh__cmp { width: calc(100% - 44px); }
  .tx .txh__media--cmp::before { display: none; }
  .tx .txcmp--hero .txcmp__stage { margin: 0; }
  .tx .txcmp--pano .txcmp__stage { aspect-ratio: 16 / 10; }
  .tx .txcmp--pano .txcmp__img { object-position: 50% 50%; }

  .tx .txdips__grid { grid-template-columns: 1fr; gap: 44px; }
  .tx .txdips__grid .txdip__row { margin: 0 calc(var(--tx-g) * -1); }
  .tx .txdets__grid, .tx .txc--cream .txdets__grid, .tx #implants .txdets__grid { grid-template-columns: 1fr 1fr; gap: 24px 12px; }

  .tx .txscore__n { font-size: 44vw; }
  .tx .txpull p { font-size: 42px; text-indent: -.35em; }
  .tx .txwall__bar { top: var(--nav-h, 76px); padding: 12px var(--tx-g); gap: 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tx .txwall__bar::-webkit-scrollbar { display: none; }
  .tx .txchips { flex-wrap: nowrap; }
  .tx .txchips button { white-space: nowrap; }
  .tx .txwall__count { display: none; }
  .tx .txrev--xl blockquote p { font-size: 40px; }
  .tx .txidx button { padding: 18px 0 16px; }
  .tx .txidx__word { font-size: 32px; }

  .tx .txrate { padding: 80px var(--tx-g); }
  .tx .txrate__in { grid-template-columns: auto minmax(0, 1fr); row-gap: 22px; column-gap: 22px; padding: 30px 0 32px; }
  .tx .txrate__score { font-size: 84px; }
  .tx .txrate__text, .tx .txrate__in .txlink { grid-column: 1 / -1; justify-self: start; }
  .tx .txrate__text { font-size: 30px; }
}
@media (max-width: 800px) {
  /* treatment.css sizes a photo hero at 70svh on phones; the score needs less */
  .tx .txh.txh--score .txh__media { height: 52svh; min-height: 360px; max-height: none; }
  .tx .txh.txh--score .txh__copy { margin-top: calc(max(52svh, 360px) - 40px); }
}

@media (prefers-reduced-motion: reduce) {
  .tx .txcmp.is-anim .txcmp__before, .tx .txcmp.is-anim .txcmp__line { transition: none; }
  .tx .txdip__half img, .tx .txdet__img img, .tx .txrev { transition: none; animation: none; }
  .js .tx .txscore__stars path { stroke-dashoffset: 0; fill-opacity: 1; transition: none; }
  .js .tx .txscore__n { opacity: 1; transform: none; transition: none; }
  .js .tx .txh__cmp { opacity: 1; transform: none; transition: none; }
}

/* "In brief" runs straight into the first chapter on the same ivory ground, so
   its bottom padding and the chapter's top padding (about 320px together) read
   as an empty band. They share one smaller space instead. */
.tx .txi--who { padding-bottom: 0; }
.tx .txi--who + .txc { padding-top: clamp(90px, 8vw, 130px); }
@media (max-width: 800px) {
  .tx .txi--who + .txc { padding-top: 100px; }
}

/* The wide before/after pairs (the 2026-09-22 veneer cases): each photograph
   is about twice as wide as it is tall, so a pair spans both columns of the
   grid, as the gallery's wide "gap closure" slider does. On a phone, side by
   side they would be too small to read, so the halves stack: before above,
   after below, each still tagged. */
.tx .txdip--wide { grid-column: 1 / -1; }
@media (max-width: 800px) {
  .tx .txdips__grid .txdip--wide .txdip__row { grid-template-columns: 1fr; }
}

/* an odd last portrait pair stands centred on its own row, not alone at the
   left with an empty half beside it (the user, 2026-09-23: "lots of gap") */
@media (min-width: 801px) {
  .tx .txdips__grid > .txdip:not(.txdip--wide):last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - clamp(24px, 3vw, 48px)) / 2);
  }
}

/* a chapter told in photographs (build_work.PHOTO_ROWS, implants): one row of
   whole photos at one height, each figure growing by its own shape (--r) */
.tx .txphotos__row { display: flex; align-items: flex-start; gap: clamp(12px, 1.4vw, 22px); }
.tx .txphotos__ph { flex: var(--r, 1) 1 0; min-width: 0; margin: 0; }
.tx .txphotos__img { overflow: hidden; background: #15110e; }
.tx .txphotos__img img { width: 100%; height: auto; transition: transform 1.4s var(--tx-ease); }
.tx .txphotos__ph:hover .txphotos__img img { transform: scale(1.03); }
.tx .txphotos__ph .tx-cap { margin-top: 14px; }
@media (max-width: 800px) {
  /* the first two side by side, the third on its own line, full width */
  .tx .txphotos__row { flex-wrap: wrap; row-gap: 28px; }
  .tx .txphotos__ph:nth-child(3n) { flex: 0 0 100%; }
  .tx .txphotos__ph .tx-cap { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .tx .txphotos__img img { transition: none; } }

/* ══ Review photographs (atelier, 2026-09-24): the patient, beside their review ═ */
.tx .txrev__ph { margin: 0 0 18px; }
.tx .txrev__ph img { display: block; width: 100%; height: auto; }

/* Smile Portfolio hero: one framed photograph since 2026-09-25 (was a slider). */
.tx .txh__still img { display: block; width: 100%; height: auto; box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }