/* ===========================================================================
   MEDYRA Concierge — prototype UI
   Scoped entirely under .mc-* . Loads after site.css and adds no rule that
   touches an existing selector, so it cannot alter the page it sits on.

   Built from the site's own tokens — navy, gold, ivory, Fraunces and Plex,
   the 4pt spacing scale, the existing radii and elevation steps. It should
   read as part of MEDYRA rather than as a widget dropped onto it: a hairline
   panel with a navy header, not a purple bubble with a robot icon.
   =========================================================================== */

/* --- launcher ------------------------------------------------------------ */
.mc-launch {
  position: fixed;
  inset-block-end: var(--sp-6);
  inset-inline-end: var(--sp-6);
  z-index: var(--z-overlay);
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid rgba(212, 175, 55, .38);
  border-radius: var(--r-pill);
  background: var(--navy-900);
  color: #F3F7FE;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
  box-shadow: var(--e-3);
  transition: background-color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
.mc-launch:hover { background: var(--navy-800); border-color: rgba(212, 175, 55, .7); transform: translateY(-1px); }
.mc-launch[hidden] { display: none; }

/* --- panel --------------------------------------------------------------- */
.mc-panel {
  position: fixed;
  inset-block-end: var(--sp-6);
  inset-inline-end: var(--sp-6);
  z-index: var(--z-overlay);
  inline-size: 24rem;
  /* Never wider than the screen it sits on. The panel is a fixed 24rem by
     design — a compact concierge, not a full-screen modal — but on a 375px
     handset 24rem plus its inset would hang off the edge and reintroduce the
     horizontal scroll this round removed. */
  max-inline-size: calc(100vw - 2rem);
  max-block-size: min(44rem, calc(100vh - 5rem));
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-4);
  overflow: hidden;
  font-family: var(--font-body);
}
.mc-panel[hidden] { display: none; }

.mc-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--navy-900);
  color: #F3F7FE;
  position: relative;
}
.mc-head::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .6), transparent);
}
.mc-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; margin: 0; }
.mc-sub { font-size: var(--fs-xs); color: var(--navy-200); margin: 2px 0 0; }
.mc-close {
  margin-inline-start: auto;
  inline-size: 2rem; block-size: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--navy-200); cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.mc-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* --- log ----------------------------------------------------------------- */
.mc-log {
  flex: 1 1 auto; min-block-size: 0;
  overflow-y: auto;
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
  background: var(--ivory);
}
.mc-msg { max-inline-size: 92%; font-size: var(--fs-sm); line-height: 1.6; }
.mc-msg p { margin: 0 0 var(--sp-3); }
.mc-msg p:last-child { margin-block-end: 0; }

.mc-msg--bot { align-self: flex-start; color: var(--ink); }
.mc-msg--bot .mc-bubble {
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  border-start-start-radius: var(--r-sm);
  padding: var(--sp-4);
}
.mc-msg--user { align-self: flex-end; }
.mc-msg--user .mc-bubble {
  background: var(--navy-700); color: #F3F7FE;
  border-radius: var(--r-md);
  border-end-end-radius: var(--r-sm);
  padding: var(--sp-4);
}
.mc-msg--note .mc-bubble {
  background: var(--gold-soft);
  border: 1px solid rgba(140, 101, 24, .2);
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

/* --- link chips ---------------------------------------------------------- */
.mc-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-3); }
.mc-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--navy-700); text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.mc-link:hover { border-color: rgba(212, 175, 55, .7); background: var(--ivory-2); }
.mc-link::after { content: "\2192"; color: var(--gold); }

/* --- typing -------------------------------------------------------------- */
.mc-typing { display: inline-flex; gap: 4px; padding: var(--sp-3) var(--sp-4); }
.mc-typing i {
  inline-size: 5px; block-size: 5px; border-radius: var(--r-pill);
  background: var(--ink-3); opacity: .35;
  animation: mcPulse 1.1s var(--ease-soft) infinite;
}
.mc-typing i:nth-child(2) { animation-delay: .15s; }
.mc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mcPulse { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }

/* --- composer ------------------------------------------------------------ */
.mc-form {
  display: flex; gap: var(--sp-3); align-items: flex-end;
  padding: var(--sp-4);
  border-block-start: 1px solid var(--line-2);
  background: var(--white);
}
.mc-input {
  flex: 1 1 auto; min-inline-size: 0;
  resize: none;
  font-family: inherit; font-size: var(--fs-sm); line-height: 1.5;
  color: var(--ink);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  max-block-size: 6rem;
}
.mc-input:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 1px; }
.mc-send {
  flex: none;
  inline-size: 2.5rem; block-size: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-sm);
  background: var(--navy-700); color: #fff; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out);
}
.mc-send:hover:not(:disabled) { background: var(--navy-600); }
.mc-send:disabled { opacity: .45; cursor: default; }


