/* ===========================================================================
   MEDYRA — Treatments prototype v1 (v2 redesign)
   Prototype-only layer. Loaded AFTER site.css and only ever adds; every
   selector is namespaced .tx- so it cannot collide with a production
   component, and nothing in the production stylesheet is overridden.

   Built entirely from the project's own tokens — navy scale, ivory grounds,
   Fraunces display, IBM Plex body, the --sp / --fs / --r / --e / --dur scales.
   No new colour, no new font, no new radius vocabulary.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1 — HERO

   The previous version framed the photograph with an offset gold rule and hung
   the "Care Without Borders" line underneath it, outside that frame — so the
   type read as a caption taped to the edge of a picture.

   This is one plate. A single navy card with a gold hairline holds the image
   and the editorial line together; a rule inside the card separates them
   instead of an outer border doing it. Nothing sits on top of the photograph,
   which is what keeps the type legible at every width.
   --------------------------------------------------------------------------- */
.tx-hero { padding-block-end: clamp(5rem, 4rem + 6vw, 8.5rem); }

.tx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 1rem + 5vw, 4.5rem);
  align-items: center;
}

.tx-hero-copy { min-inline-size: 0; }
.tx-hero h1 { max-width: 18ch; }
.tx-hero .lead { max-width: 46ch; }

.tx-hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Three equal tracks rather than a wrapping flex row: equal tracks cannot
   produce the 2 + 1 orphan the flex version did, and at every width the three
   claims stay in one row, left-aligned to each other. Below 48rem they become
   a stack, which is the intentional break — not a wrap that happens to land
   somewhere. */
.tx-assure {
  grid-column: 1 / -1;
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-6);
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-block-start: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-block-start: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--fs-sm); color: var(--on-dark-mute);
}
/* Grid, not inline-flex, so that if a track ever does get tight the text
   wraps under itself instead of pushing the icon out of line. */
.tx-assure li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
}
.tx-assure svg { flex: none; color: var(--gold-lite); opacity: .9; margin-block-start: 2px; }

/* -- the plate ------------------------------------------------------------ */
.tx-plate {
  position: relative;
  margin: 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(168deg, rgba(10, 23, 48, .72), rgba(6, 13, 28, .55));
  border: 1px solid rgba(212, 175, 55, .40);
  border-radius: var(--r-lg);
  padding: clamp(.75rem, .5rem + .9vw, 1.1rem);
  box-shadow: 0 20px 44px rgba(6, 13, 28, .36);
  overflow: hidden;
}

.tx-plate-media {
  position: relative;
  border-radius: calc(var(--r-lg) - 6px);
  overflow: hidden;
}
/* hero-medyra-branded.png is 16:9 and already composed — consultant left of
   centre, patient in the foreground, the MEDYRA wall behind. Given its own
   aspect box it needs almost no cropping, so object-position stays centred. */
.tx-plate-media img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  block-size: auto;
  object-fit: cover;
  object-position: center;
}

.tx-plate-cap {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  padding: clamp(1.1rem, .8rem + 1.2vw, 1.6rem) clamp(.5rem, .3rem + .8vw, .9rem)
           clamp(.4rem, .2rem + .6vw, .7rem);
}
.tx-plate-script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: #fff;
}
.tx-plate-rule { inline-size: 46px; block-size: 2px; background: var(--gold-lite); opacity: .85; }
.tx-plate-kicker {
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--on-dark-mute);
}


/* ---------------------------------------------------------------------------
   2 — FIND YOUR TREATMENT

   Lifted into the seam between the navy hero and the page body. That overlap
   is the single most "premium" move here: it makes the hero and the catalogue
   read as one object, and it puts the search where the eye already is.
   --------------------------------------------------------------------------- */
.tx-find { padding-block: 0; background: transparent; }
.tx-find .wrap { position: relative; }

