/* Supplementary styles for the rebuilt static site.
   Reuses the site's own tokens from site.css (--color--primary-1, --font-family--heading, etc.)
   Only fills in the layout classes the original Webflow markup doesn't already cover. */

body {
  font-family: var(--font-family--body);
  color: var(--color--body);
  margin: 0;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-family--heading);
  color: var(--color--heading);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Header */
.nav-top {
  background: var(--color--primary-1);
  color: var(--color--white);
  display: flex;
  gap: 24px;
  padding: 8px 24px;
  font-size: 14px;
  flex-wrap: wrap;
}
.nav-top a { color: var(--color--white); }

.nav-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
  color: var(--color--primary-1);
}
.nav-logo img { height: 32px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.dropdown { position: relative; cursor: pointer; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color--white);
  border: 1px solid var(--color--gray-2);
  min-width: 220px;
  z-index: 10;
  padding: 8px 0;
}
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block;
  padding: 8px 16px;
  color: var(--color--body);
}
.dropdown-menu a:hover { background: var(--color--gray-2); }

.nav-cta {
  background: var(--color--primary-1);
  color: var(--color--white);
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 600;
}

/* Page sections */
.page-hero {
  padding: 64px 24px 32px;
  max-width: 960px;
  margin: 0 auto;
}
.page-hero h1 { font-size: 40px; margin: 0; }

.page-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 32px;
  line-height: 1.6;
}

.page-gallery {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.page-gallery img { border-radius: 6px; }

.cross-links {
  background: var(--color--gray-2);
  padding: 48px 24px;
  text-align: center;
}
.cross-link-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 960px;
  margin: 24px auto 0;
}
.cross-link-grid a {
  background: var(--color--white);
  padding: 10px 18px;
  border-radius: 4px;
  border: 1px solid var(--color--gray-2);
}

.cta-band {
  background: var(--color--primary-1);
  color: var(--color--white);
  text-align: center;
  padding: 56px 24px;
}
.cta-band h2 { color: var(--color--white); }
.button, .button-outline {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 4px;
  font-weight: 600;
  margin: 8px;
}
.button {
  background: #dbe1e6;
  color: var(--color--primary-1);
}
.button-outline {
  border: 1px solid var(--color--white);
  color: var(--color--white);
}

/* Home page */
.hero {
  padding: 64px 24px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.hero h1 { font-size: 44px; margin-bottom: 16px; }
.hero p { max-width: 700px; margin: 0 auto 24px; font-size: 18px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 48px;
}
.card {
  border: 1px solid var(--color--gray-2);
  border-radius: 8px;
  padding: 24px;
}
.card h3 { margin-top: 0; }

/* Blog list */
.post-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 24px;
}
.post-list-item {
  border-bottom: 1px solid var(--color--gray-2);
  padding: 24px 0;
}

/* Footer */
.site-footer {
  background: var(--color--black);
  color: var(--color--white);
  margin-top: 48px;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px;
}
.footer-cols h5 {
  color: #9ca3af; /* gray, replaces the site's gold accent */
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.footer-cols a, .footer-cols p {
  display: block;
  color: var(--color--gray-1);
  font-size: 14px;
  margin-bottom: 8px;
}
.footer-bottom {
  border-top: 1px solid #333;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px;
  max-width: 1100px;
  margin: 0 auto;
  font-size: 13px;
  color: var(--color--gray-1);
}
.social-links a { display: inline; margin-left: 16px; }

/* For-sale listing grid */
.listing-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 48px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.listing-card {
  border: 1px solid var(--color--gray-2);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.listing-card-image {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color--gray-2);
}
.listing-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.listing-photo-count {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--color--white);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}
.listing-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.listing-card-title {
  font-family: var(--font-family--heading);
  color: var(--color--heading);
  font-size: 18px;
  font-weight: 700;
}
.listing-card-blurb {
  font-size: 14px;
  color: var(--color--gray-1);
  margin: 0;
  flex: 1;
}
.listing-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.listing-price {
  font-weight: 700;
  color: var(--color--primary-1);
  font-size: 15px;
}
.button-sm {
  display: inline-block;
  background: var(--color--primary-1);
  color: var(--color--white);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .nav-main { flex-direction: column; align-items: flex-start; }
  .hero h1 { font-size: 32px; }
  .page-hero h1 { font-size: 28px; }
}

/* Team / contact people cards */
.team-card .team-name {
  font-family: var(--font-family--heading), sans-serif;
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 4px;
  color: var(--color--primary-1);
}
.team-card .team-role {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 12px;
}
.team-card .team-contact {
  margin-bottom: 0;
  line-height: 1.9;
}
.team-card .team-contact a {
  color: var(--color--primary-1);
  font-weight: 500;
  word-break: break-word;
}

/* No motion. The rebuild ships no JavaScript, so the original Webflow
   scroll/load interactions cannot run. This also disables the leftover CSS
   transitions and animations inherited from the compiled Webflow stylesheet
   for anyone who asks for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Monthly sale pricing */
.listing-price-cur {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #6b7280;
}