/* --- lead form ----------------------------------------------------------- */
.mc-lead { display: grid; gap: var(--sp-3); margin-block-start: var(--sp-3); }
.mc-lead input, .mc-lead textarea {
  font-family: inherit; font-size: var(--fs-sm);
  padding: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink);
}
.mc-lead textarea { resize: vertical; min-block-size: 3.5rem; }
.mc-lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.mc-lead-actions { display: flex; gap: var(--sp-3); align-items: center; }
.mc-btn {
  font-family: inherit; font-size: var(--fs-sm); font-weight: 500;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--navy-700); color: #fff; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out);
}
.mc-btn:hover:not(:disabled) { background: var(--navy-600); }
.mc-btn:disabled { opacity: .5; cursor: default; }
.mc-btn--quiet { background: transparent; color: var(--ink-3); border-color: var(--line); }
.mc-btn--quiet:hover { background: var(--ivory-2); color: var(--ink); }
.mc-err { color: var(--danger); font-size: var(--fs-xs); }


@media (prefers-reduced-motion: reduce) {
  .mc-launch, .mc-close, .mc-link, .mc-send, .mc-btn { transition: none; }
  .mc-typing i { animation: none; opacity: .5; }
}

/* ===========================================================================
   THREE VIEWS
   The panel now holds a menu, a chat and an enquiry form, one at a time.

   Why the chat lost its action bar: it stood permanently under the
   conversation, cost ~60px on every turn, and re-offered two things the
   visitor had already been shown on the way in. Answers here are routinely
   long, so that trade was backwards. WhatsApp and Send enquiry now live on
   the menu, one Back press away, and the conversation gets the space.

   The standalone floating WhatsApp button stays hidden — this widget owns
   the corner, and two competing floats is worse than either alone. It is
   hidden, not deleted: remove the concierge and it returns by itself. This
   is the only rule in this file outside the .mc-* namespace, and it is safe
   because concierge.css is loaded by the prototype page and nowhere else.
   =========================================================================== */
.whatsapp-fab { display: none; }

.mc-body { display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; }
.mc-view { display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; }
.mc-view[hidden] { display: none; }

