/*
 * Properkey shared UI components (pk-ui)
 * -------------------------------------
 * Extracted so the pk-* design language works OUTSIDE the dashboard layout —
 * e.g. the public property show page (application layout). Tokens live at :root
 * (not scoped to .pk-dashboard) so var() resolves anywhere this file is loaded.
 * Only pk-* / pk-sb-* prefixed selectors are defined, so nothing bleeds onto
 * un-classed public markup.
 */

:root {
  --pk-primary: #FF4F00;
  --pk-primary-dark: #D94300;
  /* Orange as TEXT on white is 3.2:1 and fails AA, so links and inline icons
     use the darkened brand orange. The fill token stays #FF4F00. */
  --pk-primary-text: #C23A00;
  --pk-navy: #14306e;
  /* Both text tokens clear 4.5:1 on white: #64748b = 4.76:1, #475569 = 7.5:1.
     The previous #7a828e (3.88:1) and #9aa2ad (2.58:1) did not. */
  --pk-muted: #64748b;
  --pk-meta: #475569;
  --pk-border: #eceef1;
  /* Was #2a49a8/#1e357e, off-system. Selected chips and days are the brand
     navy, the same grammar the wizard dialogs use. */
  --pk-blue: #14306e;
  --pk-green: #16a34a;

  /* The listings navbar is h-14 plus its 1px bottom border, and the property
     page's own bar sits directly under it. Both offsets come from here so a
     change to one cannot leave a strip of the gallery showing through the gap
     between them, which a hardcoded top-16 against a 57px navbar did. */
  --pk-navbar-h: 57px;
  --pk-bar-h: 49px;
  --pk-stack-h: calc(var(--pk-navbar-h) + var(--pk-bar-h));
}

/* Pinned directly under the navbar. */
.pk-sticky-bar { position: sticky; top: var(--pk-navbar-h); }

/* Pinned under BOTH, with a little air. At lg:top-20 the rail pinned at 80px
   while the bar occupied 64-113px, so the top of the tour card sat behind it. */
@media (min-width: 1024px) {
  .pk-sticky-rail { position: sticky; top: calc(var(--pk-stack-h) + 12px); }
}

/* ============================ sidebar card shell ============================ */
.pk-sb-card {
  background: #fff;
  border: 1px solid var(--pk-border);
  border-radius: 18px;
  box-shadow: 0 6px 22px rgba(16, 24, 40, .07);
  overflow: hidden;
}
.pk-sb-card + .pk-sb-card { margin-top: 16px; }
.pk-sb-body { padding: 16px 20px 18px; }