/* ---------------------------------------------------------------------------
   Typography
   site.css declares @font-face rules for Chakrapetch and Poppins pointing at
   .ttf files that were never included in the Webflow scrape, so both faces
   failed and every page rendered in the browser's default sans-serif. The real
   families now load from Google Fonts (linked in base.njk) and are bound here.
   Headings: Chakra Petch. Body: Inter, regular weight for legibility.
--------------------------------------------------------------------------- */
:root {
  --font-family--heading: "Chakra Petch", "Chakrapetch", sans-serif;
  --font-family--body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  font-family: var(--font-family--body);
  font-weight: 400;               /* site.css set 500; regular reads better */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.nav-logo,
.listing-card-title,
.team-card .team-name {
  font-family: var(--font-family--heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Body-ish UI text that should not inherit the heading face. */
p, li, td, th, label, input, textarea, select,
.nav-links, .nav-top, .listing-card-blurb, .team-card .team-role,
.team-card .team-contact, .footer-cols, .footer-bottom, .listing-price,
.button, .button-outline, .button-sm {
  font-family: var(--font-family--body);
}

.button, .button-outline, .button-sm, .nav-cta {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Homepage hero
   Navy panel with the crane/transformer job photo behind it, matching the
   original site's layout: headline and intro on the left, capability summary
   with the phone number and monthly-sale button on the right.
--------------------------------------------------------------------------- */
.hero-image {
  position: relative;
  max-width: none;
  padding: 0;
  text-align: left;
  color: var(--color--white);
  background-color: var(--color--primary-1);
  background-image:
    linear-gradient(115deg,
      rgba(29, 57, 96, 0.97) 0%,
      rgba(29, 57, 96, 0.93) 42%,
      rgba(29, 57, 96, 0.72) 62%,
      rgba(29, 57, 96, 0.55) 100%),
    image-set(
      url("/assets/images/pts-rentals-hero.jpg") 1x);
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;
}

.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 24px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.hero-main h1 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  color: var(--color--white);
  margin: 0 0 18px;
  max-width: 16ch;
}
/* The original set the first word in a lighter weight. */
.hero-main h1 em {
  font-style: normal;
  font-weight: 500;
}
.hero-main p {
  max-width: 60ch;
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
}

.hero-aside {
  padding-top: 6px;
}
.hero-aside-copy {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 18px;
}
.hero-phone {
  display: block;
  font-family: var(--font-family--heading);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--color--white);
  text-decoration: none;
  margin-bottom: 14px;
}
.hero-phone:hover { text-decoration: underline; }

.hero-sale-btn {
  display: inline-block;
  background: var(--color--white);
  color: var(--color--primary-1);
  border: 0;
}
.hero-sale-btn:hover { background: #e8eef8; color: var(--color--primary-1); }

.hero-deals {
  display: inline-block;
  margin: 0 24px 40px;
  border-color: rgba(255, 255, 255, 0.75);
  color: var(--color--white);
}
.hero-deals:hover {
  background: var(--color--white);
  color: var(--color--primary-1);
}

@media (max-width: 860px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 48px 20px 20px;
  }
  .hero-main h1 { max-width: none; }
  .hero-image { background-position: center right; }
}

/* ---------------------------------------------------------------------------
   Marquee
   Deliberate exception to the site's no-motion rule, requested to match the
   original. CSS only, no JavaScript. The track holds two identical groups and
   slides exactly one group width, so the loop is seamless. The second group is
   aria-hidden so screen readers announce the message once instead of twelve
   times, and the whole thing stops for prefers-reduced-motion.
--------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  background: var(--color--black);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
}
.marquee-group {
  display: flex;
  flex-shrink: 0;
}
.marquee-item {
  font-family: var(--font-family--heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color--white);
  white-space: nowrap;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
}
.marquee-item::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6b7280;
  margin-left: 28px;
}
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ---------------------------------------------------------------------------
   Type scale
   site.css carries Webflow's desktop sizes (h2 48px, h3 40px) which were built
   for full-width hero sections. Dropped into a 250px card they overwhelm the
   copy, so the scale is tightened here to match the proportions on the
   original site and made fluid for small screens.
--------------------------------------------------------------------------- */
body { font-size: 16px; line-height: 1.6; }

h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.12; }
h2 { font-size: clamp(24px, 2.9vw, 36px); line-height: 1.18; }
h3 { font-size: clamp(19px, 2vw, 24px); line-height: 1.25; }
h4 { font-size: 20px; line-height: 1.3; }
h5 { font-size: 15px; line-height: 1.35; }

.page-body p, .page-body li { font-size: 16px; line-height: 1.7; }
.page-body h2 { margin-top: 34px; }
.page-body h3 { margin-top: 24px; margin-bottom: 6px; }

/* Cards: compact titles, quieter body copy. */
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p  { font-size: 14.5px; line-height: 1.6; margin-bottom: 12px; }
.card a  { font-size: 14.5px; font-weight: 600; }

.listing-card-title { font-size: 18px; line-height: 1.25; }
.listing-card-blurb { font-size: 14px; line-height: 1.6; }
.listing-price { font-size: 17px; font-weight: 700; }

.cta-band h2 { font-size: clamp(22px, 2.6vw, 32px); }
.cross-links h2 { font-size: clamp(21px, 2.4vw, 28px); }

.team-card .team-name { font-size: 21px; }

/* ---------------------------------------------------------------------------
   Body copy: Inter regular, never the heading face, never bold.
   site.css sets body{font-weight:500} and applies the Chakra Petch heading
   family to several text blocks, which left lead paragraphs rendering heavy and
   condensed. Headings stay Chakra Petch; everything else is Inter 400.
--------------------------------------------------------------------------- */
p, li, dd, dt, blockquote, figcaption, address,
label, input, textarea, select, button,
td, th, small, strong, em, span, a {
  font-family: var(--font-family--body);
}

p, li, dd, dt, blockquote, figcaption, address, small, td {
  font-weight: 400;
}

/* Lead paragraphs under a page title read as intro copy, not as a heading. */
.page-hero p,
.hero p,
.hero-main p,
.page-body p,
.listing-card-blurb,
.card p {
  font-family: var(--font-family--body);
  font-weight: 400;
}

.page-hero p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color--gray-1);
  max-width: 68ch;
}

