/* ══════════════════════════════════════════════════════════
   FEATURED PROJECTS — flows directly into [hns_listings] below
   (same light bg, no divider/seam, single shared heading).
   .hf-hero/.hf-row/.hf-card/.hf-card-media are the only custom
   rules; the inner card content reuses the exact .hl-card-* /
   .hl-btn-* component classes — sourced from the single shared
   hns_shared_card_flyout_css() function (defined in
   project-listings-shortcode.php, appended below) rather than a
   duplicated copy, so this shortcode still renders correctly on its
   own (even without [hns_listings] present) but can no longer drift
   out of sync with it the way five separate bugs did before
   2026-07-26's consolidation.
   ══════════════════════════════════════════════════════════ */
.hf-hero {
  padding: clamp(20px, 3vw, 4px) 0 clamp(28px, 4vw, 4px);
  font-family: inherit;
  /* .hf-row bleeds full-bleed via a negative margin sized to ITS OWN gutter
     (24px), but .hf-hero-inner's padding shrinks at narrower breakpoints
     (14px at <=760px, 5px in the boxed-row case) — that mismatch let the
     row's edges stick out past the section's own bounds and register as
     page-level horizontal scroll on mobile. Clipping it here is simpler
     and more robust than keeping .hf-row's margin/padding numbers in sync
     with every current and future gutter breakpoint. */
  overflow-x: hidden;
}
.hf-hero-inner {
  /* Was 1600px when this row held 5 cards — dialed back to 4 cards
     (2026-07-24), so the container shrank in step (see .hf-card width
     below); don't change one without the other or you'll get either
     overflow or a big empty gap on the right. */
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 760px) {
  /* This section's row is configured as a "stretched row" in the page
     builder, so — unlike a boxed row elsewhere on the site — its ancestor
     chain carries no theme padding at all here (confirmed by measuring
     computed styles live: .hf-hero's parents are all 0px). The entire
     visual left/right gutter is this element's own padding, so reducing
     it directly (no bleed/negative-margin trick needed) is the fix. */
  .hf-hero-inner {
    padding-left: 14px;
    padding-right: 14px;
  }
}
/* If this section is ever placed inside a BOXED row instead of the
   stretched-row layout above (a different page/theme-panel setting), the
   parent Newspaper theme's own wrapper (.td-container/.tdc-row/
   .tdc-row-composer — lives in the PARENT theme, don't edit it there) pins
   20px of left/right padding at its own ≤767px breakpoint, also via
   !important. Scoped via :has() so only rows containing this section are
   affected — every other boxed row on the site keeps the theme's normal
   20px mobile padding. "body" prefix is a specificity bump, not scoping —
   see the matching comment in project-listings-shortcode.php: a bare
   :has() selector tied the theme's own !important rule at equal
   specificity and lost by source order, so this outranks it instead. */