/* --- head: back sits before the mark ------------------------------------- */
.mc-back {
  inline-size: 1.9rem; block-size: 1.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  margin-inline-end: calc(var(--sp-2) * -1);
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--navy-200); cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.mc-back:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.mc-back[hidden] { display: none; }
.mc-head-mark { display: inline-flex; color: #E7EDF7; flex: none; }
.mc-head-text { min-inline-size: 0; }

/* --- menu ----------------------------------------------------------------- */
.mc-view--menu { padding: var(--sp-5); gap: var(--sp-3); background: var(--ivory); }

.mc-choice {
  display: flex; align-items: center; gap: var(--sp-4);
  inline-size: 100%; text-align: start;
  padding: var(--sp-4) var(--sp-4);
  font-family: inherit;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
.mc-choice:hover, .mc-choice:focus-visible {
  border-color: rgba(212, 175, 55, .7);
  box-shadow: var(--e-2);
  transform: translateY(-1px);
}
.mc-choice-ico {
  inline-size: 2.5rem; block-size: 2.5rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: var(--navy-900); color: #F3F7FE;
}
.mc-choice--wa .mc-choice-ico { background: #128C4A; }
.mc-choice--lead .mc-choice-ico { background: var(--gold-soft); color: var(--gold); }
.mc-choice-body { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.mc-choice-t { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.mc-choice-b { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.35; }
.mc-choice-arr { margin-inline-start: auto; color: var(--ink-3); display: inline-flex; flex: none; }
.mc-choice:hover .mc-choice-arr { color: var(--gold); }

.mc-menu-note {
  margin: var(--sp-2) 0 0;
  font-size: 11px; line-height: 1.45; color: var(--ink-3);
}

/* --- chat ----------------------------------------------------------------- */
/* The log takes every pixel the panel can spare. */
.mc-view--chat .mc-log { flex: 1 1 auto; min-block-size: 0; }

.mc-chat-note {
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: 11px; line-height: 1.4; color: var(--ink-3);
  background: var(--white);
}

/* The inline enquiry offer — part of the conversation, not a fixed bar. */
.mc-offer-row { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-3); }
.mc-btn--sm {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  text-decoration: none;
  display: inline-flex; align-items: center;
}

/* --- enquiry --------------------------------------------------------------
   THE OVERFLOW FIX.

   The two-column rows were forcing a horizontal scrollbar: a grid item's
   default min-width is auto, and a bare <input> has an intrinsic minimum of
   about 195px from its default size attribute. Two of those plus the gap
   demanded 402px inside a 334px column, so the row simply refused to shrink
   and the panel scrolled sideways — taking the Send button out of reach.

   min-inline-size: 0 on the children is the actual fix; it lets the grid
   track do its job. Everything else here is tightening: smaller field
   padding, a shorter textarea and tighter gaps, so the whole form sits inside
   the same compact panel the menu and chat use, with no change to the panel's
   own dimensions and no full-screen modal. */
.mc-view--lead {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  overflow-x: hidden;          /* nothing may scroll sideways, ever */
  overflow-y: auto;            /* only if a very small viewport demands it */
  background: var(--ivory);
}
.mc-view--lead .mc-lead {
  margin-block-start: 0;
  gap: var(--sp-2);
  min-inline-size: 0;
  max-inline-size: 100%;
}
.mc-lead-intro {
  margin: 0 0 2px;
  font-size: 11.5px; line-height: 1.45; color: var(--ink-3);
}

/* Rows may shrink. This is the line that removes the horizontal scrollbar. */
.mc-view--lead .mc-lead-row { gap: var(--sp-2); min-inline-size: 0; }
.mc-view--lead .mc-lead-row > * { min-inline-size: 0; }

/* Compact but still comfortably tappable and readable. */
.mc-view--lead .mc-lead input,
.mc-view--lead .mc-lead textarea {
  inline-size: 100%;
  min-inline-size: 0;
  padding: 7px var(--sp-3);
  font-size: 13px;
  border-radius: var(--r-sm);
}
.mc-view--lead .mc-lead textarea { min-block-size: 2.6rem; block-size: 2.6rem; }
.mc-view--lead .mc-btn { padding: var(--sp-3) var(--sp-5); font-size: 13px; }
.mc-view--lead .mc-err { margin: 0; }

/* Narrow viewports: one column, still inside the panel. */
@media (max-width: 460px) {
  .mc-view--lead .mc-lead-row { grid-template-columns: minmax(0, 1fr); }
  .mc-panel, .mc-launch { inset-inline-end: var(--sp-4); }
  .mc-panel { inset-block-end: var(--sp-4); }
}
.mc-done { display: grid; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--ink); }
.mc-done .mc-btn { justify-self: start; }

@media (prefers-reduced-motion: reduce) {
  .mc-choice, .mc-back { transition: none; }
}


/* ===========================================================================
   v2 — THE CONCIERGE DESK
   Appended last, deliberately. Everything above stays as it was and this
   block refines it, which is the same convention the THREE VIEWS section
   above already follows — so the whole redesign reverts by deleting one
   block.

   WHAT WAS WRONG
   The widget was built from the right tokens but almost none of the site's
   devices. A navy pill with a sans label is what every support widget looks
   like; the three choices were three identical bordered rectangles, so the
   assistant, the phone line and the form all carried exactly the same
   weight; the one strong colour statement was WhatsApp's green, a
   third-party brand sitting in the middle of a navy and gold system; the
   header was flat fill; the panel appeared instantly where every other
   surface on this site moves; and the type was almost entirely body sans,
   in a design whose identity is editorial serif against tracked small caps.

   WHAT REPLACES IT
   The site's own vocabulary, reused rather than reinvented:
     the masked gold gradient ring from .estimator--lit, on the medallion;
     the breathing cycle from estBreathe, on the launcher only;
     the eyebrow -> serif heading -> body record order from every section;
     the gold-tinted icon plate that flips to navy, from .treat-suite;
     the leading gold edge that grows on approach, from .treat-suite;
     the lift-and-shift hover from .steps--thread;
     the brand lockup — tracked caps over Fraunces — from .brand-name.
   No new colour, no new radius, no new shadow, no new easing.
   =========================================================================== */

/* --- the medallion -------------------------------------------------------
   One component, used by the launcher and by the panel header, so the thing
   you press and the thing you land on are visibly the same object. */
.mc-medal {
  position: relative;
  flex: none;
  inline-size: 2.6rem; block-size: 2.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(125% 125% at 30% 18%, var(--navy-700) 0%, var(--navy-950) 74%);
  color: #E7EDF7;
}
/* The gold ring, drawn as a masked gradient so it reads as metal rather than
   as a flat 1px outline. Same technique as the estimator's lit perimeter. */
.mc-medal::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(140deg,
    rgba(233, 206, 131, .90) 0%,
    rgba(255, 246, 214, 1)   24%,
    rgba(201, 153, 47, .68)  52%,
    rgba(255, 246, 214, .90) 76%,
    rgba(233, 206, 131, .85) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
/* Only the stroked meridians dim; the gold point keeps its full value. */
.mc-medal .mc-mark [stroke] { opacity: .58; }

/* --- launcher ------------------------------------------------------------- */
.mc-launch {
  gap: var(--sp-3);
  padding: 7px var(--sp-5) 7px 7px;
  border: 1px solid rgba(212, 175, 55, .34);
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-950) 82%);
  box-shadow: var(--e-3), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: border-color var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-soft);
}
.mc-launch:hover,
.mc-launch:focus-visible {
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-900) 82%);
  border-color: rgba(212, 175, 55, .82);
  box-shadow: var(--e-4), inset 0 1px 0 rgba(255, 255, 255, .09);
  transform: translateY(-2px);
}
.mc-launch:focus-visible { outline: 2px solid var(--gold-lite); outline-offset: 3px; }

