/* =====================================================================================
   HOPE reskin - the SHAPE layer.
   reskin.mjs has already moved every colour, font and radius in the existing CSS onto
   HOPE's palette. This sheet only does what a value swap cannot: it re-shapes the
   existing components (same class names, same markup, same scripts) into HOPE's
   language - the blue banner, flat 8px buttons, soft blue-tinted card shadows.
   Loaded LAST, so equal-specificity !important rules here win over public-ui.css.
   ===================================================================================== */
:root {
  --hope-primary: #13436b; --hope-hover: #0b1f3d; --hope-press: #0a1424; --hope-deep: #0b1f3d;
  --hope-soft: rgba(19, 67, 107, .10); --hope-soft-2: rgba(19, 67, 107, .18);
  --hope-ink: #0f1c33; --hope-muted: #5b6b82; --hope-border: #e2e9f2; --hope-ground: #f2f6fb;
  --hope-night: #0a1424; --hope-night-card: #13294a; --hope-night-line: #27406a;
  --hope-shadow: 0 10px 30px 0 rgba(11, 31, 61, .05);
  --hope-shadow-lift: 0 16px 40px -6px rgba(11, 31, 61, .10);
  --hope-shadow-pop: 0 14px 40px -4px rgba(11, 31, 61, .16);
  --hope-shadow-active: 0 10px 20px -10px rgba(19, 67, 107, .62);
  --hope-ease: cubic-bezier(.22, .61, .36, 1);
  --hope-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230b1f3d'/%3E%3Cstop offset='.55' stop-color='%2313436b'/%3E%3Cstop offset='1' stop-color='%232a5182'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='.14'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1440' height='320' fill='url(%23a)'/%3E%3Cpath d='M360 320C520 170 660 40 930 0h250C930 70 780 210 660 320z' fill='url(%23b)'/%3E%3Cpath d='M780 320C930 170 1080 70 1440 36v86c-300 32-430 120-560 198z' fill='%23ffffff' fill-opacity='.07'/%3E%3Cpath d='M0 236C220 190 310 110 440 0h130C450 150 320 250 0 320z' fill='%230a1424' fill-opacity='.35'/%3E%3Cpath d='M1060 0c90 70 220 110 380 110V0z' fill='%23b11d29' fill-opacity='.22'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- base */
html body.public-body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  background: var(--hope-ground) !important;
  color: var(--hope-ink);
  -webkit-font-smoothing: antialiased;
}
html body.public-body :is(h1, h2, h3, h4, .stat-value, .step-title) { letter-spacing: -.02em; }
html body.public-body :is(section.bg-white, .bg-white.py-20, #faq) { background: var(--hope-ground) !important; }
html body.public-body ::selection { background: var(--hope-soft-2); }
html body.public-body :focus-visible { outline: 0 !important; box-shadow: 0 0 0 4px var(--hope-soft-2) !important; border-radius: 8px; }

/* ---------------------------------------------------------------- nav */
/* OPAQUE, like every other surface on these two pages. At .88 with a blur behind it the page
   printed straight through the header - the price, a section title, a phone number, sliding
   under "Home / Deals / Sell Your Deal" on every scroll - and a header you can read the page
   through is the one place that reads as a rendering fault rather than as a style. The blur is
   gone with it: it makes a stacking context, and over a flat white page it was buying a softness
   that nothing else here has. */
html body.public-body .site-nav {
  background: #fff !important;
  border-bottom: 1px solid var(--hope-border) !important;
  box-shadow: none !important;
}
html body.public-body .site-nav-link {
  border-radius: 8px; padding: 8px 12px !important; color: var(--hope-muted) !important; font-weight: 500 !important;
  transition: background-color 200ms var(--hope-ease), color 200ms var(--hope-ease);
}
html body.public-body .site-nav-link:hover { background: var(--hope-soft) !important; color: var(--hope-primary) !important; }
html body.public-body .site-nav-link.site-nav-link-active,
html body.public-body .site-nav-link[aria-current="page"] {
  background: var(--hope-primary) !important; color: #fff !important; font-weight: 600 !important; box-shadow: var(--hope-shadow-active);
}
html body.public-body .site-nav-link::after { display: none !important; }

/* ---------------------------------------------------------------- buttons
   The old signature button (email-btn) carried a lit accent bar, a glow and a three-stop
   face gradient. HOPE's button is flat: one colour, 8px corners, a blue shadow on the
   primary. Same element, same variants - only the face changes. */
html body :is(.email-btn, .btn-primary, .btn-secondary, .site-button-primary, .site-button-secondary, .site-profile-item-primary, .site-profile-trigger) {
  border-radius: 8px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: background-color 200ms var(--hope-ease), box-shadow 200ms var(--hope-ease), transform 180ms var(--hope-ease), color 200ms var(--hope-ease) !important;
  filter: none !important;
}
html body .email-btn::before, html body .email-btn::after,
html body :is(.btn-primary, .btn-secondary, .site-button-primary, .site-button-secondary)::before, html body :is(.btn-primary, .btn-secondary, .site-button-primary, .site-button-secondary)::after { display: none !important; }
html body .email-btn .email-btn-label { margin-right: 0 !important; }
html body .email-btn { justify-content: center !important; padding: 12px 20px !important; }

html body :is(.btn-primary, .email-btn--red, .email-btn--navy, .site-profile-item-primary) {
  background: var(--hope-primary) !important; background-image: none !important; color: #fff !important;
  box-shadow: 0 6px 14px -4px rgba(19, 67, 107, .55) !important; border: 0 !important;
}
html body :is(.btn-primary, .email-btn--red, .email-btn--navy, .site-profile-item-primary):hover {
  background: var(--hope-hover) !important; transform: translateY(-1px); box-shadow: var(--hope-shadow-active) !important;
}
html body :is(.btn-primary, .email-btn--red, .email-btn--navy, .site-profile-item-primary):active { background: var(--hope-press) !important; transform: none; }

/* the second button on a row is HOPE's soft button, so two blue slabs never sit side by side */
html body :is(.btn-secondary, .site-button-secondary, .email-btn--navy) {
  background: var(--hope-soft) !important; background-image: none !important; color: var(--hope-primary) !important;
  box-shadow: none !important; border: 0 !important;
}
html body :is(.btn-secondary, .email-btn--navy):hover { background: var(--hope-soft-2) !important; }
html body .email-btn--gold { background: var(--jhb-gold, #f5b301) !important; background-image: none !important; color: var(--jhb-navy-deep, #0b1f3d) !important; }
html body .email-btn--green { background: #16a34a !important; background-image: none !important; color: #fff !important; box-shadow: 0 6px 14px -4px rgba(22, 163, 74, .45) !important; }
html body .email-btn--outline {
  background: #fff !important; background-image: none !important; color: var(--hope-ink) !important;
  border: 1px solid var(--hope-border) !important; box-shadow: none !important;
}
html body .email-btn--outline:hover { border-color: rgba(19, 67, 107, .5) !important; color: var(--hope-primary) !important; }

/* ---------------------------------------------------------------- shared components */
html body.public-body :is(.feature-card, .faq-item, .site-hero-stat, .cash-buyers-form, .step-node, .stat-card, [class*="rounded-2xl"].bg-white, [class*="rounded-3xl"].bg-white) {
  border-radius: 16px !important;
  box-shadow: var(--hope-shadow) !important;
  border-color: transparent !important;
}
html body.public-body :is(.feature-card, .faq-item):hover { box-shadow: var(--hope-shadow-lift) !important; transform: translateY(-3px); }
html body.public-body .feature-card { transition: transform 300ms var(--hope-ease), box-shadow 300ms var(--hope-ease) !important; }
html body.public-body :is(.feature-icon-wrap, .feature-icon-wrap-navy, .feature-icon-wrap-red) {
  background: var(--hope-soft) !important; background-image: none !important; color: var(--hope-primary) !important;
  border-radius: 12px !important; box-shadow: none !important; border: 0 !important;
}
html body.public-body .section-eyebrow {
  background: var(--hope-soft) !important; color: var(--hope-primary) !important; border: 0 !important;
  border-radius: 999px !important; box-shadow: none !important; font-weight: 600 !important; letter-spacing: .08em !important;
}
html body.public-body .section-eyebrow i { color: var(--hope-primary) !important; }
html body.public-body .section-underline::after { background: var(--hope-primary) !important; height: 3px !important; border-radius: 99px !important; }
html body.public-body :is(.section-title-gradient, .gradient-text) {
  background-image: none !important; -webkit-text-fill-color: currentColor !important; color: inherit !important;
}
html body.public-body :is(h1, h2, h3).text-primary, html body.public-body :is(h2, h3) .text-primary { color: var(--hope-ink) !important; }
html body.public-body .site-badge {
  background: #fff !important; border: 0 !important; border-radius: 999px !important; box-shadow: var(--hope-shadow) !important;
}
html body.public-body :is(.step-number, .step-number-red, .step-number-navy) {
  background: var(--hope-primary) !important; background-image: none !important; color: #fff !important;
  border-radius: 12px !important; border: 0 !important; box-shadow: var(--hope-shadow-active) !important;
}
html body.public-body .stats-bar {
  background: #fff !important; background-image: none !important; border: 0 !important;
  border-radius: 16px !important; box-shadow: var(--hope-shadow-lift) !important;
}
html body.public-body .stats-bar .stat-value { color: var(--hope-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; font-weight: 700 !important; }
html body.public-body .stats-bar .stat-label { color: var(--hope-muted) !important; }
html body.public-body .stats-bar .stat-item + .stat-item { border-color: var(--hope-border) !important; }

/* ---------------------------------------------------------------- the blue banner
   HOPE's page head: the top hero wears the band, its copy goes white, and the white
   cards in it (the hero photo, the discount stat) float on top of it. */
html body.public-body section.site-hero:not([data-home-section]) {
  background: #13436b var(--hope-band) center / 100% 100% no-repeat !important;
}
html body.public-body section.site-hero:not([data-home-section])::before,
html body.public-body section.site-hero:not([data-home-section]) :is(.hero-orb) { display: none !important; }
html body.public-body section.site-hero:not([data-home-section]) :is(h1, h1 span, .text-primary, .text-secondary, .section-title-gradient) {
  color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; text-shadow: 0 1px 12px rgba(10, 20, 36, .18);
}
html body.public-body section.site-hero:not([data-home-section]) > div > .grid > div:first-child :is(p, .text-gray-600, .text-gray-500, .text-slate-600, span.font-medium) {
  color: rgba(255, 255, 255, .92) !important;
}
html body.public-body section.site-hero:not([data-home-section]) .trust-glow-emerald i { color: #fff !important; }
html body.public-body section.site-hero:not([data-home-section]) .site-badge .text-slate-700 { color: var(--hope-ink) !important; }
html body.public-body section.site-hero:not([data-home-section]) .btn-primary { background: #fff !important; color: var(--hope-deep) !important; box-shadow: 0 10px 24px -8px rgba(10, 20, 36, .35) !important; }
html body.public-body section.site-hero:not([data-home-section]) .btn-primary:hover { background: #eef3f9 !important; }
html body.public-body section.site-hero:not([data-home-section]) .btn-secondary { background: rgba(255, 255, 255, .16) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .34) !important; }
html body.public-body section.site-hero:not([data-home-section]) .btn-secondary:hover { background: rgba(255, 255, 255, .28) !important; }
html body.public-body section.site-hero:not([data-home-section]) .hero-photo-stack > .absolute.inset-0 { background: rgba(255, 255, 255, .16) !important; }
html body.public-body .site-hero-card { border-radius: 16px !important; box-shadow: 0 24px 60px -12px rgba(10, 20, 36, .45) !important; }
html body.public-body .hero-slide-indicator.is-active::before { background: #fff !important; }
html body.public-body .hero-slide-label { border-radius: 8px !important; background: rgba(255, 255, 255, .95) !important; color: var(--hope-ink) !important; }
html body.public-body .hero-slide-label i { color: var(--hope-primary) !important; }

/* The "why us" band re-uses .site-hero - on HOPE it is simply the ground. */
html body.public-body section.site-hero[data-home-section] { background: var(--hope-ground) !important; }
html body.public-body section.site-hero[data-home-section]::before { display: none !important; }

/* ---------------------------------------------------------------- the navy bands
   How Buying Works -> the light ground with white step cards (it sits right under the
   blue hero, and two blue bands back to back read as one mistake).
   Recent Deals and the buyers-list band -> the HOPE banner, with the carousel's white
   cards floating on it. */
html body.public-body .how-buying-section { background: var(--hope-ground) !important; color: var(--hope-muted) !important; }
html body.public-body .how-buying-section::before { display: none !important; }
html body.public-body .how-buying-section :is(h2, .section-underline, .step-title) { color: var(--hope-ink) !important; }
html body.public-body .how-buying-section :is(.section-copy-tight, .section-stack > p, .step-body) { color: var(--hope-muted) !important; }
html body.public-body .how-buying-section .step-node {
  background: #fff !important; border: 0 !important; border-radius: 16px !important; box-shadow: var(--hope-shadow) !important;
}
html body.public-body .how-buying-section .step-node:hover { box-shadow: var(--hope-shadow-lift) !important; transform: translateY(-3px); }
html body.public-body .how-buying-section :is(.steps-track::before, .step-connector) { background: var(--hope-border) !important; }

html body.public-body :is(.recently-sold-section, .section-band-navy, .site-cta-band) {
  background: #13436b var(--hope-band) center / cover no-repeat !important;
}
html body.public-body :is(.recently-sold-section, .section-band-navy, .site-cta-band)::before,
html body.public-body :is(.recently-sold-section, .section-band-navy, .site-cta-band)::after { display: none !important; }
html body.public-body :is(.recently-sold-section, .section-band-navy, .site-cta-band) .section-eyebrow {
  background: rgba(255, 255, 255, .16) !important; color: #fff !important;
}
html body.public-body :is(.recently-sold-section, .section-band-navy, .site-cta-band) .section-eyebrow i { color: #fff !important; }
html body.public-body :is(.recently-sold-section, .section-band-navy, .site-cta-band) .btn-primary { background: #fff !important; color: var(--hope-deep) !important; box-shadow: 0 10px 24px -8px rgba(10, 20, 36, .35) !important; }
html body.public-body :is(.recently-sold-section, .section-band-navy, .site-cta-band) .email-btn--outline { background: rgba(255, 255, 255, .16) !important; color: #fff !important; border-color: rgba(255, 255, 255, .34) !important; }

/* ---------------------------------------------------------------- the deal carousel
   Same rail, same track, same slides and nav - redrawn as HOPE cards. */
html body.public-body .deal-rail .deal-rail-shell,
html body.public-body .deal-rail .deal-rail-card,
html body.public-body .deal-rail-slide {
  border-radius: 16px !important; border: 0 !important; background: #fff !important;
  box-shadow: 0 16px 40px -10px rgba(10, 20, 36, .35) !important; overflow: hidden;
}
html body.public-body .deal-rail .deal-rail-card:hover,
html body.public-body .deal-rail .deal-rail-shell:hover { transform: translateY(-4px) !important; box-shadow: 0 24px 50px -12px rgba(10, 20, 36, .45) !important; }
html body.public-body .deal-rail .deal-rail-body { background: #fff !important; }
html body.public-body .deal-rail-nav {
  width: 44px !important; height: 44px !important; border-radius: 12px !important;
  background: #fff !important; color: var(--hope-primary) !important; border: 0 !important;
  box-shadow: 0 10px 24px -8px rgba(10, 20, 36, .35) !important;
}
html body.public-body .deal-rail-nav:hover { background: #eef3f9 !important; }
html body.public-body :is(.deal-type-badge, .deal-overlay-pill, .deal-status-pill) { border-radius: 999px !important; box-shadow: 0 4px 12px rgba(11, 31, 61, .18) !important; }
html body.public-body .deal-overlay-pill { background: rgba(10, 20, 36, .72) !important; backdrop-filter: blur(6px); }

/* ---------------------------------------------------------------- FAQ */
html body.public-body .faq-item { background: #fff !important; border: 0 !important; }
html body.public-body .faq-item .faq-trigger { color: var(--hope-ink) !important; font-weight: 600 !important; }
html body.public-body .faq-item .faq-trigger-icon { background: var(--hope-soft) !important; color: var(--hope-primary) !important; border: 0 !important; border-radius: 8px !important; }
html body.public-body .faq-item::before { background: var(--hope-primary) !important; }

/* ---------------------------------------------------------------- footer -> HOPE night */
html body.public-body .site-footer {
  background: var(--hope-night) !important; background-image: none !important; box-shadow: none !important;
}
html body.public-body .site-footer::before, html body.public-body .site-footer::after { display: none !important; }
/* The footer is navy, so its text is pale - but a blanket over every span in it also reaches
   INTO controls that paint their own surface, and the language switcher is one: a white pill
   whose only word came out at 1.87:1, which reads as a button with nothing on it. A control that
   carries its own background is not the footer's text. */
html body.public-body .site-footer :is(p, li, span, a):not(.ncdd-lang-switch *) { color: #aebfd8 !important; }
html body.public-body .site-footer :is(h2, h3, h4, strong) { color: #ffffff !important; }
html body.public-body .site-footer a:hover { color: #88a0c2 !important; }
html body.public-body .site-footer :is(.bg-secondary, .bg-blue-800) { background: var(--hope-night-card) !important; border-radius: 8px !important; }

/* ---------------------------------------------------------------- inputs */
html body.public-body :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  border-radius: 8px !important; border-color: var(--hope-border) !important;
}
html body.public-body :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus {
  border-color: var(--hope-primary) !important; box-shadow: 0 0 0 4px var(--hope-soft) !important; outline: 0 !important;
}
html body.public-body :is(input[type=checkbox], input[type=radio]) { accent-color: var(--hope-primary); }

@media (prefers-reduced-motion: reduce) {
  html body.public-body * { transition-duration: 1ms !important; }
}

/* How Buying Works: the navy band's own step rules carry an extra class, so these do too. */
html body.public-body .how-buying-section .steps-track .step-title { color: var(--hope-ink) !important; }
html body.public-body .how-buying-section .steps-track .step-body { color: var(--hope-muted) !important; }
html body.public-body .how-buying-section .steps-track .step-node::before { background: var(--hope-primary) !important; opacity: 1 !important; }
html body.public-body .how-buying-section .steps-track::before { background: var(--hope-border) !important; opacity: 1 !important; }
html body.public-body :is(.how-buying-section, .recently-sold-section, .section-band-navy, .site-cta-band)::after { display: none !important; }

/* The classic accent bar and its glow live on ::before/::after with rules that out-rank a bare
   class. content:none removes the box outright, whatever display another rule forces. */
html body.public-body :is(a, button, span, div):is(.email-btn, .btn-primary, .btn-secondary, .site-button-primary, .site-button-secondary, .site-profile-item-primary)::before,
html body.public-body :is(a, button, span, div):is(.email-btn, .btn-primary, .btn-secondary, .site-button-primary, .site-button-secondary, .site-profile-item-primary)::after {
  content: none !important; display: none !important;
}

/* Labels that were gold-on-navy are white on HOPE blue - orange on blue fails contrast. */
html body.public-body #propertyContent .deal-stat-chip-price { background: var(--hope-primary) !important; box-shadow: var(--hope-shadow-active) !important; border: 0 !important; border-radius: 8px !important; }
html body.public-body #propertyContent .deal-stat-chip-price .deal-stat-chip-label { color: rgba(255, 255, 255, .82) !important; }
html body.public-body #propertyContent .deal-stat-chip-price .deal-chip-tip-mark { color: #fff !important; border-color: rgba(255, 255, 255, .6) !important; background: rgba(255, 255, 255, .12) !important; }
html body.public-body #propertyContent .pricing-price-header :is(.pricing-kicker, .pricing-kicker *, p, span:not(.pricing-price-value)) { color: rgba(255, 255, 255, .86) !important; }
html body.public-body #propertyContent .pricing-price-header :is(.deal-tip-mark, .pricing-help-mark) { color: #fff !important; background: rgba(255, 255, 255, .16) !important; border-color: rgba(255, 255, 255, .5) !important; }
html body.public-body .hero-slide-indicators { background: rgba(10, 20, 36, .45) !important; backdrop-filter: blur(6px); border-radius: 999px !important; }

/* The deal page re-draws the accent bar under #propertyContent with up to two ids of weight.
   :not(#_h) adds an id's weight without narrowing what matches, so this out-ranks all of them. */
html body.public-body .email-btn:not(#_h1):not(#_h2):not(#_h3)::before,
html body.public-body .email-btn:not(#_h1):not(#_h2):not(#_h3)::after {
  content: none !important; display: none !important;
}
html body.public-body .email-btn:not(#_h1):not(#_h2):not(#_h3) { justify-content: center !important; padding-left: 20px !important; }

/* ---------------------------------------------------------------- deal page: the banner
   HOPE puts its blue band behind the page head and floats the first card over it. The deal
   page's head card already exists (.deal-top-bar); the band goes behind the breadcrumb and
   the top of that card, painted on the page itself so no markup moves. */
html body.public-body:has(#propertyContent) {
  background: var(--hope-ground) var(--hope-band) 0 0 / 100% 360px no-repeat !important;
}
html body.public-body:has(#propertyContent) .site-inline-glass {
  background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
}
html body.public-body:has(#propertyContent) .site-inline-glass :is(a, span, i, svg, div) { color: rgba(255, 255, 255, .9) !important; }
html body.public-body:has(#propertyContent) .site-inline-glass #breadcrumbTitle { color: #fff !important; font-weight: 600; }
html body.public-body #propertyContent .deal-top-bar {
  border: 0 !important; border-radius: 16px !important; box-shadow: var(--hope-shadow-pop) !important; background: #fff !important;
}
html body.public-body #propertyContent .deal-top-bar::before { display: none !important; }

/* ---------------------------------------------------------------- the nav's own breakpoint
   The desktop menu is `hidden md:flex`, so it switches on at 768px - and at 768px it does not
   fit. Measured: fourteen elements past the right edge of the viewport, "Sell Your Deal" set on
   three lines and "Browse Deals" on two inside an 81px bar, and it is still wrapping at 900.
   The first clean width is 1000.

   The five section links go below 1024 and the two CTAs and the account control stay. That is
   the right half to keep: the links are in the footer and in the page itself, while "Browse
   Deals" and "Sell Your Deal" are the only two things in the header a buyer is there to press -
   and hiding the whole cluster (which is what the markup's own `md:hidden` fallback does) would
   trade a broken row for a header with one link in it.

   It is CSS rather than a breakpoint edit because the markup is shared by every public page and
   this skin reaches two of them. */
@media (max-width: 1023px) {
  html body.public-body .site-nav .site-nav-link { display: none !important; }
  html body.public-body .site-nav [data-nav-actions] { gap: 8px !important; }
  html body.public-body .site-nav [data-nav-actions] :is(a, button) { white-space: nowrap !important; }
}