@media (max-width: 767px) {
  body .td-container:has(.hf-hero),
  body .tdc-row:has(.hf-hero),
  body .tdc-row-composer:has(.hf-hero) {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}
.hf-header { margin-bottom: 18px; max-width: 640px; }
.hf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #c8702a;
  margin-bottom: 10px;
}
.hf-eyebrow::before {
  content: "";
  width: 16px;
  height: 7px;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 10px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'%3E%3Cpath d='M0 4H18M14 0L18 4L14 8' fill='none' stroke='%23c8702a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.hf-title {
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 500;
  line-height: 1.2;
  color: #241a12;
  letter-spacing: -0.01em;
  /* Theme's sitewide h2 rule sets margin-top:30px; the element IS the h2
     (<h2 class="hf-title">), so the fix belongs on .hf-title itself — the
     ".hf-title .h2" descendant selector this replaced never matched
     anything (no nested ".h2" element exists), and its "!important" was
     placed after the semicolon, which is invalid CSS and gets dropped. */
  margin-top: 3px !important;
}
.hf-title span { font-weight: 600; color: #f35e0a; }
.hf-title-accent { font-weight: 600; color: #ff6600; }

/* ── Row — side-by-side, scroll-snap on narrow viewports ── */
.hf-row {
  display: flex;
  align-items: stretch;
  gap: 20px;
  overflow-x: auto;
  /* Without this, swiping past the first/last card on mobile "chains" the
     scroll into the page's own vertical scroll — the whole page jumps/
     bounces instead of the swipe staying contained to the card row. */
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: 24px;
  margin: 0 -24px;
  padding: 4px 24px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 112, 42, 0.3) transparent;
}
.hf-row::-webkit-scrollbar { height: 5px; }
.hf-row::-webkit-scrollbar-thumb { background: rgba(200, 112, 42, 0.3); border-radius: 10px; }

/* ── Grid layout (layout="grid") — wraps to multiple rows instead of the
   single horizontal scroll strip above. Opt-in, same .hf-card markup. ── */
.hf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.hf-grid .hf-card { flex: none; }
@media (max-width: 1024px) {
  .hf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hf-grid { grid-template-columns: 1fr; }
}
.hf-card[hidden] { display: none; }

.hf-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.hf-pagination { margin-top: 28px; }
.hf-pagination .page-numbers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hf-pagination .page-numbers a,
.hf-pagination .page-numbers span { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid rgba(36,26,18,.18); border-radius: 999px; color: #241a12; text-decoration: none; }
.hf-pagination .page-numbers .current { background: #241a12; border-color: #241a12; color: #fff; }
.hf-loadmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #190800b8;
  border: 3px solid rgba(200, 112, 42, 1);
  border-radius: 999px;
  color: #ffffff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.hf-loadmore-btn:hover {
  background: rgba(200, 112, 42, 0.08);
  border-color: #c8702a;
}
.hf-loadmore-btn:active { transform: scale(0.97); }
.hf-loadmore-btn svg { color: #c8702a; transition: transform 0.25s ease; }
.hf-loadmore-btn[data-exhausted] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .hf-loadmore-btn { transition: none; }
  .hf-loadmore-btn svg { transition: none; }
}

/* ── Card — "spotlight" photo-card treatment (redesigned 2026-08-15,
   reference: Dribbble "Cabin Booking Card UI"). A single full-bleed photo
   carries the whole card: title/location/price/facts sit directly on a
   warm dark gradient over the image (never a separate white body below
   it), a small WhatsApp icon floats top-right of the photo, and a
   full-width "Book Now" pill lives in a solid dark footer strip that reads
   as a continuation of the gradient rather than a distinct block. Content
   is always visible at rest — no hover-only reveals, per brand principle.
   Everything still reuses the shared .hl-card-title/-location/-title-link
   classes (colors re-themed for the dark surface via .hf-card compound
   selectors below) so the underlying markup/behavior stays identical to
   the listing cards. ── */
.hf-card {
  scroll-snap-align: start;
  /* Fills the row evenly rather than capping at a fixed max-width — with
     only 4 cards there's no need to leave the container's leftover space
     unused; all 4 grow equally to fill whatever width is available
     (confirmed against user-tested value, 2026-07-24). min-width:0 lets
     them shrink below their content's natural width instead of
     overflowing at narrower viewports. */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #0c0a08;
  border: 1px solid rgba(36, 26, 18, 0.09);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Scroll-reveal fade-in-up (2026-08-24: scoped to grid layout only). It
   used to apply to every .hf-card regardless of layout, but .hf-row is
   ALSO a horizontally-scrolling container (scroll-snap-align on each
   card) — the IntersectionObserver below has no root scoping, so a card
   crossing into view via a horizontal swipe was treated the same as
   scrolling down the page into it, kicking off this 0.6s transform
   transition on a card that was simultaneously the active scroll-snap
   target mid-touch-gesture. Animating transform on a snap-align element
   during an active touch scroll is a known trigger for exactly the
   "wobbly free-form" stutter reported on mobile (confirmed via frame-by-
   frame video analysis: the row visibly overshot forward, snapped back a
   full card, then re-settled forward again on a single continuous swipe).
   .hf-grid isn't horizontally-scrollable, so the reveal is unaffected
   there — kept as before. */
.hf-grid .hf-card {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease, border-color 0.3s ease;
}
.hf-card.is-visible { opacity: 1; transform: translateY(0); }
.hf-card.is-visible:hover {
  box-shadow:
    0 4px 10px rgba(36, 26, 18, 0.10),
    0 20px 48px rgba(36, 26, 18, 0.14);
  border-color: rgba(200, 112, 42, 0.38);
  transform: translateY(-3px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.hf-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #17110a;
}
.hf-card-img-link { position: absolute; inset: 0; display: block; text-decoration: none; cursor: pointer; }
.hf-card:hover .hl-card-img { transform: scale(1.05); }

@media (max-width: 640px) {
  .hf-card { flex: 0 0 78vw; }
}

/* Bottom-anchored warm gradient (amber/brown-tinted, never cool black) so
   the overlaid text stays legible regardless of the photo underneath —
   transparent at the top third, near-opaque by the base. */
.hf-card-gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(12, 10, 8, 0) 38%,
    rgba(17, 12, 7, 0.55) 62%,
    rgba(12, 10, 8, 0.92) 100%
  );
}

/* Status ribbon moves to top-left of the photo now that the bottom is
   reserved for title/location/pills. */
.hf-card-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fffdfa;
  background: #c8702a;
  padding: 5px 13px;
  border-radius: 100px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

/* Floating WhatsApp icon, top-right of the photo — frosted dark circle,
   same icon/target/behavior as the listing cards' .hl-btn-wa, just
   repositioned to float over the image instead of sitting in a footer row.
   !important throughout for the same reason as .hl-btn-wa: this button also
   carries Fluent Forms' own .ff_modal_btn/.plain_btn classes, and that
   plugin's CSS (loads after ours) resets border/display/padding on its own
   buttons — confirmed it strips the circular shape without !important. */
.hf-card-wa-float {
  position: absolute !important;
  right: 14px !important;
  top: 14px !important;
  z-index: 2;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(240, 232, 216, 0.3) !important;
  background: rgb(5, 168, 50) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.25s, border-color 0.25s, transform 0.15s ease;
}
.hf-card-wa-float span { display: none !important; } /* icon-only */
.hf-card-wa-float svg {
  width: 17px; height: 17px;
  color: #f0e8d8;
  transition: transform 0.25s;
}
.hf-card-wa-float:hover {
  background: rgba(74, 157, 106, 0.35) !important;
  border-color: rgba(74, 157, 106, 0.6) !important;
}
.hf-card-wa-float:hover svg { transform: scale(1.1); }
.hf-card-wa-float:active { transform: scale(0.94); }
.hf-card-wa-float:focus-visible { outline: 2px solid #c8702a; outline-offset: 2px; }

/* Title/location/pills, pinned to the bottom of the photo over the
   gradient. Compound selectors (not bare classes) so these reliably win
   over the shared .hl-card-title/-location rules below regardless of
   declaration order — same convention DESIGN.md documents for the rest of
   this card's hero-only overrides. */
.hf-card-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hf-card .hl-card-head { display: block; margin-bottom: 0; }
.hf-card .hl-card-title {
  font-size: clamp(16px, 1.6vw, 19px);
  display: block;
  color: #f0e8d8;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}
.hf-card .hl-card-title-link:hover { color: #f0e8d8; opacity: 0.82; }
.hf-card .hl-card-location {
  color: rgba(240, 232, 216, 0.8);
  margin-bottom: 0;
}
.hf-card .hl-card-location svg { color: #d4885a; }

/* Facts/price as frosted pills rather than the bare middot rhythm the light
   horizontal cards use — plain text loses contrast sitting directly on a
   photo of unpredictable brightness, so each fact gets its own chip. This
   is a deliberate, scoped exception to the "not pills/badges" rule for this
   photo-overlay treatment only (see DESIGN.md "hero-only scoped
   overrides") — the light-card listing rows are untouched. All facts that
   exist for a card are shown (none dropped for the sake of a tidier row);
   the row wraps if it runs past one line. */
.hf-card-pills-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.hf-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hf-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #f0e8d8;
  background: rgba(240, 232, 216, 0.14);
  border: 1px solid rgba(240, 232, 216, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 11px;
  border-radius: 100px;
  white-space: nowrap;
}
.hf-pill svg { flex-shrink: 0; width: 13px; height: 13px; color: #d4885a; }
/* Price pill gets a flat brand-orange fill (not the neutral frosted chip
   the fact pills use) so it reads as the clear "headline" fact and stays
   legible over photos of any brightness. Deliberately flat, no gradient or
   glow — a solid fill reads as confident without tipping into a loud/slop
   "glowing badge" look. */
.hf-pill-price {
  color: #fff8f0;
  background: #c8702a;
  border-color: transparent;
  font-weight: 700;
  font-size: 13px;
  padding: 5px 12px;
}

/* Footer strip — solid warm-dark, same base tone as the gradient's end
   color so the photo and footer read as one continuous surface rather than
   a seam. Holds the single full-width "Book Now" action (WhatsApp moved to
   the floating icon above, so this row is CTA-only). */
.hf-card-footer {
  padding: 14px;
  background: #0c0a08;
}
/* Filled brand orange (2026-08-15 colorize pass) — was a neutral cream
   button (matching the Dribbble reference literally), but every other CTA
   in this design system is color-blocked to signal "primary action"
   (.hl-btn-cta's dark fill, .hl-btn-cta-secondary's #f35e0a) — a plain
   cream button here was actually the odd one out, not restraint. Reusing
   the same brand orange already spent on this card's status badge and
   fact-icon tint ties the whole card's few color touches into one thread
   instead of adding a new hue. Ink text (not white) for a clean
   AA pass: #c8702a's own luminance is too high for white text at this
   button's font-size/weight to reliably clear 4.5:1, but #241a12 on it
   measures ~4.8:1. */
.hf-btn-book {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  border-radius: 100px;
  background: #ffba56;
  border: 1px solid #c8702a;
  color: #241a12;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  font-family: inherit;
  transition: box-shadow 0.25s, transform 0.15s ease;
}
/* Hover is a lift + glow, not the site's usual darken-on-hover — measured:
   the documented hover token (#b5611f) drops ink-on-orange to 3.81:1,
   under the 4.5:1 this button's own resting state clears (4.72:1). Rather
   than pick a lighter orange that breaks the "hover = darker" convention
   used everywhere else on this palette, the affordance moves to
   elevation instead, so contrast never regresses on hover. */
.hf-btn-book:hover { box-shadow: 0 6px 18px rgba(200, 112, 42, 0.4); transform: translateY(-1px); }
.hf-btn-book:active { transform: scale(0.98) translateY(0); }
/* Cream ring, not orange — an orange focus ring on an orange fill is
   invisible; every other focus-visible ring in this file is #c8702a
   specifically because it sits on light or dark-neutral surfaces, not on
   orange itself. */
.hf-btn-book:focus-visible { outline: 2px solid #f0e8d8; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .hf-btn-book { transition: none; }
  .hf-btn-book:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-card, .hl-card-img, .hl-card-title-link { transition: none !important; }
  .hf-card { opacity: 1 !important; transform: none !important; }
}

/* ── Flyout (shared visual language with [hns_listings]) ── */
.hf-overlay {
  position: fixed; inset: 0;
  /* Above the floating "Group Buy" fab (.hns-gbp-fab, z-index:99998,
     fixed to <body> in the deal-widget) so the flyout never renders
     underneath it. */
  z-index: 100000;
  background: rgba(10, 8, 6, 0.7);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.hf-overlay.is-active { opacity: 1; pointer-events: auto; }
.hf-flyout {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100001;
  width: min(460px, 100vw);
  background: #0c0a08;
  border-left: 0.5px solid rgba(240, 232, 216, 0.12);
  box-shadow: -8px 0 48px rgba(0, 0, 0, 0.65);
  /* translateX(100%) only shifts by the box's own width — the box-shadow's
     48px blur radius (+ -8px offset) still bled ~56px into the visible
     page as a persistent dark blurred strip along the whole right edge,
     even fully "closed". The extra +80px clears that with margin. */
  transform: translateX(calc(100% + 80px));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; flex-direction: column; overflow: hidden;
}
.hf-flyout.is-open { transform: translateX(0); }
.hf-flyout-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 0.5px solid rgba(240, 232, 216, 0.1);
  flex-shrink: 0;
}
.hf-flyout-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: #ff8d4f; margin-bottom: 3px;
}
.hf-flyout-project {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600; line-height: 1.2;
  color: #f0e8d8; letter-spacing: -0.01em;
}
.hf-flyout-close {
  flex-shrink: 0; width: 36px; height: 36px;
  background: rgba(240, 232, 216, 0.04);
  border: 0.5px solid rgba(240, 232, 216, 0.12);
  color: rgba(240, 232, 216, 0.45);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
  font-family: inherit;
}
.hf-flyout-close:hover { background: rgba(240, 232, 216, 0.1); color: #f0e8d8; }
.hf-flyout-body {
  flex: 1; overflow-y: auto; padding: 16px;
  scrollbar-width: thin; scrollbar-color: rgba(200, 112, 42, 0.3) transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hf-flyout-body::-webkit-scrollbar { width: 3px; }
.hf-flyout-body::-webkit-scrollbar-thumb { background: rgba(200, 112, 42, 0.35); }

body.hf-noscroll { overflow: hidden !important; }
/* ══════════════════════════════════════════════════════════
   SHARED CARD + FLYOUT-CONTENT COMPONENTS
   See hns_shared_card_flyout_css() doc comment above.
   ══════════════════════════════════════════════════════════ */

/* ── Card image / status ── */
.hl-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-card-status {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fffdfa;
  background: #c8702a;
  padding: 5px 13px;
  border-radius: 100px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

/* ── Card body / head / title ── */
.hl-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 22px;
  background: #fffdfa;
}
.hl-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.hl-card-title {
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  line-height: 1.25;
  color: #241a12;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hl-card-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.hl-card-title-link:hover { color: #c8702a; }
.hl-card-title-link:focus-visible {
  outline: 2px solid #c8702a;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Price ── */
/* Pill treatment (2026-08-16), matching the featured cards' brand-orange
   price pill — a deliberate override of this file's earlier "no pill/badge
   treatment" rule, chosen for visual consistency between the two sections
   over keeping listings-only plain text. Flat fill, no gradient/glow —
   toned down from an earlier gradient+shadow version that read as too
   loud/slop-like. */
.hl-card-price {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.1;
  background: #c8702a;
  padding: 6px 13px;
  border-radius: 100px;
}
/* Desktop head price only (2026-08-16): a corner ribbon flush against the
   card's own top-right edge, not a floating pill — reads calmer and more
   "attached" to the card than a pill with margin around it. Negative
   margins cancel .hl-card-body's own padding (18px 22px) to bleed the box
   out to the card's real edge; .hl-card's overflow:hidden + border-radius
   then clips it to the card's own corner automatically. Only the desktop
   .hl-card-head instance gets this — the mobile duplicate in
   .hl-card-price-mobile keeps the normal free-floating pill shape, since
   it doesn't sit against any card edge. */
.hl-card-head .hl-card-price {
  margin: -18px -22px 0 0;
  padding: 10px 20px 10px 16px;
  border-radius: 0 0 0 14px;
}
.hl-price-value {
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 700;
  color: #fff8f0;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hl-price-suffix {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 248, 240, 0.85);
}
.hl-price-label { display: none; }

/* ── Location ── */
.hl-card-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4a3d30;
  margin-bottom: 20px;
}
.hl-card-location svg { flex-shrink: 0; color: #c8702a; }
.hl-card-location span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Facts row: bold warm-ink values + brand-orange icons, middot rhythm
   between items — real hierarchy and color without pill/badge treatment ── */
.hl-card-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
}
.hl-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: #241a12;
  font-weight: 600;
}
.hl-fact svg { flex-shrink: 0; width: 16px; height: 16px; color: #c8702a; }
.hl-fact:not(:last-child)::after {
  content: "·";
  margin: 0 14px;
  color: #c2a98a;
  font-weight: 400;
}

/* ── Footer / buttons ── */
.hl-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
/* !important throughout: this button also carries Fluent Forms' own
   .ff_modal_btn/.plain_btn classes (needed for the WhatsApp modal trigger —
   see the markup), and that plugin's CSS resets border/display/padding on
   its own buttons. Without !important here those resets win by load order
   and strip the circular look (no border, icon off-center). */
.hl-btn-wa {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(36, 26, 18, 0.14) !important;
  background: transparent !important;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s, transform 0.15s ease;
}
.hl-btn-wa span { display: none !important; } /* icon-only */
.hl-btn-wa svg {
  color: #4a9d6a; /* muted, desaturated green — recognizable, not garish */
  transition: transform 0.25s;
}
.hl-btn-wa:hover {
  background: rgba(74, 157, 106, 0.1) !important;
  border-color: rgba(74, 157, 106, 0.4) !important;
}
.hl-btn-wa:hover svg { transform: scale(1.1); }
.hl-btn-wa:active { transform: scale(0.94); }
.hl-btn-wa:focus-visible {
  outline: 2px solid #c8702a;
  outline-offset: 2px;
}
/* "Find Offers" / "Book Now" — dark, the visually dominant action (opens
   the lead-capture flyout). */
.hl-btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 100px;
  background: #241a12;
  border: 1px solid #241a12;
  color: #fffdfa;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.25s, border-color 0.25s, transform 0.15s ease;
}
.hl-btn-cta:hover { background: #17110a; border-color: #17110a; }
.hl-btn-cta:active { transform: scale(0.96); }
.hl-btn-cta:focus-visible {
  outline: 2px solid #c8702a;
  outline-offset: 2px;
}
/* "Get Details" — filled #f35e0a, distinct from both "Find Offers" (dark)
   and the brand orange (#c8702a) used elsewhere, so the two card CTAs read
   as two different actions. Only used by [hns_listings]'s cards today, but
   lives here with the rest of the button system rather than as a one-off. */
.hl-btn-cta.hl-btn-cta-secondary {
  background: #f35e0a;
  border-color: #f35e0a;
  color: #fffdfa;
}
.hl-btn-cta.hl-btn-cta-secondary:hover {
  background: #d94f04;
  border-color: #d94f04;
}
.hl-btn-cta svg { flex-shrink: 0; }

/* ── Flyout: summary strip, savings badge, lead form ── */
.hl-flyout-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 10px;
  background: rgba(240, 232, 216, 0.045);
  border: 1px solid rgba(240, 232, 216, 0.1);
  border-radius: 14px;
}
.hl-flyout-summary:empty,
.hl-flyout-summary.is-empty { display: none; }
.hl-flyout-summary-img {
  flex-shrink: 0;
  width: 6rem;
  height: 60px;
  border-radius: 10px;
  background-color: #17110a;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.hl-flyout-summary-info { min-width: 0; }
.hl-flyout-summary-price {
  font-size: 17px;
  font-weight: 700;
  color: #f0e8d8;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.hl-flyout-summary-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(240, 232, 216, 0.55);
  max-width: 100%;
}
.hl-flyout-summary-location svg { flex-shrink: 0; color: #c8702a; }
.hl-flyout-summary-location span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Random "Save up to ₹X Lakhs" badge — same copy pool as the floating deal
   widget (HNS_DEAL_SAVINGS_POOL in functions.php), one line picked per
   shortcode render so it isn't identical across cards/visits. */
.hl-flyout-savings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px 13px;
  background: rgba(62, 209, 34, 0.8);
  border: 1px solid rgba(200, 112, 42, 0.3);
  border-radius: 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.hl-flyout-savings svg { flex-shrink: 0; color: #ffffff; }
.hl-flyout-savings:empty { display: none; }

/* Lead form status message (below the submit button) — sits inside the
   light .hl-flyout-form-wrap panel, so these need to read on white, not
   the flyout's dark background. */
.hl-lead-form-msg {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  min-height: 1em;
  color: #6f6152;
}
.hl-lead-form-msg.is-error { color: #c0392b; }
.hl-lead-form-msg.is-success { color: #3d8b5a; }

/* ── Lead form — a light card sitting on the flyout's dark background.
   Top accent bar reuses the exact device from .hl-sidebar-panel (3px warm-
   orange gradient across the top, never a side border) so this reads as
   the same system, not a one-off form dropped into the panel. ── */
.hl-flyout-form-wrap {
  position: relative;
  background: #fffdfa;
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.hl-lead-form-intro {
  font-size: 12.5px;
  line-height: 1.5;
  color: #7a6a58;
  margin-bottom: 10px;
}
.hl-flyout-form-wrap .ff-el-group,
.hl-flyout-form-wrap .ff_input_group {
  margin-bottom: 8px !important;
}
.hl-flyout-form-wrap label,
.hl-flyout-form-wrap .ff-el-form-label {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: #7a4100 !important;
  margin-bottom: 4px !important;
}
.hl-flyout-form-wrap .ff-el-form-control,
.hl-flyout-form-wrap input[type="text"],
.hl-flyout-form-wrap input[type="email"],
.hl-flyout-form-wrap input[type="tel"],
.hl-flyout-form-wrap input[type="number"],
.hl-flyout-form-wrap textarea,
.hl-flyout-form-wrap select {
  background: #fffdfa !important;
  border: 1.5px solid rgba(36, 26, 18, 0.2) !important;
  border-radius: 8px !important;
  color: #241a12 !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: inherit !important;
  transition: border-color 0.2s, background 0.2s !important;
}
.hl-flyout-form-wrap input::placeholder,
.hl-flyout-form-wrap textarea::placeholder {
  color: rgba(36, 26, 18, 0.32) !important;
}
.hl-flyout-form-wrap input:focus,
.hl-flyout-form-wrap textarea:focus,
.hl-flyout-form-wrap select:focus {
  border-color: #c8702a !important;
  background: rgba(200, 112, 42, 0.035) !important;
}
.hl-flyout-form-wrap textarea {
  min-height: 80px !important;
  resize: vertical !important;
}
.hl-flyout-form-wrap input[readonly],
.hl-flyout-form-wrap input[readonly]:focus {
  opacity: 0.65 !important;
  cursor: default !important;
  border-color: rgba(36, 26, 18, 0.12) !important;
  background: rgba(36, 26, 18, 0.03) !important;
}
.hl-flyout-form-wrap .ff_submit_btn_container,
.hl-flyout-form-wrap button[type="submit"],
.hl-flyout-form-wrap input[type="submit"],
.hl-flyout-form-wrap .ff-btn-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #f35e0a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 12px 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  width: 100% !important;
  font-family: inherit !important;
  transition: background 0.2s, transform 0.15s ease !important;
  margin-top: 4px !important;
}
.hl-flyout-form-wrap button[type="submit"]:hover,
.hl-flyout-form-wrap .ff-btn-submit:hover {
  background: #b5611f !important;
}
.hl-flyout-form-wrap button[type="submit"]:active,
.hl-flyout-form-wrap .ff-btn-submit:active {
  transform: scale(0.98);
}
.hl-flyout-form-wrap .ff-btn-submit svg { flex-shrink: 0; }
.hl-flyout-form-wrap .error {
  color: #c0392b !important;
  font-size: 11px !important;
}

/* ── "requirements" break — fully custom form, own markup/classes only
   (hl-lf-*), no dependency on FluentForm's own generated markup/classes —
   that dependency was the entire source of the earlier CSS-override
   fighting. A real FluentForm still exists per-instance (`.hl-lf-real`,
   visually hidden) purely as the submission engine: this form's JS syncs
   values into it by field `name` and clicks its real submit button, same
   technique already proven by the site's #hns-leadgen widget
   (hns_leadgen_output() in the child theme's functions.php). Colors
   lifted 1:1 from that widget's --hns-* custom properties. ── */
.hl-break-leadform {
  position: relative;
  background: #110903;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 16px 16px 14px;
}
/* Same technique as hns_leadgen_output()'s CSS-hide of the real form —
   NOT display:none, so FluentForm's own init JS (which can depend on the
   element having real layout) never has a reason to behave differently
   than a normally-embedded form. */
.hl-lf-real {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
/* Row 1: location + budget pill cards, side by side.
   Row 2: name/phone/email, side by side in a single line of 3. */
.hl-lf-row {
  display: grid;
  gap: 12px;
}
.hl-lf-row + .hl-lf-row { margin-top: 12px; }
.hl-lf-row-2col { grid-template-columns: 1fr 1fr; }
.hl-lf-row-3col { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) {
  .hl-lf-row-2col,
  .hl-lf-row-3col { grid-template-columns: 1fr; }
}
.hl-lf-row > * { min-width: 0; }
.hl-lf-card {
  background: #040201;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 12px 14px;
}
.hl-lf-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #f6f2fb;
  margin-bottom: 7px;
}
.hl-lf-label small { color: #9d92b6; font-weight: 600; }
.hl-lf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-lf-pill {
  background: #120e19;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  color: #f6f2fb;
  padding: 7px 12px;
  min-height: 36px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease-out, background 0.18s ease-out, transform 0.12s ease-out;
}
.hl-lf-pill:hover { border-color: rgba(255, 132, 56, 0.55); }
.hl-lf-pill:active { transform: scale(0.97); }
.hl-lf-pill[aria-pressed="true"] {
  background: rgba(255, 132, 56, 0.16);
  border-color: #ff8438;
  color: #ffd9bd;
}
/* Fields sit side by side in .hl-lf-row-3col (grid handles the gap) — the
   stacked margin only applies when the row collapses to 1 column ≤700px. */
@media (max-width: 700px) {
  .hl-lf-field + .hl-lf-field { margin-top: 10px; }
}
.hl-lf-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #f6f2fb;
  margin-bottom: 5px;
}
.hl-lf-field label small { color: #9d92b6; font-weight: 600; }
.hl-lf-req { color: #ff8438; }
.hl-lf-input {
  width: 100%;
  background: #120e19;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  color: #f6f2fb;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  padding: 9px 12px;
  min-height: 40px;
  outline: none;
  transition: border-color 0.18s ease-out;
}
.hl-lf-input::placeholder { color: #9d92b6; font-weight: 500; }
.hl-lf-input:focus { border-color: #ff8438; }
.hl-lf-input[aria-invalid="true"] { border-color: #ff7b66; }
.hl-lf-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(100deg, #ff933c, #ff9a3c);
  color: #2b1105;
  border: none;
  border-radius: 11px;
  min-height: 44px;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(255, 132, 56, 0.18), 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease-out, filter 0.15s ease-out;
  margin-top: 12px;
}
.hl-lf-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.hl-lf-submit:active { transform: scale(0.98); }
.hl-lf-submit[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.hl-lf-pill:focus-visible,
.hl-lf-submit:focus-visible {
  outline: 2px solid #ff8438;
  outline-offset: 2px;
}
.hl-lf-input:focus-visible { outline: none; } /* border-color focus state above already carries this */
.hl-lf-msg {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  min-height: 1em;
  color: #c1b7d4;
  text-align: center;
}
.hl-lf-msg.is-error { color: #ffb3a6; }
.hl-lf-msg.is-success { color: #8dffc2; }
@media (prefers-reduced-motion: reduce) {
  .hl-lf-pill, .hl-lf-submit { transition: none; }
}

/* ── Shared responsive overrides ── */
@media (max-width: 760px) {
  /* Title never actually wrapped next to the price on a row (measured
     112px of 257px available even with flex:1/min-width:0), so both card
     types stack title above price on mobile instead. */
  .hl-card-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 2px; }
  .hl-card-title { -webkit-line-clamp: 2; }
  /* [hns_listings] shows a second price copy below the excerpt on mobile
     (.hl-card-price-mobile, listings-only markup) and hides this one;
     [hns_featured_projects] has no mobile-price markup so this simply
     hides the head price there with nothing to replace it — harmless,
     .hf-card-price's own footer-row price still shows normally. */
  .hl-card-head .hl-card-price { display: none; }
}
@media (max-width: 440px) {
  .hl-card-body { padding: 16px 16px 18px; }
  .hl-card-footer { flex-wrap: wrap; }
  .hl-btn-cta { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hl-card-img,
  .hl-btn-cta,
  .hl-btn-wa,
  .hl-btn-wa svg,
  .hl-card-title-link { transition: none !important; }
}