/* ============================================================
   components.css — Buttons, badges, logo, shared UI atoms
   ============================================================ */

/* ---------- Buttons (editorial, fine-tracked) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 1rem 1.9rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--dark {
  background: var(--color-brand);
  color: var(--color-warm-white);
}
.btn--dark:hover { background: var(--color-brand-soft); box-shadow: var(--shadow-md); }

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn--outline:hover { background: var(--color-brand); color: var(--color-warm-white); }

.btn--sage  { background: var(--color-sage);  color: #fff; }
.btn--sage:hover  { background: var(--color-sage-mid); box-shadow: var(--shadow-md); }

.btn--ocean { background: var(--color-ocean); color: #fff; }
.btn--ocean:hover { background: var(--color-ocean-mid); box-shadow: var(--shadow-md); }

.btn--earth { background: var(--color-earth); color: #fff; }
.btn--earth:hover { background: #8d6c46; box-shadow: var(--shadow-md); }

.btn--light {
  background: var(--color-warm-white);
  color: var(--color-ink);
}
.btn--light:hover { background: #fff; box-shadow: var(--shadow-md); }

.btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

.btn--block { width: 100%; }

/* ---------- Logo mark ----------
   The client's own mark (assets/images/brand/logo-mark.png: the exact pixels
   of her file with the background lifted out) used as a mask, so it takes the
   colour of wherever it sits: ink in the header, cream on photos and the footer. */
.logo-mark { display: block; }
.logo-glyph {
  display: block; width: 100%; aspect-ratio: 232 / 54;
  background: currentColor;
  -webkit-mask: url('../images/brand/logo-mark.png') center / contain no-repeat;
          mask: url('../images/brand/logo-mark.png') center / contain no-repeat;
}
/* On dark surfaces the mark keeps the cream of the original file */
.footer .logo-glyph, .doors__brand .logo-glyph, .hero .logo-glyph { color: #f6efdc; }

/* ---------- Eyebrow / pill ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
  border-radius: var(--radius);
  background: var(--color-sage-pale);
  color: var(--color-sage);
}
.pill--ocean { background: var(--color-ocean-pale); color: var(--color-ocean); }
.pill--earth { background: var(--color-earth-pale); color: var(--color-earth); }

/* ---------- Divider ---------- */
.divider {
  width: 56px;
  height: 1px;
  background: var(--color-earth-light);
  margin-block: 1.25rem;
}
.divider--center { margin-inline: auto; }

/* ---------- Card (generic) ---------- */
.card {
  background: var(--color-warm-white);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

/* ---------- Credentials list ---------- */
.cred-list { display: grid; gap: 0.85rem; }
.cred-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  font-size: 0.95rem;
}
.cred-list li::before {
  content: '';
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
  border-radius: 50%;
  background:
    var(--color-sage-pale)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5e4a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 11px no-repeat;
  flex-shrink: 0;
}

/* ---------- Town sub-section (communities page) ---------- */
.town-block {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--color-rule);
}
.town-block:nth-child(even) { direction: rtl; }
.town-block:nth-child(even) > * { direction: ltr; }
.town-block__img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
}
.town-block h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.5rem; }

@media (max-width: 760px) {
  .town-block,
  .town-block:nth-child(even) { grid-template-columns: 1fr; direction: ltr; }
}

/* ---------- Review card (testimonials page) ---------- */
.review {
  background: var(--color-warm-white);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: 2rem;
  break-inside: avoid;
}
.review__stars { color: var(--color-earth-light); margin-bottom: 0.85rem; letter-spacing: 0.12em; }
.review__quote { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--color-ink); margin-bottom: 1.25rem; }
.review__meta { display: flex; align-items: center; gap: 0.85rem; }
.review__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--color-sage); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 0.85rem; flex-shrink: 0; }

.reviews-masonry {
  columns: 3 280px;
  column-gap: 1.5rem;
}
.reviews-masonry .review { margin-bottom: 1.5rem; }

/* ---------- Info list (contact) ---------- */
.info-list { display: grid; gap: 1.5rem; }
.info-list__item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.info-list__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--color-sage-pale); color: var(--color-sage); display: grid; place-items: center; flex-shrink: 0; }
.info-list__icon svg { width: 18px; height: 18px; }
.info-list__label { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-40); font-weight: 600; }
.info-list__value { font-size: 1.02rem; color: var(--color-ink); }
.info-list__value a:hover { color: var(--color-sage); }

/* ============================================================
   CONTACT DOCK (built by main.js) — bottom bar on phones,
   "Talk to Amanda" pill on desktop. Shown after the first screen.
   ============================================================ */