.mc-launch-medal { inline-size: 2.35rem; block-size: 2.35rem; }

/* The breath. One slow cycle on the ring, well below flicker rate, and the
   only thing here that moves by itself — the panel hides the launcher when
   it opens, so it can never compete with a conversation being read. */
@keyframes mcBreathe {
  0%, 100% { opacity: 0;  transform: scale(.92); }
  50%      { opacity: .5; transform: scale(1.08); }
}
.mc-launch-medal::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, .55);
  pointer-events: none;
  animation: mcBreathe 6s cubic-bezier(.45, 0, .55, 1) infinite;
}

.mc-launch-text {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; line-height: 1; text-align: start;
}
.mc-launch-eyebrow {
  font-size: .5625rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-lite);
}
.mc-launch-name {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 400; letter-spacing: -.005em;
  color: #F6F9FF;
}

/* --- panel ---------------------------------------------------------------- */
@keyframes mcPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(.965); }
  to   { opacity: 1; transform: none; }
}
.mc-panel {
  border-color: var(--line-2);
  box-shadow: var(--e-4), 0 0 0 1px rgba(10, 23, 48, .05);
  transform-origin: 100% 100%;
  /* backwards, not both: `both` would freeze transform at the end frame and
     silently kill every hover translate inside the panel for the rest of the
     session. This fill only reaches backwards, before the animation starts. */
  animation: mcPanelIn var(--dur-3) var(--ease-soft) backwards;
}

/* --- head ----------------------------------------------------------------- */
.mc-head {
  padding: var(--sp-4);
  gap: var(--sp-3);
  background:
    radial-gradient(130% 190% at 86% -40%, rgba(58, 93, 160, .40) 0%, transparent 62%),
    linear-gradient(135deg, var(--navy-800) 0%, var(--navy-950) 84%);
}
/* The letterhead rule: gold across the top edge of the panel, brightest at
   the centre. A printed masthead, not a chat header. */
.mc-head::before {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg,
    rgba(201, 153, 47, 0) 0%,
    rgba(233, 206, 131, .95) 20%,
    rgba(255, 246, 214, 1) 50%,
    rgba(233, 206, 131, .95) 80%,
    rgba(201, 153, 47, 0) 100%);
}
.mc-head::after { background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .42), transparent); }

.mc-head-mark { inline-size: 2.35rem; block-size: 2.35rem; color: #E7EDF7; }

.mc-title {
  font-family: var(--font-display);
  font-size: 1.12rem; font-weight: 400;
  letter-spacing: -.012em; line-height: 1.15;
  color: #FFFFFF;
}
/* Tracked small caps, the site's label voice, in place of a sentence-case
   subtitle. It states which of the three rooms you are standing in. */
.mc-sub {
  margin: 4px 0 0;
  font-size: .5875rem; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: rgba(226, 190, 106, .95);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mc-back, .mc-close {
  inline-size: 1.9rem; block-size: 1.9rem;
  border: 1px solid rgba(255, 255, 255, .13);
  color: #C6D4EC;
}
.mc-back:hover, .mc-close:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(212, 175, 55, .60);
  color: #fff;
}
.mc-back:focus-visible, .mc-close:focus-visible {
  outline: 2px solid var(--gold-lite); outline-offset: 2px;
}

/* --- the menu: a register, not three buttons ------------------------------
   The three sit on one ruled list on a single ground, each a record with its
   own eyebrow, name and line. Read down, they are three doors of equal
   standing — which is the decision this widget was built on — but they are
   no longer three identical rectangles. */
.mc-view--menu {
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  gap: 0;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--white) 68%);
}

@keyframes mcRowIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.mc-view--menu .mc-choice {
  position: relative;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-3);
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  box-shadow: none;
  transition: background-color var(--dur-3) var(--ease-out),
              box-shadow 380ms var(--ease-soft),
              transform 380ms var(--ease-soft);
  animation: mcRowIn 420ms var(--ease-soft) backwards;
}
.mc-view--menu .mc-choice:nth-of-type(1) { animation-delay: 70ms; }
.mc-view--menu .mc-choice:nth-of-type(2) { animation-delay: 140ms; }
.mc-view--menu .mc-choice:nth-of-type(3) { animation-delay: 210ms; }