/* Headings keep the display face. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-family--heading); }
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
  font-family: inherit;
}

strong, b { font-weight: 600; }


/* ===========================================================================
   HEADER, NAV, ACTION BAR, PRODUCT CARDS
   Written as one block. The nav markup pairs a <details> toggle with the link
   list as its SIBLING: forcing <details> content visible with CSS is
   unreliable, because the browser renders the child but drops it from the
   parent's layout box, which collapsed the desktop nav to zero width.
   =========================================================================== */

/* --- Sticky top bar ----------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--color--primary-1);
  color: var(--color--white);
}
.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 20px 12px;
  text-align: center;
}
.topbar-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 10px;
  font-size: 13px;
  line-height: 1.35;
}
.topbar-contacts a { color: rgba(255,255,255,.9); text-decoration: none; font-weight: 400; }
.topbar-contacts a:hover { color: #fff; text-decoration: underline; }
.topbar-sep { color: rgba(255,255,255,.4); }

.topbar-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 3px;
  color: var(--color--white);
  text-decoration: none;
  font-family: var(--font-family--heading);
  font-weight: 700;
  font-size: clamp(22px, 5vw, 29px);
  line-height: 1.15;
}
.topbar-phone:hover { text-decoration: underline; }
.topbar-phone .icon-phone { flex: none; }

/* --- Nav shell ---------------------------------------------------------- */
.navbar { background: var(--color--white); border-bottom: 1px solid #e3e9f4; }
.nav-main {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-logo { display: inline-flex; align-items: center; flex: none; }
.nav-logo img { display: block; width: auto; height: 34px; max-width: 60vw; }

.nav-toggle { flex: none; }
.nav-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  background: var(--color--primary-1);
  color: var(--color--white);
  font-family: var(--font-family--body);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 6px;
  user-select: none;
}
.nav-toggle-btn::-webkit-details-marker,
.nav-toggle-btn::marker { display: none; content: ""; }
.nav-burger { display: inline-flex; flex-direction: column; gap: 4px; }
.nav-burger span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

.dropdown-toggle > summary { list-style: none; cursor: pointer; }
.dropdown-toggle > summary::-webkit-details-marker,
.dropdown-toggle > summary::marker { display: none; content: ""; }

/* --- Mobile nav (drawer) ------------------------------------------------ */
@media (max-width: 900px) {
  .nav-toggle:not([open]) + .nav-links { display: none; }
  .nav-toggle[open] + .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 6px 20px 18px;
    background: var(--color--white);
    border-bottom: 1px solid #e3e9f4;
    box-shadow: 0 12px 24px rgba(29,57,96,.14);
    max-height: 72vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 55;
  }
  .nav-links > a,
  .dropdown-toggle > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 2px;
    border-bottom: 1px solid #eef2f8;
    font-size: 16px;
    font-weight: 500;
    color: var(--color--primary-1);
    text-decoration: none;
  }
  .dropdown-toggle > summary::after { content: "+"; color: #6b7280; font-weight: 600; }
  .dropdown-toggle[open] > summary::after { content: "\2013"; }

  .dropdown { position: static; }
  .dropdown-toggle:not([open]) + .dropdown-menu { display: none; }
  .dropdown-toggle[open] + .dropdown-menu {
    display: flex;
    flex-direction: column;
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    min-width: 0;
    padding: 2px 0 8px 14px;
  }
  .dropdown-menu a {
    padding: 10px 0;
    font-size: 14.5px;
    color: var(--color--gray-1);
    text-decoration: none;
  }
  .nav-cta {
    margin-top: 14px;
    justify-content: center;
    background: var(--color--primary-1);
    color: var(--color--white) !important;
    border-bottom: 0 !important;
    border-radius: 6px;
    font-weight: 600;
  }
}