.tx-find-card {
  margin-block-start: clamp(-5.5rem, -4rem - 4vw, -3.5rem);
  margin-block-end: clamp(3rem, 2rem + 3vw, 4.5rem);
  position: relative;
  z-index: 2;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 22px);
  box-shadow: 0 22px 50px rgba(6, 13, 28, .16);
  /* NO overflow:hidden here.
     It used to live on this element to clip the navy Concierge panel to the
     card's rounded corners, and it did that job — but the suggestion popup is
     absolutely positioned inside this same box, so the clip cut the results
     off at the card's bottom edge. Measured at 1440: the popup ran to 1579px
     while the card ended at 1433px, and because the popup had not reached its
     own max-height it had no internal scrollbar either, so rows 4 and 5 were
     not merely hidden — they were unreachable. At 1280 only 2 of 6 survived.
     The corners are now rounded on .tx-ai itself (see below), which is where
     the requirement actually belongs: the panel is the thing with a
     background, so the panel is the thing that should be shaped. */
}

.tx-find-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}

.tx-find-main { padding: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); min-inline-size: 0; }
.tx-find-main h2 {
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  margin: var(--sp-3) 0 0;
}
.tx-find-lede { margin-block-start: var(--sp-4); max-width: 56ch; font-size: var(--fs-sm); }

/* -- search field --------------------------------------------------------- */
.tx-search { position: relative; margin-block-start: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.tx-search .input {
  padding-inline-start: calc(var(--sp-4) + 26px);
  padding-inline-end: calc(var(--sp-4) + 28px);
}
.tx-search-ico {
  position: absolute; inset-inline-start: var(--sp-4); inset-block-start: 25px;
  transform: translateY(-50%); color: var(--ink-3); pointer-events: none;
}
.tx-search-clear {
  position: absolute; inset-inline-end: 6px; inset-block-start: 25px;
  transform: translateY(-50%);
  inline-size: 38px; block-size: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--ivory-2); color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.tx-search-clear:hover { background: var(--navy-50); color: var(--navy-800); }
.tx-search-clear:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }
/* An author `display` beats the UA [hidden] rule, so honour it explicitly. */
.tx-search-clear[hidden] { display: none; }