/* The hairline between records. It fades under the row being read, so the
   hovered card lifts clear of the list instead of staying stitched into it. */
.mc-view--menu .mc-choice + .mc-choice::before {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline: var(--sp-3);
  block-size: 1px; background: var(--line-2);
  transition: opacity var(--dur-2) var(--ease-out);
}
.mc-view--menu .mc-choice:hover + .mc-choice::before,
.mc-view--menu .mc-choice:focus-visible + .mc-choice::before,
.mc-view--menu .mc-choice:hover::before,
.mc-view--menu .mc-choice:focus-visible::before { opacity: 0; }

/* The leading gold edge, growing downward on approach. */
.mc-view--menu .mc-choice::after {
  content: "";
  position: absolute; inset-block: 8px; inset-inline-start: 0;
  inline-size: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-lite), rgba(212, 175, 55, 0));
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-4) var(--ease-soft);
}
.mc-view--menu .mc-choice:hover::after,
.mc-view--menu .mc-choice:focus-visible::after { transform: scaleY(1); }

.mc-view--menu .mc-choice:hover,
.mc-view--menu .mc-choice:focus-visible {
  background: var(--white);
  box-shadow: 0 2px 4px rgba(9, 40, 36, .04), 0 14px 30px -18px rgba(9, 40, 36, .26);
  transform: translateX(3px);
}
.mc-view--menu .mc-choice:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 1px; }

/* The plate: gold-tinted at rest so the three read warm rather than as three
   navy chips, taking navy on approach. WhatsApp's green appears on that one
   plate and only on hover — recognisable where it is useful, and never a
   foreign block sitting in the middle of the panel. */
.mc-view--menu .mc-choice .mc-choice-ico {
  inline-size: 2.6rem; block-size: 2.6rem;
  margin-block-start: 2px;
  border-radius: var(--r-sm);
  background: var(--gold-soft);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(140, 101, 24, .16);
  transition: background-color var(--dur-3) var(--ease-out),
              color var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out);
}
.mc-view--menu .mc-choice:hover .mc-choice-ico,
.mc-view--menu .mc-choice:focus-visible .mc-choice-ico {
  background: var(--navy-800); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.mc-view--menu .mc-choice--wa:hover .mc-choice-ico,
.mc-view--menu .mc-choice--wa:focus-visible .mc-choice-ico {
  background: #128C4A;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.mc-choice-body { gap: 3px; padding-block-start: 1px; }
.mc-choice-tag {
  font-size: .5625rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}
.mc-choice-t {
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 400;
  letter-spacing: -.012em; line-height: 1.2;
  color: var(--ink);
}
.mc-choice-b { font-size: 12.5px; line-height: 1.42; color: var(--ink-3); }

.mc-choice-arr {
  margin-block-start: .55rem;
  color: var(--line);
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.mc-view--menu .mc-choice:hover .mc-choice-arr,
.mc-view--menu .mc-choice:focus-visible .mc-choice-arr {
  color: var(--gold); transform: translateX(3px);
}

/* The standing note, ruled off and marked, so it reads as a considered
   footnote rather than as text left at the bottom of the panel. */
.mc-menu-note {
  position: relative;
  margin: var(--sp-4) var(--sp-3) 0;
  padding-block-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-block-start: 1px solid var(--line-2);
  font-size: 10.5px; line-height: 1.5;
  color: var(--ink-3);
  animation: mcRowIn 420ms var(--ease-soft) 280ms backwards;
}
.mc-menu-note::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--sp-4) + 6px);
  inset-inline-start: 0;
  inline-size: 5px; block-size: 5px;
  border-radius: 50%;
  background: var(--gold-lite);
}

/* --- chat ------------------------------------------------------------------
   The bot speaks from a ruled gold edge, the visitor from a navy block. The
   two voices are told apart by structure rather than by two coloured blobs. */
.mc-msg--bot .mc-bubble {
  border-inline-start: 2px solid rgba(212, 175, 55, .55);
  border-start-start-radius: 2px;
  border-end-start-radius: 2px;
}
.mc-msg--user .mc-bubble {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-800));
}
.mc-link:hover { border-color: rgba(212, 175, 55, .75); }

.mc-input { transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.mc-input:focus-visible {
  outline: none;
  border-color: rgba(212, 175, 55, .70);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .16);
}

/* Send is the one gold control in the conversation — the site's own gold
   gradient on ink, exactly as .btn--gold pairs them. */