/* --- Desktop nav -------------------------------------------------------- */
@media (min-width: 901px) {
  .nav-toggle { display: none; }
  .nav-links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .nav-links > a,
  .dropdown-toggle > summary {
    font-size: 15px;
    color: var(--color--gray-1);
    text-decoration: none;
    white-space: nowrap;
  }
  .nav-links > a:hover,
  .dropdown-toggle > summary:hover { color: var(--color--primary-1); }

  .dropdown { position: relative; }
  .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: var(--color--white);
    border: 1px solid #e3e9f4;
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(29,57,96,.16);
    padding: 8px 0;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 70;
  }
  /* Hover for mice; [open] and focus-within so keyboard and touch work too,
     which the original hover-only markup never supported. */
  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu,
  .dropdown-toggle[open] + .dropdown-menu { display: block; }
  .dropdown-menu a {
    display: block;
    padding: 9px 16px;
    font-size: 14.5px;
    color: var(--color--gray-1);
    text-decoration: none;
    white-space: nowrap;
  }
  .dropdown-menu a:hover { background: var(--color--gray-2); color: var(--color--primary-1); }
  .nav-cta {
    background: var(--color--primary-1);
    color: var(--color--white) !important;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
  }
}

/* --- Sticky bottom action bar (mobile) ---------------------------------- */
.action-bar { display: none; }
@media (max-width: 900px) {
  .action-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97);
    border-top: 1px solid #e3e9f4;
    box-shadow: 0 -6px 18px rgba(29,57,96,.12);
  }
  .action-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    border-radius: 8px;
    font-family: var(--font-family--body);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
  }
  .action-bar-call { background: var(--color--white); color: var(--color--primary-1); border: 2px solid var(--color--primary-1); }
  .action-bar-sale { background: var(--color--primary-1); color: var(--color--white); border: 2px solid var(--color--primary-1); }
  body { padding-bottom: 78px; }
}

/* --- Hero adjustments --------------------------------------------------- */
.hero-image .hero-main p { font-size: 15.5px; max-width: 60ch; margin-left: 0; margin-right: 0; }
.hero-image .hero-aside-copy { font-size: 13.5px; line-height: 1.6; margin-left: 0; margin-right: 0; }
.hero-main .button {
  background: var(--color--white);
  color: var(--color--primary-1);
  border: 2px solid var(--color--white);
}
.hero-main .button:hover { background: #e8eef8; color: var(--color--primary-1); }
.hero-sale-btn { background: transparent; color: var(--color--white); border: 2px solid rgba(255,255,255,.85); }
.hero-sale-btn:hover { background: var(--color--white); color: var(--color--primary-1); }

/* --- Product cards ------------------------------------------------------ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px 48px;
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color--white);
  border: 1px solid #e3e9f4;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(29,57,96,.05);
}
.product-card-media {
  position: relative;
  display: block;
  background: var(--color--gray-2);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.product-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card-tag {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--color--primary-1);
  color: var(--color--white);
  font-family: var(--font-family--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.product-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 18px; }
.product-card-title {
  font-family: var(--font-family--heading);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color--primary-1);
  margin: 0 0 8px;
}
.product-card-blurb {
  font-family: var(--font-family--body);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color--gray-1);
  margin: 0 0 16px;
  flex: 1;
}
.product-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--color--primary-1);
  color: var(--color--white);
  font-family: var(--font-family--body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.product-card-cta:hover { background: #162c4a; color: var(--color--white); }

/* --- Mobile layout polish ----------------------------------------------- */
@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; padding: 24px 20px 32px; }
  .product-card-body { padding: 14px 13px 15px; }
  .product-card-title { font-size: 16px; }
  .product-card-blurb { font-size: 13.5px; margin-bottom: 12px; }
  .product-card-cta { font-size: 14px; min-height: 42px; }

  .page-hero { padding: 26px 20px 8px; }
  .page-hero h1 { font-size: clamp(26px, 7vw, 34px); }
  .page-body { padding-left: 20px; padding-right: 20px; }
  .card-grid { grid-template-columns: 1fr; gap: 14px; padding: 0 20px 32px; }
  .listing-grid { grid-template-columns: 1fr; gap: 16px; padding-left: 20px; padding-right: 20px; }
  .cta-band { padding-left: 20px; padding-right: 20px; }
  .cta-band .button, .cta-band .button-outline { width: 100%; margin: 6px 0 0; }
  .footer-cols { padding-left: 20px; padding-right: 20px; }

  .hero-inner { grid-template-columns: 1fr; gap: 24px; padding: 40px 20px 8px; }
  .hero-main h1 { max-width: none; }
  .hero-main .button, .hero-sale-btn { width: 100%; text-align: center; justify-content: center; }
  .hero-phone { text-align: center; font-size: clamp(28px, 8vw, 36px); }
  .hero-deals { margin: 0 20px 30px; width: calc(100% - 40px); text-align: center; }
}
@media (max-width: 560px) {
  .topbar-sep { display: none; }
  .topbar-contacts { flex-direction: column; gap: 2px; font-size: 12px; }
  .nav-logo img { height: 30px; }
}

/* Screen-reader-only text. Keeps repeated "View details" links
   distinguishable without four different button widths. */
.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;
}