/* -- live suggestions ----------------------------------------------------- */
.tx-sugg {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 8px);
  z-index: 30;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px rgba(6, 13, 28, .18);
  padding: var(--sp-3);
  /* Six is the largest result set the catalogue can return, and six rows plus
     the heading measure ~30.5rem — so 32rem lets every ordinary search show
     in full, and the viewport clamp keeps the popup from ever outgrowing the
     screen on a short laptop. Anything taller than the cap scrolls inside the
     popup, which is the one place scrolling is acceptable: the rows stay
     reachable. */
  max-block-size: min(68vh, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tx-sugg[hidden] { display: none; }
.tx-sugg-h {
  margin: 0 0 var(--sp-2);
  padding-inline: var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.tx-sugg-row {
  inline-size: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 15px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  text-align: start;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: background-color var(--dur-2) var(--ease-out);
}
.tx-sugg-row:hover,
.tx-sugg-row:focus-visible { background: var(--ivory-2); outline: none; }
.tx-sugg-ico {
  display: grid; place-items: center;
  inline-size: 36px; block-size: 36px;
  border-radius: 10px;
  background: var(--navy-50); color: var(--navy-700);
}
.tx-sugg-ico svg { inline-size: 19px; block-size: 19px; }
.tx-sugg-text { display: grid; gap: 2px; min-inline-size: 0; }
.tx-sugg-n { font-weight: 600; font-size: var(--fs-sm); }
.tx-sugg-s { font-size: var(--fs-xs); color: var(--ink-3); }
.tx-sugg-p { font-size: var(--fs-sm); font-weight: 600; color: var(--navy-700); }
.tx-sugg-arr { color: var(--ink-3); }
.tx-sugg-more {
  margin: var(--sp-2) 0 0; padding-inline: var(--sp-3);
  font-size: var(--fs-xs); color: var(--ink-3);
}

/* The panel browses the whole catalogue when the box is focused and empty,
   so rows sit a little tighter than they do for a six-item match list and the
   heading stays put while the rest scrolls under it. */
.tx-sugg-h {
  position: sticky;
  inset-block-start: calc(var(--sp-3) * -1);
  background: var(--white);
  padding-block: var(--sp-2);
  margin-block-start: calc(var(--sp-2) * -1);
  z-index: 1;
}


/* -- speciality filters --------------------------------------------------- */
.tx-filters {
  margin-block-start: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.tx-filters .opt { cursor: pointer; font-family: inherit; }
.tx-filters .opt.is-on {
  background: var(--navy-900); border-color: var(--navy-900); color: #fff;
}
.tx-filters .opt.is-on:hover { background: var(--navy-800); border-color: var(--navy-800); }

/* -- result state + the escape hatch --------------------------------------
   The old build silently ANDed a stale pill with the search and then claimed
   nothing matched. The count now says which filter is narrowing things, and
   this button drops it in one tap. */
.tx-state {
  margin-block-start: var(--sp-4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4);
  min-block-size: 1.4em;
}
.tx-count { margin: 0; color: var(--ink-3); }
.tx-clear-filter {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-block-size: 34px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--gold-lite);
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  color: #6B4E12;
  font: 600 var(--fs-xs)/1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out);
}
.tx-clear-filter:hover { background: #F7EFD6; }
.tx-clear-filter[hidden] { display: none; }

/* -- the Concierge panel --------------------------------------------------
   A bridge to the widget that already exists on the page, not a second
   assistant. Navy so it reads as MEDYRA speaking rather than a tool. */
.tx-ai {
  background: var(--navy-900);
  color: var(--on-dark);
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  /* The card no longer clips its children, so the panel rounds its own two
     outer corners. Logical properties, so a right-hand panel in English
     becomes a left-hand panel in Arabic without a second rule. The -1px is
     the card's border: an inner radius has to be smaller than the outer one
     or the navy shows a hairline outside the frame. */
  border-start-end-radius: calc(var(--r-xl, 22px) - 1px);
  border-end-end-radius: calc(var(--r-xl, 22px) - 1px);
}
.tx-ai-eyebrow {
  margin: 0;
  font-size: var(--fs-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-lite);
}
.tx-ai h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  font-weight: 400;
  line-height: 1.18;
  color: #fff;
}
.tx-ai-body { margin: 0; font-size: var(--fs-sm); color: var(--on-dark-mute); line-height: 1.65; }

.tx-ai-eg { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.tx-ai-eg button {
  inline-size: 100%;
  min-block-size: 44px;
  text-align: start;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font: italic 400 var(--fs-sm)/1.45 var(--font-display);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.tx-ai-eg button:hover { background: rgba(255, 255, 255, .10); border-color: rgba(212, 175, 55, .5); }
.tx-ai-eg button:focus-visible { outline: 2px solid var(--gold-lite); outline-offset: 2px; }

.tx-ai-go { margin-block-start: var(--sp-2); justify-content: center; }
.tx-ai-foot { margin: 0; font-size: var(--fs-xs); color: var(--on-dark-mute); }
.tx-ai-foot a { color: var(--gold-lite); }
.tx-ai-note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--gold-lite);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.tx-ai-note.is-on { opacity: 1; }


/* ---------------------------------------------------------------------------
   3 — FEATURED SPECIALITIES
   The homepage's .treat-suite does the work; only the top padding is trimmed.
   --------------------------------------------------------------------------- */
.tx-featured { padding-block-start: 0; }


/* ---------------------------------------------------------------------------
   4 — ALL TREATMENTS
   --------------------------------------------------------------------------- */
.tx-cat-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  align-items: end;
  margin-block-end: clamp(2.5rem, 1.8rem + 2.5vw, 3.75rem);
}
.tx-cat-intro h2 { margin-block-start: var(--sp-3); }
/* The measure is the mechanism here, not the font size. Holding the line at
   ~64 characters is what makes the shortened copy land on four lines on a
   desktop; the type is if anything slightly larger than before, so this reads
   as an editorial lede rather than as small print. Mobile drops the cap and
   wraps naturally — forcing four lines on a 375px screen would mean type
   nobody can read. */
.tx-lede-4 {
  margin-block-start: var(--sp-5);
  max-width: 64ch;
  color: var(--ink-2);
  font-size: clamp(1rem, .97rem + .16vw, 1.075rem);
  line-height: 1.68;
  text-wrap: pretty;
}

/* The record strip. Both figures are counted from the catalogue at build time,
   so they cannot drift from the list underneath them. */
.tx-record {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
  padding-inline-start: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-inline-start: 1px solid var(--line);
}
.tx-record > div { min-inline-size: 0; }
.tx-record dt {
  font-size: var(--fs-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.tx-record dd {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy-800);
}

.tx-cats { display: grid; gap: clamp(1rem, .7rem + 1.4vw, 1.75rem); }

.tx-cat {
  position: relative;
  overflow: hidden;
  scroll-margin-block-start: 90px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  padding: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
  transition: box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.tx-cat::before {
  content: "";
  position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 3px; background: var(--gold-lite);
  transition: inline-size var(--dur-3) var(--ease-out);
}
.tx-cat[hidden] { display: none; }

.tx-cat-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
}
.tx-cat-icon {
  flex: none; display: grid; place-items: center;
  inline-size: 46px; block-size: 46px; border-radius: 13px;
  background: var(--navy-50); color: var(--navy-700);
  transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}
.tx-cat-id { min-inline-size: 0; }
.tx-cat-id .eyebrow { margin: 0; }
.tx-cat-id h3 {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
  font-weight: 400; line-height: 1.15; letter-spacing: -0.014em; color: var(--ink);
}
.tx-cat-tally { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.tx-cat-tally .tnum { color: var(--navy-700); font-weight: 600; }
.tx-cat-note { margin-block-start: var(--sp-4); max-width: 72ch; }

/* -- procedure rows ------------------------------------------------------- */
.tx-procs {
  list-style: none;
  margin: clamp(1.1rem, .9rem + .9vw, 1.5rem) 0 0;
  padding: 0;
  border-block-start: 1px solid var(--line-2);
}
.tx-proc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem 7rem 44px;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: background-color var(--dur-2) var(--ease-out);
}
.tx-proc:last-child { border-block-end: 0; }
.tx-proc[hidden] { display: none; }

.tx-proc-n { color: var(--ink-2); }
.tx-proc-from strong { color: var(--ink); font-weight: 600; }
.tx-proc-stay { color: var(--ink-3); font-size: var(--fs-sm); }
.tx-proc-lbl {
  display: none;
  font-size: var(--fs-xs); color: var(--ink-3);
  letter-spacing: .08em; text-transform: uppercase;
}

.tx-proc-go {
  inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--white); color: var(--navy-700);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.tx-proc-go:hover { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.tx-proc-go:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }

/* A search hit is tinted rather than isolated, so the speciality it belongs to
   stays visible around it. */
.tx-proc.is-hit { background: var(--gold-soft); }
.tx-proc.is-hit .tx-proc-n { color: var(--ink); font-weight: 600; }
.tx-proc.is-flash { animation: tx-flash 1.8s var(--ease-out); }
@keyframes tx-flash {
  0%, 60% { background: var(--gold-soft); }
  100%    { background: transparent; }
}

.tx-cat-foot {
  margin-block-start: clamp(1.1rem, .9rem + .9vw, 1.5rem);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line-2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
}

@media (hover: hover) {
  .tx-cat:hover { box-shadow: var(--e-2); border-color: var(--line); }
  .tx-cat:hover::before { inline-size: 5px; }
  .tx-cat:hover .tx-cat-icon { background: var(--navy-700); color: #fff; }
}

/* -- empty state ---------------------------------------------------------- */
.tx-empty {
  margin-block-start: var(--sp-6);
  padding: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  text-align: center;
}
.tx-empty[hidden] { display: none; }
.tx-empty-h {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  color: var(--ink);
}
.tx-empty p { color: var(--ink-2); max-width: 54ch; margin-inline: auto; }
.tx-empty-go { margin-block-start: var(--sp-5); }

/* -- the promoted "ask us directly" callout -------------------------------
   Previously this was an inline text link inside a dashed box and read as a
   footnote. It is now a card with its own mark and a gold button, so it is
   unmistakably an action. */
.tx-ask {
  margin-block-start: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, .8rem + 1.2vw, 1.75rem);
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
  background: var(--navy-900);
  border-radius: var(--r-lg);
  box-shadow: var(--e-2);
  position: relative;
  overflow: hidden;
}
.tx-ask::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 140% at 88% 0%, rgba(58, 93, 160, .38), transparent 62%);
  pointer-events: none;
}
.tx-ask > * { position: relative; }
.tx-ask-mark {
  display: grid; place-items: center;
  inline-size: 54px; block-size: 54px;
  border-radius: 15px;
  background: rgba(212, 175, 55, .14);
  color: var(--gold-lite);
  border: 1px solid rgba(212, 175, 55, .40);
}
.tx-ask-body { min-inline-size: 0; }
.tx-ask-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.08rem + .6vw, 1.55rem);
  font-weight: 400; line-height: 1.18; color: #fff;
}
.tx-ask-body p {
  margin: var(--sp-3) 0 0;
  color: var(--on-dark-mute);
  font-size: var(--fs-sm);
  line-height: 1.65;
  max-width: 62ch;
}
.tx-ask-go { flex: none; white-space: nowrap; }