.mc-send {
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #F4E09B 0%, #D9B65C 32%, #C9A227 62%, #A67C1B 100%);
  color: #060D1C;
  box-shadow: var(--e-1);
  transition: filter var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.mc-send:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--e-2); }

.mc-chat-note { padding-inline: var(--sp-4); color: var(--ink-3); }

/* --- enquiry ---------------------------------------------------------------
   The compact geometry here is load-bearing — min-inline-size: 0 on the grid
   children is what keeps this form from scrolling sideways — so this changes
   surface only, never the sizing that fix depends on. */
.mc-view--lead { background: linear-gradient(180deg, var(--ivory) 0%, var(--white) 60%); }
.mc-lead-intro { color: var(--ink-3); }
.mc-view--lead .mc-lead input,
.mc-view--lead .mc-lead textarea {
  border-color: var(--line);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.mc-view--lead .mc-lead input:focus-visible,
.mc-view--lead .mc-lead textarea:focus-visible {
  outline: none;
  border-color: rgba(212, 175, 55, .70);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .16);
}
/* The submit is the end of the road, so it carries the gold. */
.mc-view--lead .mc-lead > .mc-btn:not(.mc-btn--quiet) {
  background: linear-gradient(135deg, #F4E09B 0%, #D9B65C 32%, #C9A227 62%, #A67C1B 100%);
  color: #060D1C;
  font-weight: 600;
}
.mc-view--lead .mc-lead > .mc-btn:not(.mc-btn--quiet):hover:not(:disabled) { filter: brightness(1.08); }

/* --- narrow viewports ------------------------------------------------------
   The panel spans gutter to gutter rather than keeping a fixed 24rem that
   would hang off a 375px handset. Both insets are set and the width released,
   so it can only ever be exactly as wide as the space between them. */
@media (max-width: 460px) {
  .mc-panel {
    inset-inline: var(--sp-4);
    inline-size: auto;
    max-inline-size: none;
    max-block-size: min(44rem, calc(100dvh - 4.5rem));
  }
  .mc-view--menu { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
  .mc-view--menu .mc-choice { padding: var(--sp-4) var(--sp-2); gap: var(--sp-3); }
}

/* Below this the label costs more room than it earns. The medallion alone is
   unambiguous, and the button keeps its accessible name either way. */
@media (max-width: 400px) {
  .mc-launch { padding: 7px; }
  .mc-launch-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-launch-medal::after { animation: none; opacity: .32; transform: none; }
  .mc-panel,
  .mc-view--menu .mc-choice,
  .mc-menu-note { animation: none; }
  .mc-view--menu .mc-choice,
  .mc-view--menu .mc-choice::after,
  .mc-choice-arr,
  .mc-launch { transition: none; }
}


/* ===========================================================================
   v3 — LAUNCHER AMBIENT SIGNAL + STABLE PANEL HEIGHT
   Two fixes only, appended last per this file's own convention: nothing
   above is edited, so this reverts by deleting the block. concierge.js is
   untouched — both fixes are CSS-only.
   =========================================================================== */

/* --- 1. the launcher's ambient presence, take three -------------------------
   Redone again: a blurred bloom bleeding onto the PAGE reads clearly against
   navy sections but goes almost flat against a white one — gold on white is
   inherently low-contrast, and no amount of tuning the blur fixes that
   without making it "stronger," which the brief explicitly ruled out. The
   fault was relying on an effect anchored to the page's background instead
   of the button's own.

   Everything below is anchored to the pill itself instead, so it reads the
   same regardless of what the page behind it is doing:

     a travelling gold highlight riding the pill's own existing 1px border
     (.mc-launch::after) — the exact device already proven on the homepage
     hero credential (see .hero-credential::after in site.css: one bright
     point of light circling a border, not a border that glows). Framed by
     the pill's own navy fill on one side, it has consistent contrast
     whatever sits on the other side of that edge;

     a combined float + breathe on the pill itself (transform only — see the
     .mc-launch rule below): roughly 1.5px of vertical drift and 1% of
     scale, both slow enough to read as organic rather than as motion;

     a box-shadow that breathes between two states, carrying two jobs in one
     declaration: the dark, ambient layers are what separates the pill from
     a white section (a shadow gets more visible as it deepens against
     light), and the thin gold ring layer alongside them is what carries the
     brand accent on a navy section, brightening in step.

   Three independent, non-matching periods (8.6s / 9.2s / 11.4s) rather than
   one shared one, so the three never lock into a visible, mechanical beat —
   closer to breathing than to an animation loop. */
.mc-launch {
  box-shadow:
    0 2px 6px rgba(6, 13, 28, .16),
    0 10px 22px -10px rgba(6, 13, 28, .28),
    0 0 0 1px rgba(212, 175, 55, .12),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: mcFloat 9.2s ease-in-out infinite,
             mcElevate 11.4s ease-in-out infinite;
}
@keyframes mcFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1.5px) scale(1.01); }
}
@keyframes mcElevate {
  0%, 100% {
    box-shadow:
      0 2px 6px rgba(6, 13, 28, .16),
      0 10px 22px -10px rgba(6, 13, 28, .28),
      0 0 0 1px rgba(212, 175, 55, .12),
      inset 0 1px 0 rgba(255, 255, 255, .07);
  }
  50% {
    box-shadow:
      0 5px 12px rgba(6, 13, 28, .22),
      0 18px 36px -12px rgba(6, 13, 28, .34),
      0 0 0 1px rgba(212, 175, 55, .26),
      inset 0 1px 0 rgba(255, 255, 255, .09);
  }
}