/* Hero CTAs sit side by side on desktop, stack full width on mobile. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.hero-actions .button,
.hero-actions .hero-deals { margin: 0; }
.hero-deals {
  border: 2px solid rgba(255, 255, 255, 0.75);
  color: var(--color--white);
  background: transparent;
}
.hero-deals:hover { background: var(--color--white); color: var(--color--primary-1); }

@media (max-width: 900px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button,
  .hero-actions .hero-deals { width: 100%; text-align: center; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Footer contrast
   Links and body text were var(--color--gray-1) (#566375) on the near-black
   footer, a contrast ratio of 2.49:1 against the WCAG AA minimum of 4.5:1.
   Measured replacements: links 11.26:1, labels 7.42:1, bottom row 8.55:1.
--------------------------------------------------------------------------- */
.footer-cols a, .footer-cols p { color: #d8dee9; }
.footer-cols a:hover { color: var(--color--white); text-decoration: underline; }
.footer-cols h5 { color: #aab6c9; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.footer-bottom p, .social-links a { color: #b9c3d3; }
.social-links a:hover { color: var(--color--white); text-decoration: underline; }

/* The trimmed site.css no longer carries Webflow's `.navbar` rule, which had
   made the nav sticky at top:0 alongside the top bar, so two sticky strips
   competed for the same offset. The top bar keeps the phone number in reach;
   the nav itself scrolls away. Stated explicitly so it is a decision, not a
   side effect of the trim. */
.navbar { position: static; }

/* ===========================================================================
   Sticky header, button palette, mobile CTA
   =========================================================================== */

/* Top bar and nav travel together, so the phone number and the menu are both
   reachable at any scroll position on every screen size. The individual sticky
   on .topbar is retired here, otherwise two elements compete for top: 0. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--color--primary-1);
}
.topbar { position: static; z-index: auto; }
.navbar { position: static; }

/* The sticky header eats vertical space on small screens, so the top bar runs
   tighter there while keeping both rows the layout calls for. */
@media (max-width: 900px) {
  .topbar-inner { padding: 7px 20px 8px; }
  .topbar-phone { font-size: clamp(19px, 5vw, 23px); margin-top: 1px; }
  .topbar-contacts { font-size: 12px; }
  .nav-main { padding: 8px 20px; }
  .nav-logo img { height: 30px; }
}

/* Solid buttons: light grey face, navy label. Measured 8.82:1 against
   #dbe1e6, comfortably past the 4.5:1 AA threshold that white text on the old
   #6b7280 grey did not clear. */
.button,
.button-sm.button-grey,
.action-bar-call {
  background: #dbe1e6;
  color: var(--color--primary-1);
}
.button:hover { background: #cbd4dc; color: var(--color--primary-1); }

/* The hero sits on navy, where a white face still reads best. */
.hero-main .button {
  background: var(--color--white);
  color: var(--color--primary-1);
  border: 2px solid var(--color--white);
}
.hero-main .button:hover { background: #e8eef8; }

/* Centre the Get Started button inside the open mobile drawer. */
@media (max-width: 900px) {
  .nav-links > a.nav-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 14px 16px;
  }
}

/* ---------------------------------------------------------------------------
   Monthly sale: horizontal product rows
   Photo left, details centre, price and actions right. No star ratings, colour
   swatches or quantity steppers: PTS has no review data and no cart, and
   inventing either would put made-up information on a real listing.
--------------------------------------------------------------------------- */
.sale-list {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sale-row {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 230px;
  gap: 24px;
  align-items: start;
  background: var(--color--white);
  border: 1px solid #e3e9f4;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(29, 57, 96, .05);
}

.sale-row-media {
  display: block;
  background: var(--color--gray-2);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.sale-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sale-row-eyebrow {
  font-family: var(--font-family--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 6px;
}
.sale-row-title {
  font-family: var(--font-family--heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 8px;
}
.sale-row-title a { color: var(--color--primary-1); text-decoration: none; }
.sale-row-title a:hover { text-decoration: underline; }
.sale-row-desc {
  font-family: var(--font-family--body);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color--gray-1);
  margin: 0 0 8px;
}
.sale-row-meta { font-size: 12.5px; color: #6b7280; margin: 0; }

.sale-row-buy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  background: var(--color--gray-2);
  border-radius: 8px;
  padding: 14px;
}
.sale-row-price {
  font-family: var(--font-family--heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--color--primary-1);
  margin: 0;
  line-height: 1.2;
}
.sale-row-cur { font-family: var(--font-family--body); font-size: 12px; font-weight: 600; color: #6b7280; }
.sale-row-call { font-size: 19px; }

.sale-row-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--color--primary-1);
  color: var(--color--white);
  font-family: var(--font-family--body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
}
.sale-row-cta:hover { background: #162c4a; color: var(--color--white); }
.sale-row-link {
  text-align: center;
  font-family: var(--font-family--body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color--primary-1);
  text-decoration: none;
}
.sale-row-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .sale-list { padding: 4px 20px 32px; gap: 14px; }
  .sale-row {
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-areas: "media body" "buy buy";
    gap: 14px;
    padding: 14px;
  }
  .sale-row-media { grid-area: media; }
  .sale-row-body { grid-area: body; }
  .sale-row-buy {
    grid-area: buy;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .sale-row-price { font-size: 21px; }
  .sale-row-cta { flex: 1 1 160px; }
  .sale-row-link { flex: 1 1 100%; }
  .sale-row-title { font-size: 17px; }
  .sale-row-desc { font-size: 13.5px; }
}

/* ---------------------------------------------------------------------------
   Desktop dropdown chevrons
   Drawn from two borders rather than an icon file, so they inherit currentColor
   and need no extra request. Points down at rest and flips up whenever the menu
   is actually showing, which is hover, click ([open]) and keyboard
   (:focus-within) — the same three states that reveal .dropdown-menu, so the
   arrow can never disagree with the menu.
   The mobile drawer keeps its +/- affordance; this is scoped to desktop only.
--------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .dropdown-toggle > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .dropdown-toggle > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform .18s ease;
    flex: none;
  }
  .dropdown:hover .dropdown-toggle > summary::after,
  .dropdown:focus-within .dropdown-toggle > summary::after,
  .dropdown-toggle[open] > summary::after {
    margin-top: 3px;
    transform: rotate(-135deg);
  }
}

/* ---------------------------------------------------------------------------
   Contact page team cards
   Two tiers: Lesa and Maira lead on a wider two-up row, the three specialists
   sit three-up beneath. Phone and email are full-width buttons, which also
   gives each a 44px tap target instead of a line of small link text.
--------------------------------------------------------------------------- */
.contact-team {
  display: grid;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 20px;
}
.contact-team--lead {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: 20px;
}
.contact-team--rest {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-bottom: 48px;
}

.contact-card {
  display: flex;
  flex-direction: column;
  background: var(--color--white);
  border: 1px solid #e3e9f4;
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 1px 2px rgba(29, 57, 96, .05);
}
.contact-card--lead { padding: 26px; }

.contact-card-name {
  font-family: var(--font-family--heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color--primary-1);
  margin: 0 0 4px;
  font-size: 21px;
}
.contact-card--lead .contact-card-name { font-size: 26px; }

.contact-card-role {
  font-family: var(--font-family--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 12px;
}
.contact-card--lead .contact-card-role { font-size: 13px; }

.contact-card-blurb {
  font-family: var(--font-family--body);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color--gray-1);
  margin: 0 0 18px;
  flex: 1;               /* keeps the buttons aligned across a row */
}
.contact-card--lead .contact-card-blurb { font-size: 15.5px; }

.contact-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--font-family--body);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  text-align: center;
  word-break: break-word;
}
.contact-btn svg { flex: none; }
.contact-btn--call {
  background: var(--color--primary-1);
  color: var(--color--white);
}
.contact-btn--call:hover { background: #162c4a; color: var(--color--white); }
.contact-btn--email {
  background: #dbe1e6;
  color: var(--color--primary-1);
}
.contact-btn--email:hover { background: #cbd4dc; color: var(--color--primary-1); }
.contact-card--lead .contact-btn { min-height: 48px; font-size: 15px; }

@media (max-width: 900px) {
  .contact-team { padding-left: 20px; padding-right: 20px; gap: 14px; }
  .contact-team--lead { grid-template-columns: 1fr; padding-bottom: 14px; }
  .contact-team--rest { grid-template-columns: 1fr; padding-bottom: 32px; }
  .contact-card, .contact-card--lead { padding: 18px; }
  .contact-card--lead .contact-card-name { font-size: 22px; }
  .contact-card-blurb, .contact-card--lead .contact-card-blurb { font-size: 14px; }
  .contact-btn { font-size: 14px; }
}

@media (min-width: 561px) and (max-width: 900px) {
  .contact-team--rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   Contact: visit details beside the map
   Same 1180px container and 24px gutter as .contact-team, so "Visit us" lines
   up with the left edge of the leftmost card instead of the narrower
   .page-body column.
--------------------------------------------------------------------------- */
.visit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 32px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 24px 48px;
}
.visit-info h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  margin: 0 0 8px;
}
.visit-info h2 + p { margin-top: 0; }
.visit-info p {
  font-family: var(--font-family--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color--gray-1);
  margin: 0 0 22px;
}
.visit-info p:last-child { margin-bottom: 0; }
.visit-directions {
  font-weight: 600;
  color: var(--color--primary-1);
  text-decoration: none;
}
.visit-directions:hover { text-decoration: underline; }

.visit-map {
  border: 1px solid #e3e9f4;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color--gray-2);
  box-shadow: 0 1px 2px rgba(29, 57, 96, .05);
  aspect-ratio: 16 / 10;
}
.visit-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 900px) {
  .visit {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 4px 20px 32px;
  }
  .visit-map { aspect-ratio: 4 / 3; }
  .visit-info p { font-size: 15px; margin-bottom: 18px; }
}

/* ===========================================================================
   DETAIL PAGES (for-rent, for-sale, services)
   Navy hero band with breadcrumb, then a two-column body: content left,
   contact and related-links cards right. Shared by all three page types via
   the macros in _includes/detail-parts.njk.
   =========================================================================== */

/* --- Hero band ---------------------------------------------------------- */
.detail-hero {
  background: var(--color--primary-1);
  color: var(--color--white);
}
.detail-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 24px 44px;
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  font-family: var(--font-family--body);
  font-size: 13px;
}
.crumbs li { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.7); }
.crumbs li + li::before { content: "/"; color: rgba(255,255,255,.4); }
.crumbs a { color: rgba(255,255,255,.78); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current="page"] { color: #fff; font-weight: 600; }

.detail-hero-eyebrow {
  font-family: var(--font-family--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9fb6da;
  margin: 0 0 6px;
}
.detail-hero-title {
  font-family: var(--font-family--heading);
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color--white);
  margin: 0 0 12px;
  max-width: 22ch;
}
.detail-hero-blurb {
  font-family: var(--font-family--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,.86);
  max-width: 62ch;
  margin: 0 0 22px;
}
.detail-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Buttons used across the detail pages -------------------------------- */
.detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 20px;
  border-radius: 8px;
  font-family: var(--font-family--body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
}
.detail-btn--primary { background: #dbe1e6; color: var(--color--primary-1); border-color: #dbe1e6; }
.detail-btn--primary:hover { background: #cbd4dc; color: var(--color--primary-1); }
.detail-btn--ghost { background: transparent; color: var(--color--white); border-color: rgba(255,255,255,.8); }
.detail-btn--ghost:hover { background: var(--color--white); color: var(--color--primary-1); }
.detail-btn--outline { background: var(--color--white); color: var(--color--primary-1); border-color: var(--color--primary-1); }
.detail-btn--outline:hover { background: var(--color--gray-2); color: var(--color--primary-1); }

/* --- Two column body ----------------------------------------------------- */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 24px 12px;
}
.detail-main > *:first-child { margin-top: 0; }
.detail-figure {
  margin: 0 0 26px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color--gray-2);
  border: 1px solid #e3e9f4;
}
.detail-figure img { display: block; width: 100%; height: auto; }

.detail-lead {
  font-family: var(--font-family--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color--gray-1);
  margin: 0 0 26px;
}
.detail-h2 {
  font-family: var(--font-family--heading);
  font-size: clamp(20px, 2.3vw, 26px);
  font-weight: 600;
  color: var(--color--primary-1);
  margin: 30px 0 10px;
}
.detail-main p {
  font-family: var(--font-family--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color--gray-1);
  margin: 0 0 16px;
}
.detail-main a { color: var(--color--primary-1); font-weight: 600; }

.detail-price {
  font-family: var(--font-family--heading) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--color--primary-1) !important;
  margin: 0 0 18px !important;
}
.detail-price span { font-family: var(--font-family--body); font-size: 13px; font-weight: 600; color: #6b7280; }

.detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.detail-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e3e9f4;
  display: block;
}

/* --- Sidebar cards ------------------------------------------------------- */
.detail-side { display: flex; flex-direction: column; gap: 16px; }
.detail-card {
  background: var(--color--white);
  border: 1px solid #e3e9f4;
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 1px 2px rgba(29,57,96,.05);
}
.detail-card--person { text-align: center; }
.detail-avatar {
  width: 74px;
  height: 74px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--color--primary-1);
  color: var(--color--white);
  font-family: var(--font-family--heading);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-card-kicker {
  font-family: var(--font-family--heading);
  font-size: 19px;
  font-weight: 600;
  color: var(--color--primary-1);
  margin: 0 0 2px;
}
.detail-card-role {
  font-family: var(--font-family--body);
  font-size: 13.5px;
  font-weight: 400;
  color: #6b7280;
  margin: 0 0 16px;
}
.detail-card-actions { display: flex; flex-direction: column; gap: 8px; }
.detail-card-actions .detail-btn { width: 100%; font-size: 14.5px; }

.detail-card-title {
  font-family: var(--font-family--heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--color--primary-1);
  margin: 0 0 12px;
}
.detail-card--links ul { list-style: none; margin: 0; padding: 0; }
.detail-card--links li + li { margin-top: 2px; }
.detail-card--links a {
  display: block;
  padding: 8px 0;
  font-family: var(--font-family--body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color--gray-1);
  text-decoration: none;
}
.detail-card--links a:hover { color: var(--color--primary-1); text-decoration: underline; }
.detail-card--links a span { color: #9aa6b8; margin-right: 4px; }

/* --- Closing CTA band ---------------------------------------------------- */
.detail-cta { background: var(--color--primary-1); color: var(--color--white); margin-top: 40px; }
.detail-cta-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 38px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.detail-cta h2 {
  font-family: var(--font-family--heading);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  color: var(--color--white);
  margin: 0 0 6px;
}
.detail-cta p {
  font-family: var(--font-family--body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.85);
  margin: 0;
  max-width: 60ch;
}
.detail-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 980px) {
  .detail-layout { grid-template-columns: 1fr; gap: 28px; padding: 30px 20px 8px; }
  .detail-side { position: static; }
  .detail-hero-inner { padding: 24px 20px 32px; }
  .detail-hero-title { max-width: none; }
  .detail-hero-actions .detail-btn { flex: 1 1 190px; }
  .detail-cta-inner { padding: 30px 20px; }
  .detail-cta-actions { width: 100%; }
  .detail-cta-actions .detail-btn { flex: 1 1 180px; }
}

.detail-card-more {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-family--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color--primary-1);
  text-decoration: none;
}
.detail-card-more:hover { text-decoration: underline; }


/* ---------------------------------------------------------------------------
   Homepage split section: photo left, copy and actions right
--------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 46px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 24px;
}
.split-media {
  border-radius: 12px;
  overflow: hidden;
  background: var(--color--gray-2);
  border: 1px solid #e3e9f4;
}
.split-media img { display: block; width: 100%; height: auto; }

.split-body h2 {
  font-family: var(--font-family--heading);
  font-size: clamp(24px, 3.1vw, 38px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color--black);
  margin: 0 0 18px;
}
.split-body p {
  font-family: var(--font-family--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color--gray-1);
  margin: 0 0 16px;
}

.split-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-top: 26px;
}
.split-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 30px;
  border-radius: 6px;
  background: var(--color--primary-1);
  color: var(--color--white);
  font-family: var(--font-family--body);
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: none;
}
.split-btn:hover { background: #162c4a; color: var(--color--white); }

.split-call {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-family--body);
  font-size: 17px;
  font-weight: 400;
  color: var(--color--primary-1);
  text-decoration: none;
}
.split-call strong { font-family: var(--font-family--heading); font-weight: 700; }
.split-call:hover { text-decoration: underline; }
.split-call svg { flex: none; }

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 20px;
  }
  .split-actions { align-items: stretch; gap: 14px; }
  .split-btn { width: 100%; }
  .split-call { justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Authorized dealer marquee
   Navy band, logos on white tiles. Mechanics match the hero marquee: the track
   holds two identical groups and slides exactly -50%, so keep the groups
   identical or the loop jumps, and keep each group wider than the viewport or
   a gap appears mid-cycle.
--------------------------------------------------------------------------- */
.dealers {
  background: var(--color--primary-1);
  padding: 40px 0 44px;
  overflow: hidden;
}
.dealers-title {
  font-family: var(--font-family--heading);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 600;
  color: var(--color--white);
  text-align: center;
  margin: 0 0 26px;
  padding: 0 20px;
}

.dealers-marquee { overflow: hidden; }
.dealers-track {
  display: flex;
  width: max-content;
  animation: dealers-scroll 90s linear infinite;
}
.dealers-group { display: flex; flex-shrink: 0; }

/* Logos sit directly on the navy, no tile behind them. */
.dealer-logo {
  flex: none;
  width: 190px;
  height: 96px;
  margin: 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dealer-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@keyframes dealers-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dealers-track { animation: none; }
  .dealers-marquee { overflow-x: auto; }
}

@media (max-width: 900px) {
  .dealers { padding: 30px 0 34px; }
  .dealers-title { margin-bottom: 18px; }
  .dealer-logo { width: 138px; height: 76px; margin: 0 16px; }
}

/* ---------------------------------------------------------------------------
   Image band: photo left, navy panel with copy right.
   Shared by the ISNetworld and "We Buy Used Equipment" sections. The section
   background is navy so the panel reads as one block with the photo butted
   against it. Add .band to any new section of this shape rather than cloning
   these rules.
--------------------------------------------------------------------------- */
.band {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
  background: var(--color--primary-1);
}
.band-media { overflow: hidden; background: var(--color--black); }
.band-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 260px;
}
.band-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 46px clamp(24px, 5vw, 72px);
}
.band-body h2 {
  font-family: var(--font-family--heading);
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 600;
  color: var(--color--white);
  margin: 0 0 18px;
}
.band-body p {
  font-family: var(--font-family--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .86);
  margin: 0;
  max-width: 60ch;
}
.band-body strong { color: var(--color--white); font-weight: 600; }
.band-body a { color: var(--color--white); text-decoration: underline; font-weight: 600; }
.band-body a:hover { text-decoration: none; }