.dock { position: fixed; z-index: 900; pointer-events: none; }
.dock svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.dock.is-shown { pointer-events: auto; }

/* Desktop pill */
.dock { right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); }
.dock__bar { display: none; }
.dock__pill {
  display: flex; align-items: center; gap: 0.75rem; font: inherit; cursor: pointer;
  background: var(--color-brand); color: var(--color-warm-white); border: 1px solid rgba(246,239,220,0.22);
  border-radius: 999px; padding: 0.45rem 1.4rem 0.45rem 0.45rem;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.dock.is-shown .dock__pill { opacity: 1; transform: none; }
.dock:not(.is-shown) .dock__pill { visibility: hidden; transition-property: opacity, transform, visibility; }
.dock__face {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--color-sage) 0 50%, var(--color-ocean) 50% 100%);
  font-family: var(--font-display); font-size: 1.1rem; color: #fff; overflow: hidden;
}
.dock__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.dock__label { font-size: 0.95rem; font-weight: 500; white-space: nowrap; }
/* Phone bar */
@media (max-width: 760px) {
  .dock { left: 0; right: 0; bottom: 0; }
  .dock__pill { display: none; }
  .dock__bar {
    display: grid; grid-template-columns: 1.15fr 0.9fr 0.9fr 1.25fr; gap: 1px;
    background: var(--color-rule); border-top: 1px solid var(--color-rule);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -10px 30px -12px rgba(30,28,24,0.25);
    transform: translateY(110%); transition: transform 0.45s var(--ease);
  }
  .dock.is-shown .dock__bar { transform: none; }
  .dock__bar a, .dock__bar .dock__me {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 58px; background: var(--color-warm-white); color: var(--color-ink);
    font-size: 0.95rem; font-weight: 500;
  }
  .dock__bar .dock__primary { background: var(--color-earth); color: #fff; }
  .dock__me { font: inherit; border: 0; cursor: pointer; }
  .dock__me .dock__face { width: 28px; height: 28px; flex: 0 0 auto; }
  .dock__bar a, .dock__bar .dock__me { gap: 0.4rem; padding: 0 0.4rem; font-size: 0.9rem; white-space: nowrap; min-width: 0; }
  .dock__card { position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(58px + 0.75rem + env(safe-area-inset-bottom, 0px)); width: auto; }
  body.has-dock { padding-bottom: 58px; }
}
/* Amanda's card: opens from the pill or the phone bar */
.dock__card {
  position: absolute; right: 0; bottom: calc(100% + 0.75rem); width: 21rem;
  background: var(--color-warm-white); color: var(--color-ink); border-radius: 18px; padding: 1.25rem;
  box-shadow: 0 30px 60px -20px rgba(16,39,42,0.45), 0 0 0 1px rgba(16,39,42,0.08);
  transform-origin: 90% 100%; animation: cardIn 0.35s var(--ease-out-expo);
}
.dock__card[hidden] { display: none; }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.dock__close { position: absolute; top: 0.6rem; right: 0.6rem; width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--color-ink-70); display: grid; place-items: center; cursor: pointer; }
.dock__close:hover { background: var(--color-cream, #f3eee4); }
.dock__who { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; padding-right: 2rem; }
.dock__face--lg { width: 64px; height: 64px; }
.dock__who b { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; line-height: 1.1; }
.dock__who span { font-size: 0.85rem; color: var(--color-ink-70); }
.dock__ways { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.dock__ways a:first-child { grid-column: 1 / -1; }
.dock__ways a, .dock__value {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.85rem; border-radius: 12px;
  border: 1px solid var(--color-rule); font-size: 0.92rem; color: var(--color-ink); transition: border-color var(--transition-fast), background var(--transition-fast);
}
.dock__ways a:hover, .dock__value:hover { border-color: var(--color-brand); background: var(--color-warm-white); }
.dock__value { margin-top: 0.5rem; background: var(--color-brand); border-color: var(--color-brand); color: var(--color-warm-white); }
.dock__value:hover { background: var(--color-brand-deep); color: #fff; }
.dock__social { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--color-rule); font-size: 0.85rem; color: var(--color-ink-70); }
.dock__social .social-row { gap: 0.5rem; }
.dock__social .social-row a { width: 40px; height: 40px; }
.dock.is-open .dock__pill .dock__label::after { content: ''; }
.social-row svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.social-row svg.ico-fill { fill: currentColor; stroke: none; }
.social-row .ico-dot { fill: currentColor; stroke: none; }
.social-row a.is-unset { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .dock__pill, .dock__bar { transition: none; }
  .dock__card { animation: none; }
}

/* Visually hidden, still read by screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Card tilt (main.js) ---------- */
.town-card, .tcard { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.town-card.is-tilting, .tcard.is-tilting { transition: transform 0.12s linear, box-shadow 0.3s var(--ease); box-shadow: 0 30px 50px -25px rgba(16,39,42,0.55); }
.town-card::after, .tcard::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 0.3s var(--ease);
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,0.28), transparent 55%); }
.town-card.is-tilting::after, .tcard.is-tilting::after { opacity: 1; }

/* ------------------------------------------------------------
   BROKERAGE — [data-brokerage] holds Keller Williams Realty's own
   logo (main.js BROKERAGE). On light ground the file's own colours;
   on dark ground the same file in white through a mask. Without the
   file the name is set in the site's type.
   ------------------------------------------------------------ */
.brokerage { display: inline-flex; align-items: center; vertical-align: middle; }
.brokerage img { display: block; height: 2.2em; width: auto; }
.brokerage__mask {
  display: block; height: 1.7em; aspect-ratio: 172.47 / 78.516; background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.brokerage.is-slot { outline: 1px dashed currentColor; outline-offset: 3px; border-radius: 3px; margin-inline: 0.2em; }
.footer__brokerage { margin: 0.35rem 0 0.9rem; }
.footer__brokerage .brokerage { font-size: 0.92rem; font-weight: 500; letter-spacing: 0; color: var(--color-mark); }
.footer__brokerage .brokerage:not(.has-logo) { padding: 0.5rem 0.75rem; border: 1px solid rgba(246,239,220,0.22); border-radius: 6px; }
.footer__brokerage .brokerage.is-slot { outline-color: rgba(246,239,220,0.5); }
.footer__brokerage .brokerage__mask { height: 40px; color: #f6efdc; }
.hero__eyebrow .brokerage__mask { height: 30px; color: #fff; }
.dock__who .brokerage { font-size: 0.85rem; color: var(--color-ink-70); }
.dock__who .brokerage img { height: 26px; }

/* ------------------------------------------------------------
   PREVIEW ONLY — a detail Amanda has not sent yet shows as a tag
   (main.js), and a small list says what is left before launch.
   The public site drops those lines and never builds the list.
   ------------------------------------------------------------ */
mark.todo {
  background: rgba(196, 140, 60, 0.14); color: inherit; border: 1px dashed rgba(196, 140, 60, 0.75);
  border-radius: 4px; padding: 0 0.35em; font-size: 0.92em; white-space: nowrap;
}
.prelaunch { position: fixed; left: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 890; font-size: 0.88rem; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s; }
.prelaunch.is-shown { opacity: 1; visibility: visible; transform: none; }
.prelaunch__btn {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.6rem 1rem; border-radius: 999px; cursor: pointer;
  background: #fffaf0; color: #5b4320; border: 1px solid rgba(196, 140, 60, 0.55); font: inherit; font-weight: 500;
  box-shadow: 0 10px 30px -14px rgba(60, 40, 10, 0.45);
}
.prelaunch__dot { width: 8px; height: 8px; border-radius: 50%; background: #c48c3c; box-shadow: 0 0 0 4px rgba(196, 140, 60, 0.2); }
.prelaunch__panel {
  position: absolute; left: 0; bottom: calc(100% + 0.6rem); width: min(22rem, calc(100vw - 2rem));
  background: #fffaf0; color: var(--color-ink); border: 1px solid rgba(196, 140, 60, 0.45); border-radius: 14px; padding: 1rem 1.1rem;
  box-shadow: 0 24px 50px -20px rgba(60, 40, 10, 0.45);
}
.prelaunch__panel[hidden] { display: none; }
.prelaunch__head { font-size: 0.8rem; color: #7a5a2a; margin-bottom: 0.6rem; }
.prelaunch__panel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.prelaunch__panel li { display: grid; gap: 0.1rem; padding-bottom: 0.55rem; border-bottom: 1px solid rgba(196, 140, 60, 0.2); }
.prelaunch__panel li:last-child { border-bottom: 0; padding-bottom: 0; }
.prelaunch__panel b { font-weight: 600; }
.prelaunch__panel span { color: var(--color-ink-70); font-size: 0.82rem; }
@media (max-width: 760px) { .prelaunch { bottom: calc(58px + 0.75rem); left: 0.75rem; } }
@media print { .prelaunch { display: none; } }

/* Ridge to tide divider (main.js draws it) */
.ridge { position: relative; height: clamp(36px, 4.5vw, 56px); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.ridge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ridge__line { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ridge__spark { position: absolute; left: 0; top: 70%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--color-warm-white); border: 1.5px solid var(--color-brand); box-shadow: 0 0 0 5px rgba(42,78,81,0.12), 0 0 14px rgba(42,78,81,0.5); transition: opacity 0.6s var(--ease); }
.ridge.is-drawn .ridge__spark { opacity: 0; }

/* ------------------------------------------------------------
   SKYLINE PORTRAIT — a photo whose top edge is the brand
   silhouette (peaks, then waves), outlined in teal. On the way
   into view the person rises from behind it and the outline
   draws in (main.js). Used for Amanda on the home and about pages.
   ------------------------------------------------------------ */
.skyline { position: relative; isolation: isolate; }
/* Amanda's portrait: the whole photo in a plain square mat, like a print.
   It zooms out to rest as it comes into view (main.js adds .is-risen). */
.skyline__frame {
  display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px;
  outline: 10px solid #fff; outline-offset: -1px; margin: 10px;
  box-shadow: 0 30px 60px -32px rgba(20, 32, 30, 0.45), 0 0 0 11px rgba(20, 32, 30, 0.06);
}
.skyline__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1); transition: transform 2.2s cubic-bezier(.2,.7,.2,1), opacity 1s var(--ease); }
.js-rise .skyline:not(.is-risen) .skyline__frame img { transform: scale(1.22); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .skyline__frame img { transition: none; } }

/* Call back, inside Amanda's card: a day, a part of the day, a number */
.dock__call { margin-top: 0.55rem; border: 1px solid var(--color-line, rgba(0,0,0,0.12)); border-radius: 10px; }
.dock__call summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.85rem; cursor: pointer; list-style: none; font-weight: 500; }
.dock__call summary::-webkit-details-marker { display: none; }
.dock__call summary::after { content: '+'; margin-left: auto; font-size: 1.2rem; line-height: 1; color: var(--color-ink-70); }
.dock__call[open] summary::after { content: '−'; }
.dock__call summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.dock__callform { padding: 0 0.85rem 0.9rem; display: grid; gap: 0.7rem; }
.dock__callform fieldset { border: 0; margin: 0; padding: 0; }
.dock__callform legend { font-size: 0.74rem; color: var(--color-ink-70); margin-bottom: 0.35rem; }
.dock__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dock__chips label { cursor: pointer; }
.dock__chips input { position: absolute; opacity: 0; pointer-events: none; }
.dock__chips span { display: inline-block; padding: 0.35rem 0.65rem; border-radius: 99px; border: 1px solid var(--color-line, rgba(0,0,0,0.15)); font-size: 0.8rem; transition: background 0.2s, color 0.2s; }
.dock__chips input:checked + span { background: var(--color-brand-ground); border-color: var(--color-brand); color: #fff; }
.dock__chips input:focus-visible + span { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.dock__phone span { display: block; font-size: 0.74rem; color: var(--color-ink-70); margin-bottom: 0.25rem; }
.dock__phone input { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--color-line, rgba(0,0,0,0.18)); border-radius: 8px; font: inherit; }
.dock__phone input[aria-invalid="true"] { border-color: #b2492e; }
.dock__callerr { font-size: 0.78rem; color: #9b3b22; }
.dock__calldone { padding: 0 0.85rem 0.9rem; font-size: 0.9rem; color: var(--color-ink); }
.dock__calldone:focus { outline: none; }
.dock__callform[hidden], .dock__calldone[hidden] { display: none; }



/* What would you ask Amanda? one line, answered by her */
.ask-band { background: var(--color-brand-deep, #12302f); color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.ask-band__inner { display: grid; gap: 1.4rem; }
.ask-band__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem); color: #fff; }
.ask-band__form { display: grid; grid-template-columns: 2fr 1fr auto; gap: 0.8rem 1rem; align-items: end; }
.ask-band__form label span { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.72); margin-bottom: 0.35rem; }
.ask-band__form input { width: 100%; padding: 0.85rem 0; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.45); color: #fff; font-family: var(--font-display); font-size: 1.35rem; }
.ask-band__form input::placeholder { color: rgba(255,255,255,0.45); font-style: italic; }
.ask-band__form input:focus { outline: none; border-color: #fff; }
.ask-band__form input[aria-invalid="true"] { border-color: #f0a58a; }
.ask-band__form .btn { background: var(--color-warm-white); color: var(--color-ink); }
.ask-band__err { grid-column: 1 / -1; font-size: 0.85rem; color: #f6c3b0; }
.ask-band__done { font-family: var(--font-display); font-size: 1.4rem; max-width: 46rem; }
.ask-band__done:focus { outline: none; }
.ask-band__form[hidden], .ask-band__done[hidden] { display: none; }
@media (max-width: 760px) { .ask-band__form { grid-template-columns: 1fr; } }
.ask-band__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ask-band__chip { padding: 0.5rem 0.95rem; border-radius: 99px; border: 1px solid rgba(255,255,255,0.4); color: #fff; font-size: 0.88rem; background: rgba(255,255,255,0.06); transition: background 0.2s; }
.ask-band__chip:hover, .ask-band__chip:focus-visible { background: rgba(255,255,255,0.16); outline: none; border-color: #fff; }

/* Market center lockups wherever the brokerage is named (main.js) */
.brokerage__mcs { display: inline-flex; align-items: center; gap: 0.9rem; vertical-align: middle; }
.brokerage__mcs img { display: block; width: auto; height: 30px; }
.brokerage__mcs img + img { height: 22px; }
.hero__eyebrow .brokerage__mcs img { height: 30px; filter: drop-shadow(0 1px 8px rgba(0,0,0,0.45)); }
.hero__eyebrow .brokerage__mcs img + img { height: 22px; }
.dock__who .brokerage__mcs { display: flex; margin-top: 0.35rem; }
.dock__who .brokerage__mcs img { height: 26px; } .dock__who .brokerage__mcs img + img { height: 19px; }
.contact-card__title .brokerage, .contact-card__title .brokerage__mcs { display: flex; margin-top: 0.5rem; }
mark.todo--draft { display: inline-block; margin: 0 0.5rem 0.3rem 0; font-size: 0.72rem; vertical-align: middle; }

/* Text it to Amanda: the same note as an SMS, offered under every form's confirmation
   (and live under the contact page's note) */
.sms-instead { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; padding: 0.7rem 1.1rem; border-radius: 999px; border: 1px solid var(--color-brand); color: var(--color-brand); font-size: 0.92rem; font-weight: 600; transition: background var(--transition-fast), color var(--transition-fast); }
.sms-instead:hover { background: var(--color-brand); color: var(--color-warm-white); }
.sms-instead svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.sms-instead[hidden] { display: none; }
.postcard__sms { align-self: center; }

.dock__clocks { margin: -0.2rem 0 0.7rem; font-size: 0.82rem; color: var(--color-ink-40); font-variant-numeric: tabular-nums; }
/* the two skies in Amanda's card (listings.js From.paintClocks) */
.dock__skies { display: flex; flex-direction: column; gap: 0.4rem; margin: -0.1rem 0 0.85rem; }
.dock__skies[hidden] { display: none; }
.dock__skies .skytile { min-width: 0; grid-template-columns: auto auto 1fr; grid-template-rows: auto; padding: 0.4rem 0.7rem; column-gap: 0.6rem; }
.dock__skies .skytile > span { justify-self: end; }
.dock__skies .skytile b { font-size: 0.92rem; }
.dock__skies .skytile > span { font-size: 0.72rem; }
.dock__skies .skytile__orb { width: 14px; height: 14px; }

/* ? shows the keys */
.keys { width: min(24rem, calc(100vw - 2rem)); margin: auto; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-warm-white); color: var(--color-ink); box-shadow: var(--shadow-lg); }
.keys::backdrop { background: rgba(20,24,22,0.5); backdrop-filter: blur(3px); }
.keys__box { padding: 1.5rem 1.6rem 1.6rem; }
.keys__title { font-family: var(--font-display); font-weight: 500; font-size: 1.7rem; margin: 0 0 1rem; }
.keys__list { margin: 0 0 1.4rem; display: grid; gap: 0.6rem; }
.keys__list div { display: grid; grid-template-columns: 5.2rem 1fr; gap: 0.8rem; align-items: center; }
.keys__list dt, .keys__list dd { margin: 0; }
.keys__list dd { font-size: 0.95rem; color: var(--color-ink-70); }
.keys__list kbd { display: inline-block; font: 600 0.78rem var(--font-body); padding: 0.2rem 0.5rem; border: 1px solid var(--color-rule); border-radius: 6px; background: var(--color-warm-white); color: var(--color-ink); white-space: nowrap; }
.keys__close { width: 100%; justify-content: center; }

/* after dark the phone bar's primary action is Text (the way people reach her at that hour); by day it is Home value */
@media (max-width: 760px) {
  :root[data-sky="dusk"] .dock__bar .dock__primary, :root[data-sky="night"] .dock__bar .dock__primary { background: var(--color-warm-white); color: var(--color-ink); }
  :root[data-sky="dusk"] .dock__bar a[href^="sms:"], :root[data-sky="night"] .dock__bar a[href^="sms:"] { background: var(--color-earth); color: #142a2f; font-weight: 600; }
}