/* Hover/focus stops both ambient loops rather than letting them fight the
   elevation rule above this block: a running animation keeps priority over
   a plain cascade value even for a :hover selector, the same reason this
   has needed fixing twice before. Nothing here restates transform or
   box-shadow — the rule above already sets both, and with the animation
   cleared it is simply free to apply on its own. */
.mc-launch:hover,
.mc-launch:focus-visible {
  animation: none;
}

/* The registered custom property is what makes --mc-ang interpolate as an
   angle (sweeping) rather than stepping straight from 0deg to 360deg; where
   @property is unsupported the var() fallback below still renders a single
   static, faint glint at the top of the ring rather than nothing. */
@property --mc-ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.mc-launch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--mc-ang, 0deg),
    rgba(244, 227, 168, 0)    0deg,
    rgba(244, 227, 168, 0)    232deg,
    rgba(244, 227, 168, .12)  286deg,
    rgba(233, 206, 131, .48)  322deg,
    rgba(255, 246, 214, .95)  342deg,
    rgba(244, 227, 168, .20)  352deg,
    rgba(244, 227, 168, 0)    360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: mcRingShimmer 8.6s linear infinite;
}
@keyframes mcRingShimmer { to { --mc-ang: 360deg; } }

/* --- 2. one stable panel height across all three views ---------------------
   Measured before this change: menu 468px, chat 461px, lead 389px, all at
   the panel's own 384px width — the enquiry view was 79px shorter than the
   menu it was opened from. The menu is the fullest view and the one the
   panel already opens to, so it is the baseline.

   A fixed block-size, clamped for short viewports exactly as the existing
   max-block-size already was, replaces the old shrink-to-fit sizing, so the
   panel no longer resizes itself when the visible view changes.

   No per-view height was added anywhere. .mc-body and .mc-view already
   carry `flex: 1 1 auto; min-block-size: 0` (see THE THREE VIEWS section
   above) — once the panel itself has a definite height, that existing rule
   alone makes whichever view is showing stretch to fill it: the chat log
   already flexes to take the freed space and keeps its own internal scroll,
   and the enquiry view's own `overflow-y: auto` still guards a very short
   viewport exactly as before. 472px (29.5rem) rather than the measured
   468px is a 4px rounding margin, so the reference view itself — menu — is
   never clipped by the panel's own `overflow: hidden`. */
.mc-panel {
  block-size: min(29.5rem, calc(100vh - 5rem));
}