/* ============================ tour card header ============================ */
.pk-tour-head {
  /* Flat, not a gradient: band gradients were removed sitewide Aug 2026. The
     hairline lattice is the brand's navy surface treatment. */
  background-color: var(--pk-navy);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(60deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 30px);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pk-tour-head__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
  margin: 0 0 3px;
}
.pk-tour-head__title { font-size: 18px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.pk-tour-head__note { font-size: 12px; opacity: .8; margin: 4px 0 0; }
.pk-tour-head__icon {
  width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  background: rgba(255, 255, 255, .16);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

/* ============================ calendar ============================ */
.pk-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pk-cal__month { font-size: 15px; font-weight: 700; color: var(--pk-navy); }
/* 36px visible, 44px hit area via the halo — the wizard's _row_action pattern.
   At the old 30x30 these failed the 44px minimum outright. */
.pk-cal__arrow {
  position: relative;
  width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer;
  border-radius: 8px; color: var(--pk-meta); font-size: 14px;
}
.pk-cal__arrow::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.pk-cal__arrow:hover { background: #f3f4f6; color: var(--pk-navy); }
.pk-cal__arrow:disabled { opacity: .35; cursor: default; background: transparent; }
.pk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pk-cal__dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--pk-muted); padding: 4px 0; }
.pk-cal__day {
  /* Fixed height (not 1:1 aspect) — square cells at sidebar width made the
     calendar alone ~360px tall and pushed the card past the fold. */
  height: 40px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--pk-navy);
  display: flex; align-items: center; justify-content: center;
}
.pk-cal__day:hover:not(:disabled) { background: #eef1fb; }
.pk-cal__day--muted { color: #cbd0d8; }
.pk-cal__day:disabled { color: #cbd5e1; cursor: default; }
.pk-cal__day--today { box-shadow: inset 0 0 0 1.5px #cfd6ea; }
.pk-cal__day--selected,
.pk-cal__day--selected:hover { background: var(--pk-blue); color: #fff; }
.pk-cal__blank { height: 40px; }

/* ============================ time pills ============================ */
/* Sentence case, not 11px all-caps: field labels are sentence case, and the
   old #9aa2ad metered 2.58:1. */
.pk-sb-label { font-size: 12px; font-weight: 600; color: var(--pk-meta); margin: 14px 0 6px; }
.pk-sb-label--tight { margin-top: 0; }
.pk-sb-hint { font-size: 12px; color: var(--pk-muted); margin: 0 0 10px; line-height: 1.45; }
.pk-sb-hint--mt { margin: 10px 0 0; }
.pk-sb-note { font-size: 13.5px; color: var(--pk-meta); margin: 0 0 12px; line-height: 1.45; }
.pk-timepills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pk-timepill {
  position: relative;
  border: 1.5px solid #e4e7ec; background: #fff; border-radius: 12px;
  padding: 7px 6px; text-align: center; cursor: pointer; transition: border-color .12s, background .12s;
}
.pk-timepill:hover { border-color: #cfd4dc; }
.pk-timepill__t { display: block; font-size: 13.5px; font-weight: 700; color: var(--pk-navy); }
.pk-timepill__s { display: block; font-size: 11px; color: var(--pk-muted); margin-top: 1px; }
.pk-timepill input { position: absolute; opacity: 0; pointer-events: none; }
.pk-timepill:has(input:focus-visible) { border-color: var(--pk-blue); box-shadow: 0 0 0 3px rgba(20, 48, 110, .15); }
.pk-timepill:has(input:checked) { border-color: var(--pk-blue); background: var(--pk-blue); }
.pk-timepill:has(input:checked) .pk-timepill__t { color: #fff; }
.pk-timepill:has(input:checked) .pk-timepill__s { color: rgba(255, 255, 255, .82); }

/* ============================ fields ============================ */
.pk-input {
  width: 100%; padding: 10px 14px; font-size: 14px; color: var(--pk-navy);
  border: 1.5px solid #e4e7ec; border-radius: 12px; background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.pk-input::placeholder { color: var(--pk-muted); }
.pk-input:focus { outline: 0; border-color: var(--pk-primary); box-shadow: 0 0 0 3px rgba(255, 79, 0, .14); }
.pk-field > .pk-sb-label { margin: 0 0 4px; }
.pk-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pk-fieldset > legend { padding: 0; }
.pk-stack > * + * { margin-top: 8px; }

/* ============================ buttons + callout ============================ */
.pk-cta-btn {
  width: 100%; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--pk-primary); color: #fff; font-weight: 800; font-size: 15px;
  padding: 12px 18px; border-radius: 13px;
  box-shadow: 0 6px 16px rgba(255, 79, 0, .26); transition: background .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.pk-cta-btn:hover { background: var(--pk-primary-dark); color: #fff; }
.pk-cta-btn--mt { margin-top: 12px; }

.pk-callout {
  display: flex; align-items: center; gap: 10px;
  background: #f3f5f9; border-radius: 13px; padding: 10px 12px; margin-top: 12px;
}
.pk-callout__icon {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: #e5eafc; color: var(--pk-blue);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.pk-callout__label { font-size: 12.5px; color: var(--pk-meta); }
.pk-callout__phone { font-size: 15px; font-weight: 800; color: var(--pk-blue); text-decoration: none; }

/* ============================ list-for-free / feature card ============================ */
.pk-feature__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.pk-feature__icon {
  width: 56px; height: 56px; flex: none; border-radius: 999px;
  background: var(--pk-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.pk-feature__icon--blue { background: #e5eafc; color: var(--pk-blue); }
.pk-feature__title { font-size: 21px; font-weight: 800; color: var(--pk-navy); margin: 0; line-height: 1.15; letter-spacing: -.01em; }
.pk-feature__sub { color: var(--pk-meta); font-size: 15px; margin: 4px 0 0; }
.pk-feature__list { list-style: none; margin: 0 0 16px; padding: 0; }
.pk-feature__list li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--pk-navy); padding: 5px 0; }
.pk-feature__list i { color: var(--pk-primary-text); font-size: 14px; }

/* ============================ compact CTA rows ============================ */
.pk-cta-rows { display: flex; flex-direction: column; }
.pk-cta-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: transparent; border: 0; cursor: pointer; text-align: left; text-decoration: none;
  padding: 16px 20px;
}
.pk-cta-rows > * + * { border-top: 1px solid var(--pk-border); }
.pk-cta-row:hover { background: #fafbfc; }
.pk-cta-row__icon {
  width: 42px; height: 42px; flex: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.pk-cta-row__icon--offer { background: #fdece6; color: var(--pk-primary); }
.pk-cta-row__icon--insure { background: #e5eafc; color: var(--pk-blue); }
.pk-cta-row__body { flex: 1; min-width: 0; }
.pk-cta-row__title { display: block; font-size: 15px; font-weight: 700; color: var(--pk-navy); }
.pk-cta-row__sub { display: block; font-size: 13px; color: var(--pk-muted); }
.pk-cta-row__chev { color: #c2c8d0; font-size: 14px; }

/* ============================ post-submission success ============================ */
.pk-success { text-align: center; padding: 22px 8px; }
.pk-success__badge {
  width: 60px; height: 60px; border-radius: 999px; margin: 0 auto 14px;
  background: #dcfce7; color: var(--pk-green);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.pk-success__title { font-size: 18px; font-weight: 800; color: var(--pk-navy); margin: 0 0 4px; }
.pk-success__text { font-size: 14px; color: var(--pk-meta); margin: 0 0 16px; }
.pk-success__hint { font-size: 12px; color: var(--pk-muted); margin: 12px 0 0; line-height: 1.45; }

/* compact inline success — fills the offer row slot after an anonymous submit */
.pk-lead-inline { display: flex; gap: 12px; padding: 16px 20px; }
.pk-lead-inline__badge { width: 34px; height: 34px; flex: none; border-radius: 999px; background: #dcfce7; color: var(--pk-green); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.pk-lead-inline__body { display: flex; flex-direction: column; }
.pk-lead-inline__link { margin-top: 7px; font-size: 13px; font-weight: 700; color: var(--pk-primary-text); text-decoration: none; }
.pk-lead-inline__link:hover { text-decoration: underline; }

/* ============================ quick day picks ============================
   The tour card opens on four 48px targets instead of a 273px month grid, so
   the whole rail (tour + offer + insurance) clears a laptop viewport and the
   secondary CTAs are visible on arrival. "More dates" swaps in the calendar.
   ------------------------------------------------------------------------- */
.pk-daypicks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* This file is unlayered and Tailwind's utilities sit in @layer utilities, so a
   plain `display` here outranks .hidden whatever the specificity looks like.
   The controller toggles .hidden on both of these, so both say it themselves. */
.pk-daypicks.hidden { display: none; }
.pk-cal.hidden { display: none; }
.pk-daypick {
  min-height: 48px;
  border: 1.5px solid #e4e7ec; background: #fff; border-radius: 12px;
  padding: 6px 2px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: border-color .12s, background .12s;
}
.pk-daypick:hover { border-color: #cfd4dc; }
.pk-daypick__dow { display: block; font-size: 10.5px; font-weight: 600; color: var(--pk-muted); }
.pk-daypick__num { display: block; font-size: 14px; font-weight: 700; color: var(--pk-navy); margin-top: 1px; }
.pk-daypick:focus-visible { outline: 0; border-color: var(--pk-navy); box-shadow: 0 0 0 3px rgba(20, 48, 110, .15); }
.pk-daypick[aria-pressed="true"] { border-color: var(--pk-navy); background: var(--pk-navy); }
.pk-daypick[aria-pressed="true"] .pk-daypick__dow { color: rgba(255, 255, 255, .82); }
.pk-daypick[aria-pressed="true"] .pk-daypick__num { color: #fff; }
.pk-daypick--more .pk-daypick__dow { font-size: 13px; color: var(--pk-primary-text); }
.pk-daypick--more .pk-daypick__num { font-size: 11px; font-weight: 700; color: var(--pk-primary-text); }

/* ============================ in-page section nav ========================
   The detail column runs ~2,400px over eleven sections, which is what earns a
   jump nav; the dense-forms rule against one is about short ledgers.
   ------------------------------------------------------------------------- */
.pk-section-nav__link {
  display: inline-flex; align-items: center; white-space: nowrap;
  height: 48px; padding: 0 16px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--pk-meta); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.pk-section-nav__link:hover { color: var(--pk-navy); }
.pk-section-nav__link:focus-visible {
  outline: 0; color: var(--pk-navy);
  box-shadow: inset 0 0 0 2px rgba(20, 48, 110, .18);
  border-radius: 6px;
}
/* The current item reads by weight and an orange rule rather than a coloured
   label, so the bar stays calm beside the orange CTA. Doubled class, like
   .pk-area-tab.area-tab-active: at a single class this lost to the base rule
   and the current section never lit at all. */
.pk-section-nav__link.pk-section-nav__link--current {
  color: var(--pk-navy);
  font-weight: 700;
  border-bottom-color: var(--pk-primary);
}

/* ============================ bar actions ================================
   Share and Save carry labels, not bare glyphs: four unlabelled icons made
   the reader guess. Share holds the four destinations behind one control.
   ------------------------------------------------------------------------- */
.pk-bar-action {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  height: 44px; padding: 0 12px;
  border: 0; background: transparent; cursor: pointer; text-decoration: none;
  border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--pk-meta);
  transition: background .12s, color .12s;
}
.pk-bar-action:hover { background: #f1f5f9; color: var(--pk-navy); }
.pk-bar-action:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgba(20, 48, 110, .18); }

.pk-bar-menu {
  position: absolute; right: 0; top: 100%; z-index: 40; margin-top: 4px;
  min-width: 11rem; padding: 4px 0;
  background: #fff; border: 1px solid var(--pk-border); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .12);
}
.pk-bar-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 40px; padding: 8px 14px;
  border: 0; background: transparent; cursor: pointer; text-align: left; text-decoration: none;
  font-size: 14px; color: var(--pk-meta);
}
.pk-bar-menu__item:hover { background: #f8fafc; color: var(--pk-navy); }
.pk-bar-menu__item i { width: 16px; text-align: center; color: #94a3b8; }

/* Anything the nav targets clears both bars when jumped to. */
[id="overview"], [id="details"], [id="features"], [id="area"] {
  scroll-margin-top: calc(var(--pk-stack-h) + 16px);
}

/* ============================ secondary button ===========================
   Get pre-approved. It was a 44px black-bordered pill that filled solid black
   on hover: black is not in the palette, and the weight put a secondary link
   on a par with the sidebar's orange CTA. Navy, 36px visible, and it keeps a
   44px hit area through the halo — the same trick .pk-cal__arrow uses.
   ------------------------------------------------------------------------- */
.pk-secondary-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 14px;
  border: 1px solid rgba(20, 48, 110, .25); border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--pk-navy);
  text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.pk-secondary-btn::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 100%; height: 44px; transform: translate(-50%, -50%);
}
.pk-secondary-btn:hover {
  background: rgba(20, 48, 110, .06);
  border-color: rgba(20, 48, 110, .45);
  color: var(--pk-navy);
}
.pk-secondary-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(20, 48, 110, .15); }

/* ============================ detail sections =============================
   The property facts are one card with subheads, not eight cards. A caps
   subhead the size of the wizard's modal_category, and a hairline only between
   siblings so the first section has no rule above it.
   ------------------------------------------------------------------------- */
.pk-detail-section + .pk-detail-section {
  margin-top: 18px;
  border-top: 1px solid #f1f5f9;
  padding-top: 18px;
}
/* The section title is the strongest thing in its section. It used to be the
   weakest: 11px muted slate over 14px semibold near-black labels, so the
   container read as less important than what it held. dense-forms: section
   titles a shade darker than labels. */
.pk-detail-section__title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #0f172a;
}

/* Two text colours across three roles, not three colours: the title and the
   value share the ink, the label is the quiet one. The label was carrying
   semibold near-black and outranking both. */
.pk-fact__label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--pk-muted);
}
.pk-fact__value {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
}

/* A long list reads as a column of items rather than a comma run, and spans
   the row rather than wrapping five deep inside a third of it. */
.pk-fact__list {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 32px;
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
}
.pk-fact__list li { break-inside: avoid; padding: 1px 0; }
@media (min-width: 1024px) { .pk-fact__list { columns: 3; } }

/* ============================ area tabs ==================================
   Schools / Internet & Cell / Weather / Places under the map. The state is one
   class so the server render and the controller cannot disagree.
   ------------------------------------------------------------------------- */
.pk-area-tab {
  display: inline-flex; align-items: center; white-space: nowrap;
  min-height: 44px; padding: 0 4px;
  border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--pk-meta);
  transition: color .12s, border-color .12s;
}
.pk-area-tab:hover { color: var(--pk-navy); border-bottom-color: #cbd5e1; }
.pk-area-tab:focus-visible { outline: 0; color: var(--pk-navy); box-shadow: inset 0 0 0 2px rgba(20, 48, 110, .18); border-radius: 6px; }
/* Coral label, orange rule — the same grammar as the section nav. */
.pk-area-tab.area-tab-active { color: var(--pk-primary-text); font-weight: 600; border-bottom-color: var(--pk-primary); }
.pk-area-tab.area-tab-active:hover { border-bottom-color: var(--pk-primary); }

/* ============================ mobile action bar ============================
   Below lg the rail stacks under ~3,700px of detail, so the primary action
   would otherwise sit at the very bottom of the page. This pins it in the
   thumb zone and scrolls the real card into view.
   ------------------------------------------------------------------------- */
.pk-mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--pk-border);
  box-shadow: 0 -4px 18px rgba(16, 24, 40, .08);
}
.pk-mobile-cta .pk-cta-btn { flex: 1; min-height: 48px; }
.pk-mobile-cta__call {
  width: 48px; height: 48px; flex: none; border-radius: 13px;
  border: 1.5px solid #e4e7ec; background: #fff; color: var(--pk-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; text-decoration: none;
}
.pk-mobile-cta__call:hover { border-color: #cfd4dc; color: var(--pk-navy); }
/* Keep the bar clear of the page's last rows and off the chat launcher. */
.pk-has-mobile-cta { padding-bottom: 88px; }
body:has(.pk-mobile-cta) #support-chat-container .support-chat-button { bottom: 5.5rem; }
@media (min-width: 1024px) {
  .pk-mobile-cta { display: none; }
  .pk-has-mobile-cta { padding-bottom: 0; }
  body:has(.pk-mobile-cta) #support-chat-container .support-chat-button { bottom: 1rem; }
}

/* The below-lg hero. It carried bg-slate-900 behind an object-contain image,
   so every photo whose aspect did not match letterboxed and the container
   showed through as dark navy bars — the full width of the frame at tablet
   size. object-cover fills it, and the neutral surface is only ever seen while
   the image loads. The height was an inline style attribute.
   ------------------------------------------------------------------------- */
.pk-photo-hero { height: 350px; background: #f1f5f9; }
@media (min-width: 640px) { .pk-photo-hero { height: 420px; } }

/* ============================ gallery buttons ============================
   Show / Location / 3D Tour over the photo. They were white, purple and green:
   two colours off the palette entirely, for three controls that all do the
   same kind of thing, which is open a viewer over this photo. One glass
   treatment for all three and the photograph supplies the colour.
   ------------------------------------------------------------------------- */
.pk-photo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 14px;
  border: 0; cursor: pointer; text-decoration: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  color: #0f172a;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .18);
  transition: background .12s;
}
.pk-photo-btn:hover { background: #fff; color: #0f172a; }
.pk-photo-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(20, 48, 110, .35), 0 2px 10px rgba(15, 23, 42, .18);
}
/* The same accent the page uses for anything interactive — the current nav
   item, the Description's Show more, the agent's phone and email — so the mark
   says "this does something" in one voice. 5.9:1 on the glass. */
.pk-photo-btn i { color: var(--pk-primary-text); font-size: 13px; }

/* ---- Virtual tour tile (property gallery) --------------------------------
   Reproduces what the tour itself shows when it loads: the start frame with a
   translucent disc and a call to enter. We use the listing photo the tile
   displaces as that frame — the tour host (Zillow) 403s server-side fetches, so
   its real first frame is not obtainable, and a live third-party request per
   page render would be the wrong trade anyway.

   Reading as a video start frame is the point: people already know what a play
   surface does, so the affordance needs no explanation (Jakob). */
.pk-tour-tile {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  text-decoration: none;
  background-color: #14306e;
}

/* Blurred on purpose. The source photos are ~640px and we render this cell
   larger, so a sharp backdrop is already soft — blurring turns that into a
   deliberate treatment, and it clears the detail behind the disc so the entry
   control is the only thing competing for attention (Von Restorff).
   The scale() hides the transparent edge blur() pulls in at the boundary. */
.pk-tour-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(3px) saturate(1.04);
  transform: scale(1.05);
  transition: filter 0.25s ease;
}

/* Ease the blur back on hover — a hint of the room behind the doorway. */
.pk-tour-tile:hover .pk-tour-tile__img { filter: blur(1.5px) saturate(1.04); }

/* Scrim: enough to hold white text at AA over any photo, light enough that the
   room behind still reads as a real frame. */
.pk-tour-tile__scrim {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.28);
  transition: background 0.2s ease;
}

.pk-tour-tile:hover .pk-tour-tile__scrim { background: rgba(15, 23, 42, 0.46); }

.pk-tour-tile__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 22px;
  transition: transform 0.2s ease;
}

.pk-tour-tile:hover .pk-tour-tile__disc { transform: scale(1.06); }

/* Navy pill rather than orange: small white text fails contrast on #FF4F00,
   and navy is the brand's chip surface. */
.pk-tour-tile__cta {
  padding: 7px 12px;
  border-radius: 6px;
  background: rgba(20, 48, 110, 0.94);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .pk-tour-tile__disc { width: 44px; height: 44px; font-size: 18px; }
  .pk-tour-tile__cta { font-size: 10px; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-tour-tile__scrim,
  .pk-tour-tile__img,
  .pk-tour-tile__disc { transition: none; }
  .pk-tour-tile:hover .pk-tour-tile__img { filter: blur(3px) saturate(1.04); }
  .pk-tour-tile:hover .pk-tour-tile__disc { transform: none; }
}