/* ---------------------------------------------------------------------------
   5 — ENQUIRY
   --------------------------------------------------------------------------- */
.tx-enq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 1.2rem + 4vw, 4.5rem);
  align-items: start;
}
.tx-enq-copy .lead { max-width: 46ch; }
.tx-enq-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.tx-enq-points li {
  position: relative; padding-inline-start: var(--sp-6);
  color: var(--ink-2); font-size: var(--fs-sm);
}
.tx-enq-points li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .5em;
  inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--gold-lite);
}
.tx-enq-alt { font-size: var(--fs-sm); color: var(--ink-3); }

.tx-enq-form { padding: clamp(1.5rem, 1.2rem + 1.8vw, 2.25rem); }
.tx-enq-form .btn { margin-block-start: var(--sp-6); }
.tx-enq-legal {
  margin-block-start: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.6;
}


/* ---------------------------------------------------------------------------
   6 — MORE THAN A PROCEDURE
   --------------------------------------------------------------------------- */
.tx-sups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .7rem + 1.4vw, 1.75rem);
}
.tx-sup {
  position: relative; overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--e-1);
  padding: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
}
.tx-sup-head {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: var(--sp-4);
  padding-block-end: var(--sp-4);
  border-block-end: 1px solid var(--line-2);
}
.tx-sup-n {
  position: absolute; inset-block-start: -.55em; inset-inline-end: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem);
  font-weight: 300; line-height: 1; color: var(--ink); opacity: .055;
  font-variant-numeric: tabular-nums; pointer-events: none; user-select: none;
}
.tx-sup-icon {
  display: grid; place-items: center;
  inline-size: 42px; block-size: 42px; border-radius: 12px;
  background: var(--gold-soft); color: #6B4E12;
}
.tx-sup-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem);
  font-weight: 400; letter-spacing: -0.012em; color: var(--ink);
}
.tx-sup-list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.tx-sup-list li {
  position: relative; padding-inline-start: var(--sp-6);
  font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6;
}
.tx-sup-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .55em;
  inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--gold-lite);
}