@media (max-width: 900px) {
  .band { grid-template-columns: 1fr; }
  .band-media img { min-height: 200px; max-height: 260px; }
  .band-body { padding: 28px 20px 32px; }
}

/* Optional CTA inside an image band. */
.band-actions { margin-top: 22px !important; }
.band-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 26px;
  border-radius: 6px;
  background: #dbe1e6;
  color: var(--color--primary-1) !important;
  font-family: var(--font-family--body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none !important;
}
.band-btn:hover { background: #cbd4dc; }


/* ---------------------------------------------------------------------------
   Brand / customer logo wall
   Light background, centred title, static grid (not a marquee: this one is a
   credibility list people should be able to read, not a moving strip).
   These logos carry mixed backgrounds, some transparent and some opaque white,
   so the section sits on white and every one of them lands flush.
--------------------------------------------------------------------------- */
.brands {
  background: var(--color--white);
  padding: 56px 24px 60px;
}
.brands-title {
  font-family: var(--font-family--heading);
  font-size: clamp(22px, 2.9vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color--black);
  text-align: center;
  max-width: 22ch;
  margin: 0 auto 38px;
}
.brands-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 30px 34px;
  align-items: center;
  justify-items: center;
}
.brands-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 74px;
}
.brands-grid img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* Mixed logo weights sit more evenly together slightly muted, and lift on
     hover. No filter on the images themselves, so brand colours stay true. */
  opacity: .88;
}
.brands-grid li:hover img { opacity: 1; }

@media (max-width: 900px) {
  .brands { padding: 36px 20px 40px; }
  .brands-title { margin-bottom: 26px; }
  .brands-grid { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 22px 20px; }
  .brands-grid li { height: 56px; }
}