@media (max-width: 460px) {
  .mc-panel {
    block-size: min(29.5rem, calc(100dvh - 4.5rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-launch { animation: none; }
  .mc-launch::after { animation: none; }
}


/* ===========================================================================
   v4 — LAUNCHER ORBIT, STABLE HEADER GRID, EDITORIAL MENU
   Three fixes only, appended last per this file's own convention. Panel
   height (v3, above) is untouched. concierge.js is untouched — everything
   here is CSS-only; the menu's understated numbering is a CSS counter, not
   a markup change.
   =========================================================================== */

/* --- the medal's orbital arc ------------------------------------------------
   Supersedes the earlier full-ring "breathe" (v2, above): a full ring
   fading in and out read as a notification pulse. A short arc travelling
   continuously around the same ring instead reads as something
   coordinating — steady motion on a fixed track, never growing, shrinking
   or leaving its circle, so it cannot be mistaken for a badge or an alert.
   Same masked-ring technique as .mc-medal::before, applied to a rotating
   conic-gradient instead of a static linear one. */
.mc-launch-medal::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(212, 175, 55, 0) 0deg,
    rgba(233, 206, 131, .95) 26deg,
    rgba(212, 175, 55, 0) 70deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #fff calc(100% - 1.6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #fff calc(100% - 1.6px));
  pointer-events: none;
  animation: mcOrbit 14s linear infinite;
}
@keyframes mcOrbit { to { transform: rotate(360deg); } }

/* This selector already has an earlier reduced-motion rule (v2, above) built
   for the old ring-fade; because this new rule is unconditional and comes
   after it in the file, it would otherwise win even for reduced-motion
   users and silently re-enable rotation. Restating the override here, last,
   keeps reduced motion the final word. */
@media (prefers-reduced-motion: reduce) {
  .mc-launch-medal::after { animation: none; }
}

/* --- header: a fixed grid, not a flowing row --------------------------------
   The back button toggles via [hidden] (display: none). In a flex row that
   closes the gap it used to occupy and every sibling after it — the mark,
   the title — shifts left to fill it, which was the 34px jump between the
   menu and any other view. A grid column defined by a fixed length doesn't
   do that: the track keeps its own width whether or not the item assigned
   to it exists, so column 1 stays 1.9rem wide with or without a back button
   inside it, and the mark and title beside it never move. This replaces the
   negative margin .mc-back used to carry (that was compensating for the old
   flex gap by hand); the grid track now reserves that space itself, so the
   hack is removed rather than layered under a new fix. */
.mc-head {
  display: grid;
  grid-template-columns: 1.9rem 2.35rem minmax(0, 1fr) 1.9rem;
  column-gap: var(--sp-3);
  row-gap: 0;
}
.mc-back      { grid-column: 1; justify-self: start; margin-inline-end: 0; }
.mc-head-mark { grid-column: 2; }
.mc-head-text { grid-column: 3; min-inline-size: 0; }
.mc-close     { grid-column: 4; justify-self: end; }

/* --- the menu, redrawn as an editorial register -----------------------------
   Ruled and staggered as it already was, the row was still bordered,
   shadowed and icon-plated — a plate is a plate, and three of them still
   read as "three cards." This removes what's left of that: the icon's
   filled square, the row's rounded corners, and the hover lift-with-shadow.
   What replaces them is typographic and linear rather than another surface:
   a slim glyph instead of a plate; an understated ledger number folded into
   the existing eyebrow line (a CSS counter, not new markup); a hairline
   that now runs the row's full width rather than stopping at its padding;
   and a hover state that is a soft directional wash plus the arrow-slide
   and growing gold edge already here — motion along a line, not a card
   lifting off the page. */
.mc-view--menu { counter-reset: mcchoice; }
.mc-view--menu .mc-choice { counter-increment: mcchoice; }

.mc-view--menu .mc-choice {
  padding-inline: var(--sp-4);
  border-radius: 0;
}

/* The hairline now spans the row's own edges rather than stopping var(--sp-3)
   short of them — a rule across the page, not a card boundary. */
.mc-view--menu .mc-choice + .mc-choice::before { inset-inline: 0; }

/* A directional wash in place of a lifted white card: the row highlights
   where it stands. No transform, no box-shadow — the leading gold edge and
   the arrow (both unchanged, below) already carry the "this moves" signal,
   so the row itself no longer needs to. */
.mc-view--menu .mc-choice:hover,
.mc-view--menu .mc-choice:focus-visible {
  background: linear-gradient(90deg, rgba(212, 175, 55, .08), rgba(212, 175, 55, 0) 65%);
  box-shadow: none;
  transform: none;
}

/* The plate is gone: a slim glyph sized to itself and coloured rather than
   boxed. Still recognisable — WhatsApp still turns its own green on
   approach — without reading as an app icon. */
.mc-view--menu .mc-choice .mc-choice-ico {
  inline-size: auto; block-size: auto;
  margin-block-start: 3px;
  background: none;
  color: var(--gold);
  box-shadow: none;
  transition: color var(--dur-3) var(--ease-out);
}
.mc-view--menu .mc-choice:hover .mc-choice-ico,
.mc-view--menu .mc-choice:focus-visible .mc-choice-ico {
  background: none;
  color: var(--navy-800);
  box-shadow: none;
}
.mc-view--menu .mc-choice--wa:hover .mc-choice-ico,
.mc-view--menu .mc-choice--wa:focus-visible .mc-choice-ico {
  background: none;
  color: #128C4A;
  box-shadow: none;
}

/* The understated number: a ledger entry, not a badge, folded into the
   existing eyebrow line rather than floating free — which also keeps it
   well clear of the arrow in a panel this narrow. */
.mc-view--menu .mc-choice-tag::before {
  content: counter(mcchoice, decimal-leading-zero) "  \00b7  ";
  color: var(--ink-3);
  letter-spacing: 0;
  font-weight: 600;
}

.mc-view--menu .mc-choice-body { gap: 4px; }
.mc-view--menu .mc-choice-b { max-inline-size: 30ch; }