/* ---------------------------------------------------------------------------
   7 — WHAT WE DON'T ARRANGE
   --------------------------------------------------------------------------- */
.tx-decline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.tx-decline-list li {
  position: relative; padding-inline-start: var(--sp-7);
  color: var(--on-dark-mute); line-height: 1.65;
}
.tx-decline-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em;
  inline-size: 14px; block-size: 2px; background: var(--gold-lite); opacity: .75;
}


/* ---------------------------------------------------------------------------
   7b — SPECIALITY SELECTOR

   Six tiles, not six chapters. The page used to define every speciality
   whether you wanted it or not; now the tiles are the question and the
   catalogue below is the answer to the one you picked.

   Built from tokens that already exist — navy scale, --line, --r-md, the
   --sp scale — so it belongs to the same page it sits on.
   --------------------------------------------------------------------------- */
.tx-specbar {
  margin-block-start: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(.9rem, .7rem + .7vw, 1.25rem) clamp(.9rem, .7rem + .9vw, 1.35rem);
  box-shadow: 0 6px 18px rgba(6, 13, 28, .06);
}
.tx-specbar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-block-end: var(--sp-3);
}
.tx-specbar-lbl {
  margin: 0;
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
}
.tx-specbar-all {
  flex: none;
  min-block-size: 32px;
  padding-inline: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font: 600 var(--fs-xs)/1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.tx-specbar-all:hover { background: var(--ivory-2); color: var(--navy-800); }
.tx-specbar-all:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }
.tx-specbar-all.is-on {
  background: var(--navy-900); border-color: var(--navy-900); color: #fff;
}

.tx-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
.tx-tile {
  display: flex; align-items: center; gap: var(--sp-3);
  min-block-size: 56px;
  padding: var(--sp-3) var(--sp-4);
  text-align: start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
  font: 600 var(--fs-sm)/1.25 var(--font-body);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.tx-tile:hover { border-color: var(--navy-200); background: var(--ivory-2); }
.tx-tile:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }
.tx-tile-ico {
  flex: none; display: grid; place-items: center;
  inline-size: 34px; block-size: 34px;
  border-radius: 10px;
  background: var(--navy-50); color: var(--navy-700);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.tx-tile-ico svg { inline-size: 19px; block-size: 19px; }
.tx-tile-n { min-inline-size: 0; }

/* Active reads as "this is what you are looking at" — the same navy the
   chips used, so the state vocabulary of the page does not change. */
.tx-tile.is-on {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
  box-shadow: 0 8px 20px rgba(6, 13, 28, .18);
}
.tx-tile.is-on .tx-tile-ico { background: rgba(255, 255, 255, .12); color: var(--gold-lite); }

/* The catalogue is scrolled to on selection, so it must clear the sticky
   chrome. --chrome-h is the topbar + nav the rest of the site already
   measures itself against. */
.tx-cat, .tx-cats { scroll-margin-block-start: calc(var(--chrome-h, 72px) + var(--sp-5)); }
.tx-cats { margin-block-start: clamp(1.25rem, 1rem + 1.2vw, 2rem); }

/* Nothing chosen yet: the catalogue is simply not there, rather than being
   there and empty. */
.tx-cats[hidden] { display: none; }

@media (max-width: 64rem) {
  .tx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .tx-specbar { padding-inline: var(--sp-4); }
  .tx-specbar-head { margin-block-end: var(--sp-3); }
  .tx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .tx-tile { min-block-size: 52px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
  .tx-tile-ico { inline-size: 30px; block-size: 30px; }
  .tx-tile-ico svg { inline-size: 17px; block-size: 17px; }
}


/* ---------------------------------------------------------------------------
   8 — FOOTER PREFERENCES

   Deliberately empty. The control is now the homepage's own component,
   markup and all, so every rule that styles it already lives in site.css:
   .switch, .switch-btn, .switch-sym, .switch-menu--tokens, .opt-token,
   .opt-name. Restating any of them here would recreate the drift this
   section previously caused — a look-alike that shared no code with the
   thing it was imitating. The one consequence worth naming: site.css:1492
   sets `.footer .switch-btn { min-block-size: 36px }`, so the prototype now
   inherits that 36px exactly as the live pages do, including the sub-44px
   touch target. That is the site-wide issue already flagged for separate
   approval, and overriding it here alone would put the prototype back out of
   step with the source of truth.
   --------------------------------------------------------------------------- */


/* ===========================================================================
   RESPONSIVE

   Checked at 1440, 1280, 1024, 768, 414, 390 and 375. Mobile is a different
   composition, not a squeezed one: the discovery card stacks copy over the
   Concierge panel, the filter pills become a one-line scroll rail with edge
   fades, and every procedure row turns from a four-column table into a
   labelled block so the price and stay never collide at 375px.
   =========================================================================== */

/* -- 1280 ------------------------------------------------------------------ */
@media (max-width: 80rem) {
  .tx-hero-grid { gap: clamp(1.75rem, 1rem + 3vw, 3rem); }
  .tx-hero h1 { max-width: 20ch; }
  .tx-find-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* -- 1024 ------------------------------------------------------------------ */
@media (max-width: 64rem) {
  .tx-hero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1.5rem + 3vw, 2.75rem); }
  .tx-hero h1, .tx-hero .lead { max-width: none; }
  .tx-plate { max-inline-size: 34rem; }

  .tx-find-grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the panel is the foot of the card rather than its flank, so the
     rounded pair moves from the end edge to the bottom edge. */
  .tx-ai {
    border-block-start: 1px solid rgba(255, 255, 255, .12);
    border-start-end-radius: 0;
    border-end-start-radius: calc(var(--r-xl, 22px) - 1px);
    border-end-end-radius: calc(var(--r-xl, 22px) - 1px);
  }

  .tx-cat-intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .tx-record {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-inline-start: 0;
    border-inline-start: 0;
    padding-block-start: var(--sp-5);
    border-block-start: 1px solid var(--line);
  }

  .tx-proc { grid-template-columns: minmax(0, 1fr) 7.5rem 6rem 40px; }
  .tx-sups { grid-template-columns: minmax(0, 1fr); }
  .tx-enq-grid { grid-template-columns: minmax(0, 1fr); }
}

/* -- 768 ------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .tx-find-card { margin-block-start: clamp(-3rem, -2rem - 3vw, -2rem); }
  .tx-cat-head { grid-template-columns: auto minmax(0, 1fr); }
  .tx-cat-tally { grid-column: 2; margin-block-start: var(--sp-2); }
  .tx-cat-foot { flex-direction: column; align-items: stretch; }
  .tx-cat-foot .btn, .tx-cat-foot .link-arrow { justify-content: center; }

  .tx-ask { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--sp-5); }
  .tx-ask-go { grid-column: 1 / -1; justify-content: center; }
}

/* -- 640 and below: the intentional phone layout --------------------------- */
@media (max-width: 40rem) {
  .tx-plate { max-inline-size: none; }
  .tx-plate-cap { padding-inline: var(--sp-3); }
  .tx-hero-cta { flex-direction: column; align-items: stretch; }
  .tx-hero-cta .btn { justify-content: center; }
  .tx-assure { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }

  /* Wrapping seven pills at 375px produced three ragged rows and pushed the
     catalogue below the fold, so they become a rail. */
  .tx-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--sp-5) * -1);
    padding-inline: var(--sp-5);
    padding-block-end: var(--sp-2);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--sp-5), #000 calc(100% - var(--sp-5)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--sp-5), #000 calc(100% - var(--sp-5)), transparent 100%);
  }
  .tx-filters::-webkit-scrollbar { display: none; }
  .tx-filters .opt { flex: none; scroll-snap-align: start; }

  /* Procedure rows stop being a table: name on its own line, then the two
     figures side by side with their labels shown — which is why
     .tx-proc-lbl exists at all. */
  .tx-proc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    gap: var(--sp-2) var(--sp-4);
    padding-block: var(--sp-5);
  }
  .tx-proc-n { grid-column: 1 / -1; color: var(--ink); font-weight: 500; }
  .tx-proc-lbl { display: block; margin-block-end: 2px; }
  .tx-proc-from, .tx-proc-stay { font-size: var(--fs-sm); }
  .tx-proc-from strong { font-size: 1.05rem; }
  .tx-proc-go { grid-row: 2 / 3; grid-column: 3; align-self: center; }
  /* A finger needs the full target; a mouse does not. */
  .tx-proc-go { inline-size: 44px; block-size: 44px; }

  .tx-record { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .tx-sugg { max-block-size: 55vh; }
  .tx-sugg-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .tx-sugg-arr { display: none; }
  .tx-sup-list li { font-size: var(--fs-sm); }

  .tx-ask { grid-template-columns: minmax(0, 1fr); text-align: start; }
  .tx-ask-mark { inline-size: 46px; block-size: 46px; }

}

/* -- 414 / 390 / 375 ------------------------------------------------------- */
@media (max-width: 26.5rem) {
  .tx-find-card { border-radius: var(--r-lg); margin-block-start: -2rem; }
  .tx-find-main, .tx-ai { padding: var(--sp-5); }
  /* Card radius drops to --r-lg at this width; the panel has to follow it. */
  .tx-ai {
    border-end-start-radius: calc(var(--r-lg) - 1px);
    border-end-end-radius: calc(var(--r-lg) - 1px);
  }
  .tx-cat { padding: var(--sp-5); }
  .tx-cat-icon { inline-size: 40px; block-size: 40px; border-radius: 11px; }
  .tx-cat-icon svg { inline-size: 20px; block-size: 20px; }
  .tx-sup, .tx-enq-form { padding: var(--sp-5); }
  .tx-ask { padding: var(--sp-5); }
  .tx-plate-script { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.7rem); }
}


/* ---------------------------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tx-cat, .tx-cat::before, .tx-cat-icon, .tx-search-clear,
  .tx-proc, .tx-proc-go, .tx-sugg-row { transition: none; }
  .tx-proc.is-flash { animation: none; background: var(--gold-soft); }
}