/*@import url('https://fgleapis/cssonts.googleapis.com/css?family=Noto+Sans:400,700');*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap');

:root {
  /* The bevel. Deliberately tiny: enough to take the edge off a corner, not
     enough to read as a rounded card. Every box on the site points at this
     one value, so the whole site moves together by editing this line. Above
     about 5px it stops looking like a printed document and starts looking
     like an app. */
  --radius: 3px;
  --brand-red: #ff0000;
  --brand-red-dark: #CC0000;
  --brand-dark: #1a1a1a;
  --brand-light: #fff5f5;
  --brand-gray: oklch(87.2% 0.01 258.338);
  --brand-light-gray: #f2f2f2;
  /* Referenced by three footer hover states that were silently doing nothing:
     an undefined custom property with no fallback makes the whole declaration
     invalid, so those links hovered to no colour change at all. */
  --brand-white: #ffffff;
}

.white-text {
  color: var(--brand-light) !important;
}

*{
  margin: 0;
  padding: 0;
}

body {
  background: #ffffff;
  font-family: 'Montserrat', sans-serif;
  color: #1C2023;
  overflow: visible !important;
  position: static !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.01em;
}

.h3-title, .h5-title {
  text-transform: none !important;
  font-weight: 600 !important;
}

.h3-title {
  font-size: 1.3rem !important;
  margin-bottom: 30px !important;
}

.h5-title {
  font-size: 1.1rem !important;
}

/* The ribbons */
.corner-ribbon{
  width: 170px;
  background: #f00;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 25px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.corner-ribbon.sticky{
  position: fixed;
}

.corner-ribbon.shadow{
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}

.corner-ribbon.top-right{
  top: 30px;
  right: -50px;
  left: auto;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.corner-ribbon.red{background: #f00;}
.corner-ribbon.yellow{background: #ec0;color: #000;}

p.spacy {line-height:2}
p.tight {line-height:1}

span {line-height:1 !important}

@media(max-width: 575px) {
    #header .header-btn-collapse-nav {
        width: 75px;
        font-size: 20px
    }
    #header .header-nav-main nav > ul > li > a {
        display: block !important;
        text-align: center !important;
        font-size: 20px;
        font-weight: 400;
        padding: 8px 0px;
    }
}

/* Top bar container */
.topbar {
  background-color: #1a1d1f;
  color: #d1d5db;
  padding: 0.5rem 0;
  font-size: 0.75rem;
  display: none;
}

.topbar i{
  font-size: 1rem;
  color: var(--brand-red);
}

.topbar i:hover{
  color: var(--brand-light);
}

@media (min-width: 768px) {
  .topbar {
    display: block;
  }
}

/* 1400px, matching .site-header__inner rather than the 1200px the rest of the
   site uses. This bar sits directly above the header and the two read as one
   block, so the address has to start on the same vertical as the logo under it.
   At 1200 it was a hundred pixels adrift of it. */
.topbar__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar__left {
  display: flex;
  gap: 1.5rem;
}

.topbar__item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.topbar__item:hover {
  color: #ffffff;
}

/* The phone number is a tel: link and was picking up the theme's default link
   colour, so it sat blue and underlined next to a grey address. It is one of a
   pair of details, not a call to action, so it inherits from the bar and takes
   the same hover the rest of the item has. */
.topbar__item a {
  color: inherit;
  text-decoration: none;
}

.topbar__item a:hover,
.topbar__item a:focus {
  color: #ffffff;
  text-decoration: none;
}

.topbar__right {
  display: flex;
  gap: 1rem;
}

.topbar__link {
  color: #d1d5db;
  text-decoration: none;
  transition: color 0.2s ease;
}

.topbar__link:hover {
  color: var(--brand-red);
}

/* Header base */
.site-header {
  position: -webkit-sticky; /* iOS Safari */
  position: sticky;
  top: 0;
  z-index: 9999 !important;
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #f3f3f3;
  transition: all 0.3s ease;
  padding: 1rem 0;
}

.site-header--scrolled {
  padding: 0.75rem 0;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}

.site-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
.site-logo {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.site-logo img {
  height: 80px;
  width: auto;
  transition: height 0.3s ease;
}

.site-header--scrolled .site-logo img {
  height: 60px;
}

.site-logo__title {
  font-size: 1.5rem;
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 700;
  color: var(--brand-dark);
  letter-spacing: -0.03em;
  margin: 0;
}

.site-logo__highlight {
  color: var(--brand-red);
}

.site-logo__tagline {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #6b7280;
}

/* Desktop nav - hidden on mobile */
.site-nav {
  display: none;
}

/* space-between, not space-evenly. Evenly leaves half a gap after the last
   item, so the contact button floated short of the right edge while the social
   icons in the bar above sat flush against it, and the two could not line up.
   Between puts the gap only between items, which pins the button to the edge.

   The padding is what evenly was doing at the other end: without it the first
   link ends up hard against the logo. */
@media (min-width: 1024px) {
  .site-nav {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 0.875rem;
    justify-content: space-between;
    width: 100%;
    padding-left: 3rem;
  }
}

/* Nav links */
.site-nav__link {
  text-decoration: none;
  font-weight: 600;
  color: #111827;
  transition: color 0.2s ease;
  border-radius: 8px;
  text-transform: uppercase;
}

.site-nav__link:hover {
  color: var(--brand-red);
  text-decoration: none !important;
}

.site-nav__link--active {
  color: var(--brand-red);
}

/* CTA button */
.site-nav__cta {
  text-decoration: none;
  background-color: var(--brand-red);
  color: #ffffff;
  padding: 0.5rem 0.5rem;
  /* border-radius: 4px; */
  box-shadow: 0 10px 20px rgba(220, 38, 38, 0.35);
  font-weight: 500;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
  text-transform: uppercase;
}

.site-nav__cta:hover {
  background-color: var(--brand-red-dark);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  text-decoration: none !important;
  color: white;
}

/* Dropdown */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-dropdown__trigger {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-dropdown__trigger:focus {
  outline: 2px solid rgba(148, 163, 184, 0.7);
  outline-offset: 2px;
}

.nav-dropdown__icon {
  font-size: 0.75rem;
}

.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 14rem;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  border-radius: 0 0 0.75rem 0.75rem;
  border-top: 2px solid var(--brand-red);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown__item {
  display: block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: #111827;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.875rem;
}

.nav-dropdown__item:last-child {
  border-bottom: none;
}

.nav-dropdown__item:hover {
  background-color: var(--brand-light);
  text-decoration: none !important;
}

/* Mobile menu toggle */
.site-header__menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

@media (min-width: 1024px) {
  .site-header__menu-toggle {
    display: none;
  }
}

.menu-toggle__icon {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--brand-dark);
  border-radius: 999px;
}

/* Mobile nav drawer */
.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border-top: 1px solid #f3f3f3;
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.18);
  display: none;
  flex-direction: column;
  padding: 1.5rem;
  gap: 1rem;
  font-size: 1.125rem;
  font-weight: 500;
}

.mobile-nav--open {
  display: flex;
  animation: mobile-fade-in-down 0.2s ease-out;
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none !important;
  }
}

.mobile-nav__item {
  text-decoration: none !important;
  color: #111827;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
  text-transform: uppercase;
}

.mobile-nav__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mobile-nav__item--highlight {
  color: var(--brand-red);
  font-weight: 700;
}

.mobile-nav__item:active {
  text-decoration: none !important;
}

/* Drawer submenus. A parent item is a button and a panel here, the same shape
   the desktop nav uses, rather than being flattened into its children. */
.mobile-nav__group {
  display: flex;
  flex-direction: column;
}

/* Inherits the row styling from .mobile-nav__item and undoes the button
   defaults on top of it, so a row is a row whether it is a link or a toggle. */
.mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.mobile-nav__icon {
  font-size: 0.7em;
  line-height: 1;
  transition: transform 0.2s ease-out;
}

.mobile-nav__group.is-open .mobile-nav__icon {
  transform: rotate(180deg);
}

.mobile-nav__submenu {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem 0 0.25rem;
}

/* The hidden attribute is what holds the collapsed state, and display: flex
   above would otherwise beat it. */
.mobile-nav__submenu[hidden] {
  display: none;
}

.mobile-nav__subitem {
  text-decoration: none !important;
  color: #4b5563;
  font-size: 1rem;
  text-align: center;
  text-transform: uppercase;
}
/* Animation */
@keyframes mobile-fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero section wrapper */
.hero-section-wrapper {
  display: flex;
  flex-direction: column;
}

/* Hero section */
.hero-section {
  position: relative;
  min-height: 600px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-dark);
  overflow: hidden;
  padding: 2rem 0;
}

@media (min-width: 768px) {
  .hero-section {
    height: 700px;
    padding: 0;
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* The video and the image are interchangeable here, so they share one rule.
   min-height: 100vh used to live in this block and is deliberately gone: the
   hero is 600px tall on mobile, so forcing the media to a full viewport height
   made it overflow the section and crop the subject out of frame. height: 100%
   fills the container it is actually in. */
.hero-bg__image,
.hero-bg__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

/* A video is a replaced element with its own baseline, which leaves a few
   pixels of the dark section showing under it without this. */
.hero-bg__video {
  display: block;
}

.hero-bg__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--brand-dark), transparent);
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .hero-content {
    height: 100%;
  }
}

.hero-badge {
  display: block;
  padding: 0.35rem 1rem;
  border: 1px solid var(--brand-red);
  color: var(--brand-red);
  border-radius: 999px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 auto 1.5rem;
  width: fit-content;
}

@media (min-width: 768px) {
  .hero-badge {
    font-size: 1.25rem;
    padding: 0.4rem 1.25rem;
  }
}

.hero-title {
  font-size: 2.25rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: white;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 3.75rem;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 4.5rem;
  }
}

.br-md {
  display: none;
}

@media (min-width: 768px) {
  .br-md {
    display: block;
  }
}

.hero-title-gradient {
  background: linear-gradient(to right, var(--brand-red), #dc2626);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.125rem;
  color: #d1d5db;
  max-width: 42rem;
  margin: 0 auto 2.5rem;
  font-weight: 300;
}

@media (min-width: 768px) {
  .hero-subtitle {
    font-size: 1.25rem;
  }
}

.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

@media (min-width: 768px) {
  .hero-buttons {
    flex-direction: row;
  }
}

.hero-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-weight: 700;
  /* border-radius: 0.5rem; */
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  transition: background 0.25s ease, color 0.25s ease, transform 0.1s ease;
  text-transform: uppercase;
}

.hero-btn--primary {
  background: var(--brand-red);
  color: white;
}

.hero-btn--primary:hover {
  background: var(--brand-red-dark);
  color: white;
  text-decoration: none !important;
}

.hero-btn--secondary {
  background: white;
  color: var(--brand-dark);
}

.hero-btn--secondary:hover {
  background: #f3f4f6;
  text-decoration: none !important;
}

.arrow-icon {
  font-size: 1.25rem;
  line-height: 0;
}

.hero-categories {
  margin-top: 2rem;
  max-width: 72rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  overflow: visible;
}

@media (min-width: 640px) {
  .hero-categories {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 769px) {
  .hero-categories {
    grid-template-columns: repeat(5, 1fr);
    padding: 0;
  }
}

.hero-category {
  text-decoration: none;
  background: rgba(31, 41, 55, 0.8);
  backdrop-filter: blur(6px);
  border: 1px solid #374151;
  padding: 0.75rem 0.5rem;
  color: white;
  /* border-radius: 0.5rem; */
  text-align: center;
  font-weight: 500;
  font-size: 0.875rem;
  transition: background 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .hero-category {
    padding: 1rem;
    font-size: 1rem;
  }
}

.hero-category:hover {
  background: var(--brand-red);
  border-color: var(--brand-red);
  text-decoration: none !important;
  color: white;
}

.bg-hero {
  background-color: var(--brand-dark);
  align-items: center;
}

.bg-hero .hero-title {
  margin-bottom: 0.5rem;
}

@media (min-width: 426px){
  .bg-hero .hero-title {
    font-size: 2.85rem;
  }
}

.bg-hero .hero-subtitle {
  font-size: 1.1rem;
  max-width: none;
  margin: 0;
} 

@media (max-width:425px){
  .bg-hero .hero-subtitle {
    font-size: 1rem;
    }
}

/* Section background */
.cta-section {
  background-color: var(--brand-light);
  padding: 5rem 0;
  border-top: 4px solid var(--brand-red);
}

.cta-title {
  font-size: 2.5rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: black;
}

.cta-subtitle {
  max-width: 42rem;
  color: var(--brand-dark);
  font-size: 1.2rem;
}

.cta-btn-primary {
  background-color: var(--brand-red);
  color: #fff;
  transition: background 0.25s ease;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 16px;
}

.cta-btn-primary:hover {
  background-color: var(--brand-red-dark);
  color: #fff;
}

.cta-btn-outline {
  background: transparent;
  border: 2px solid var(--brand-red);
  color: var(--brand-red);
  transition: background 0.25s ease, color 0.25s ease;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 16px;
}

.cta-btn-outline:hover {
  background-color: var(--brand-red);
  color: var(--brand-light);
  text-decoration: none !important;
}

.about-us-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

.text-content {
  order: 2;
}

.image-content {
  order: 1;
}

/* .section-title {
  margin-bottom: 2rem;
} */



.content-text {
  display: flex;
  flex-direction: column;
  gap: 0rem;
  color: #4b5563;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  margin-top: -10px;
}

.image-wrapper {
  position: relative;
  padding: 0.5rem;
  background-color: white;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-radius: 0.125rem;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.7s ease;
}

.image-wrapper:hover img {
  filter: grayscale(0%);
}

.image-badge {
  position: absolute;
  top: auto;
  bottom: -1.5rem;
  left: -24px;
  background-color: var(--brand-red);
  color: white;
  padding: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  max-width: 225px;
  display: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.image-badge p {
  font-weight: 800;
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.3;
  color: white;
  margin: 0;
  font-family: 'Playfair Display', serif;
}

.button {
  display: inline-block;
  /* margin-top: 1rem; */
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--brand-red);
  color: var(--brand-red);
  background-color: transparent;
  text-decoration: none;
  font-weight: 800;
  /* border-radius: 0.25rem; */
  transition: all 0.3s ease;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 16px;
}

a.button {
  width: fit-content;
}

.button:hover {
  background-color: var(--brand-red);
  color: white;
  text-decoration: none !important;
}

/* Tablet and larger */
@media (min-width: 768px) {
  .container {
      padding: 0 1.5rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .about-us-grid {
      grid-template-columns: repeat(2, 1fr);
  }

  .text-content {
      order: 1;
  }

  .image-content {
      order: 2;
  }
  .image-badge {
    display: block;
}
}

.contact-section {
  background-color: #ffffff;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: #ffffff;
  border-radius: 1rem;
  border: 1px solid #f3f4f6;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}

@media (min-width: 992px) {
  .contact-card {
    flex-direction: row;
  }
}

.contact-sidebar {
  background-color: var(--brand-dark);
  color: #ffffff;
  padding: 3rem;
  flex: 0 0 33.333%;
}

.contact-sidebar__title {
  font-size: 2rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin-bottom: 2rem;
  color: white;
}

.contact-sidebar__text {
  color: #9ca3af;
  margin-bottom: 3rem;
  font-size: 0.95rem;
}

.contact-sidebar__items {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-item {
  display: flex;
  gap: 1rem;
}

.contact-item__icon {
  color: var(--brand-red);
  flex-shrink: 0;
}

.contact-item__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  margin: 0 0 0.25rem;
}

.contact-item__text {
  margin: 0;
  color: #9ca3af;
  font-size: 0.95rem;
}

.contact-form-wrapper {
  padding: 3rem;
  flex: 0 0 66.666%;
}

.contact-form__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 1.5rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .contact-form__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
}

.contact-form__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 0.5rem;
}

.contact-form__input,
.contact-form__textarea,
.contact-form__select {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: #111827;
  background-color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__select:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.2);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form__button {
  background-color: var(--brand-red);
  color: #ffffff;
  padding: 0.9rem 2.5rem;
  border-radius: 0.5rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  width: 100%;
  max-width: 220px;
  transition: background-color 0.25s ease, transform 0.1s ease;
}

@media (min-width: 768px) {
  .contact-form__button {
    width: auto;
  }
}

.contact-form__button:hover {
  background-color: var(--brand-red-dark);
  transform: translateY(-1px);
}

.form-all {
  font-family: inherit !important;
  box-shadow: none!important;
}

.form-label {
  font-weight: 600;
}

.form-textbox,
.form-textarea,
.form-dropdown {
  border-radius: 8px;
}

.form-buttons-wrapper, .form-submit-clear-wrapper {
  justify-content: center!important;
}

.contact-map {
  margin-top: 3rem;
  height: 400px;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 30px rgba(15, 23, 42, 0.35);
}

.contact-map__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.contact-map__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.contact-map__label {
  background-color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-map__label-icon {
  color: var(--brand-red);
  display: inline-flex;
}

.contact-map__label-text {
  font-weight: 700;
  color: var(--brand-dark);
}

/* Layout helpers */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Four cards inside the standard 1200px container works out at roughly 268px
   each, which is narrow enough that an address like Soncy & Town Square Blvd
   wraps to three lines. Widening the container for this band alone puts each
   card back at the width it had when three were across, rather than shrinking
   the type to fit a container that was never sized for four. */
.container--wide {
  max-width: 1440px;
}

/* ========================================
   NEWSLETTER ITEMS
======================================== */
.newsletter-item {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  /* border-radius: 8px; */
  margin-bottom: 2rem;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.newsletter-item:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-color: var(--brand-red);
  
}

.newsletter-thumbnail {
  flex-shrink: 0;
  display: block;
  width: 125px;
  height: 125px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--brand-light);
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
}

.newsletter-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.newsletter-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.newsletter-date {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-red);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.newsletter-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 1rem 0;
  color: var(--brand-dark);
  text-transform: none !important;
}

.newsletter-title a {
  color: inherit;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.newsletter-title a:hover {
  color: var(--brand-red);
}

.newsletter-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #4b5563;
  margin: 0 0 1.5rem 0;
  flex-grow: 1;
}

.newsletter-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--brand-red);
  text-decoration: none;
  transition: all 0.3s ease;
  align-self: flex-start;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--brand-red);
  /* border-radius: 4px; */
  background: transparent;
  text-decoration: none !important;
}

.newsletter-cta:hover {
  background: var(--brand-red);
  color: white;
  
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .newsletter-item {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .newsletter-thumbnail {
    width: 100px;
    height: 100px;
    align-self: center;
  }

  .newsletter-title {
    font-size: 1.25rem;
  }

  .newsletter-description {
    font-size: 0.9375rem;
  }
}

/* Footer base */
.site-footer {
  background-color: var(--brand-dark);
  color: var(--brand-gray);
  padding-top: 4rem;
  padding-bottom: 2rem;
  border-top: 4px solid var(--brand-red);
  font-size: 0.875rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-col {
  min-width: 0;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* The logo is the whole first column now, so it scales with the column instead
   of sitting at a fixed height. The max-width stops it going oversized in the
   wide single column layout on tablets. */
.footer-brand img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

@media (max-width: 767px) {
  .footer-brand {
    justify-content: center;
  }
}

.footer-brand__mark {
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--brand-red);
}

.footer-brand__title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0;
}

.footer-text {
  color: var(--brand-gray);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.footer-heading {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0 0 1rem;
  color: #ffffff;
  text-transform: none !important;
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.footer-list li + li {
  margin-top: 0.5rem;
}

.footer-list li i {
  color: var(--brand-red);
  font-size: 0.75rem;
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.footer-list--contact li + li {
  margin-top: 0.75rem;
}

.footer-link {
  color: var(--brand-gray);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--brand-red);
  text-decoration: none !important;
}

.footer-link--inline:hover {
  color: var(--brand-white);
}

.footer-link--phone {
  color: var(--brand-red);
  font-weight: 600;
  font-size: 1.125rem;
  display: block;
  margin-bottom: 0.25rem;
}

.footer-link--small {
  /* 14px, which is 10.5pt. These are the TREC compliance notices. TREC sets a
     10pt floor, so this clears it, but there is not much room underneath. Do
     not shrink it further to balance the footer. */
  font-size: 14px;
  line-height: 1.5;
}

.footer-bottom__links .footer-link:hover {
  color: var(--brand-white);
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer-contact-icon {
  color: var(--brand-red);
  flex-shrink: 0;
  margin-top: 0.25rem;
  font-size: 1rem;
}

.footer-contact-text {
  color: var(--brand-light);
  font-size: 0.875rem;
  line-height: 1.6;
}

.footer-contact-detail {
  color: #9ca3af;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.footer-bottom {
  border-top: 1px solid #1f2937;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  color: #6b7280;
  font-size: 0.75rem;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    gap: 2rem;
  }

  /* Two columns side by side, so every line has to hold itself on one row.
     Only from 768px up. Below that the bar stacks full width and these strings
     are far too long to sit on one line of a phone screen. */
  .footer-bottom__text,
  .footer-bottom__links .footer-link--small {
    white-space: nowrap;
  }
}

.footer-bottom__text {
  /* Matches .footer-link--small on the right so both sides of the bottom bar
     read at the same size. */
  margin: 0;
  color: var(--brand-gray);
  font-size: 14px;
  line-height: 1.5;
}

.footer-bottom__links {
  /* Stacked at every width. Side by side, the two notices ran together into one
     long line of blue text that read as a single link. */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  text-align: right;
}

@media (max-width: 767px) {
  .footer-bottom__links {
    /* Stacking is now the default, so this only flips the alignment to match
       the left aligned footer text on narrow screens. */
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }
}

.footer-divider {
  color: #4b5563;
}

@media (max-width: 767px) {
  .footer-divider {
    display: none;
  }
}

.footer-credit {
  color: var(--brand-light);
  font-size: 14px;
  line-height: 1.5;
  /* inline-block so the margin lands, giving the same 0.5rem gap the two
     compliance links have on the right. */
  display: inline-block;
  margin-top: 0.5rem;
  text-decoration: none;
}

a.footer-credit:hover,
a.footer-credit:focus {
  color: var(--brand-white);
  text-decoration: underline;
}

.footer-newsletter-text {
  color: var(--brand-gray);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.footer-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 767px) {
  .footer-form-row {
    grid-template-columns: 1fr;
  }
}

.footer-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-form-label .required {
  color: var(--brand-red);
}

.footer-form-input {
  width: 100%;
  padding: 0.75rem;
  background-color: #2a2d2f;
  border: 1px solid #374151;
  /* border-radius: 0.375rem; */
  color: #ffffff;
  font-size: 0.875rem;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.2s ease;
}

.footer-form-input:focus {
  outline: none;
  border-color: var(--brand-red);
  background-color: #1f2023;
}

.footer-form-input::placeholder {
  color: #6b7280;
}

.footer-form-submit {
  padding: 0.875rem 1.5rem;
  background-color: var(--brand-red);
  color: #ffffff;
  border: none;
  /* border-radius: 0.375rem; */
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0.5rem;
}

.footer-form-submit:hover {
  background-color: var(--brand-red-dark);
  transform: translateY(-1px);
}

.footer-social-icons {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.footer-social-icons li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #2a2d2f;
  color: var(--brand-light);
  /* border-radius: 0.375rem; */
  transition: all 0.2s ease;
  text-decoration: none !important;
}

.footer-social-icons li a:hover {
  background-color: var(--brand-red);
  color: #ffffff;
}

/* ========================================
   PROPERTY MANAGEMENT PAGE STYLES
======================================== */

/* ----------------------------------------
   PAGE BANNER

   The banner itself is .bg-hero, shared with every other page. Only the two
   things gwe_page_banner() does not emit are here: the editor content, which
   arrives as paragraphs rather than as one line of subtitle, and the phone
   button under it.
   ---------------------------------------- */

/* .bg-hero .hero-subtitle zeroes the margin for a single line of text. The
   content here is one or more paragraphs, so the last one gives its trailing
   margin back and the wrapper holds the measure. */
.pm-banner__description {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.pm-banner__description > :last-child {
  margin-bottom: 0;
}

.pm-banner__phone {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* Fallback for a number with no dialable form. Not a button, because there is
   nothing to press. */
.pm-banner__phone-text {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
}

.pm-banner__phone-text svg {
  flex-shrink: 0;
}

/* ----------------------------------------
   BUILDING PHOTO

   Value proposition and services are wrapped in .pm-tower-zone, which lays the
   photo of the building the company occupies over their right side, starting at
   the top of the value proposition and under the dark banner.

   The photo is sized by its width, not by the zone. That is the opposite of how
   this started and it matters: when the zone drove the height, the width came
   out at half of it, so making the copy taller made the photo wider, which is a
   loop with no stable answer. Now the column is a fixed share of the screen and
   the photo is as tall as its own proportions make it. Roughly 3:1 after the
   crop, so at a third of a wide screen it runs about the height of the two
   bands. It covered three when the banner was part of the zone; the column is
   narrower now for the same reason.

   Nothing is cropped in either direction. The inner edge fades out and so does
   the last of the bottom, which is also what hides the fact that the photo does
   not end on the band seam at every screen width. An edge that dissolves cannot
   be seen to have landed in the wrong place.

   The bands run their full width and keep their backgrounds, which are all the
   same light gray on this page now. That uniformity is not only a taste call:
   the old white to gray step happened underneath the translucent part of the
   photo and drew a horizontal line across the building.
   ---------------------------------------- */

.pm-tower-zone {
  position: relative;
}

@media (min-width: 1200px) {
  .pm-tower-zone {
    /* Width of the photo column, and how far the copy is pushed left. One
       number for both, since one is the space the other leaves over. */
    --tower-width: 34%;
    /* Floor under the left margin, for narrow screens. */
    --tower-gutter: 4rem;
    /* How far the copy is indented from the left edge. Grows with the screen and
       then stops, which is the whole job: a fixed value strands the copy on a
       large screen, and an unbounded one pushes it to the middle of the page.
       Raised at the two breakpoints below. */
    --tower-indent: clamp(var(--tower-gutter), 9vw, 14rem);
    /* How far into the photo the left fade runs. Measured off the photograph
       rather than picked: it is the share of the frame that is sky and horizon
       to the left of the tower, so the ramp is finished before the building
       starts and the building is never washed out. Raise it past the tower's
       left edge and the washing out comes back. */
    --tower-fade: 30%;
    /* Nothing overhangs any more, but this stays as a guard: clip, not hidden,
       so it cannot become a scroll container. */
    overflow: clip;
  }

  /* Fixed width, anchored to the right edge and to both ends of the zone, so its
     height is the height of the two bands whatever the copy does. pointer-events
     off because it is decoration and should not eat a click meant for a card. */
  .pm-tower-zone__rail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--tower-width);
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
  }

  .pm-tower-zone__frame {
    height: 100%;
  }

  .pm-tower-zone__image {
    display: block;
    width: 100%;
    height: 100%;
    /* Anchored right, not centred. cover trims symmetrically, and the file is
       cropped so the tower's right corner sits close to the right edge, so even
       a small trim cut into it. That corner is a hard vertical line and reads as
       a broken edge; the sky and horizon on the other side do not read as
       anything at all. So the whole trim is taken off the left.

       It comes out of the sky the fade runs over, which is the cost. If the
       fade starts biting into the building at some width, --tower-fade above is
       the thing to bring down. */
    object-fit: cover;
    object-position: right center;
    /* Two masks, intersected. The first is the left to right ramp, the second
       takes out the last of the bottom, so the seam into the accounting band is
       a falloff rather than a cut. The top needs no fade: it meets the underside
       of the dark banner, where a soft edge would only look like a smudge.

       The ramp is finished before the building starts. It used to run to 92% of
       the frame, which put the tower's left half inside the gradient and washed
       it out. Everything now happens in the leftmost --tower-fade, which is set
       to the share of the photo that is sky and horizon to the left of the
       tower. Past that the photo is solid, so the building is at full strength
       from its own left edge onward.

       The stops are fractions of --tower-fade, and there are seven of them
       because a change in slope reads as an edge even when there is no edge
       there. The tail is the part that matters. Ending the ramp at full opacity
       exactly on --tower-fade meant the slope went from steep to nothing in one
       step, and over sky, which is a smooth even field with no detail to hide
       it, that step is a visible vertical line. So the last stretch eases: 88%
       at the nominal end, then 97% and 100% well past it. The remaining sliver
       of translucency lands on the building's own left edge, where a few percent
       is invisible against glass and concrete.

       --tower-fade is the knob, and its ceiling is the photograph rather than
       taste. The only way to a longer fade is a crop with more sky to the left
       of the building.

       If mask-composite is unsupported the two are added rather than
       intersected, which weakens both fades instead of dropping them. */
    -webkit-mask-image:
      linear-gradient(to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) calc(var(--tower-fade) * 0.35),
        rgba(0, 0, 0, 0.36) calc(var(--tower-fade) * 0.6),
        rgba(0, 0, 0, 0.66) calc(var(--tower-fade) * 0.8),
        rgba(0, 0, 0, 0.88) var(--tower-fade),
        rgba(0, 0, 0, 0.97) calc(var(--tower-fade) * 1.3),
        #000 calc(var(--tower-fade) * 1.7)),
      linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0) 100%);
    mask-image:
      linear-gradient(to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) calc(var(--tower-fade) * 0.35),
        rgba(0, 0, 0, 0.36) calc(var(--tower-fade) * 0.6),
        rgba(0, 0, 0, 0.66) calc(var(--tower-fade) * 0.8),
        rgba(0, 0, 0, 0.88) var(--tower-fade),
        rgba(0, 0, 0, 0.97) calc(var(--tower-fade) * 1.3),
        #000 calc(var(--tower-fade) * 1.7)),
      linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  /* The copy moves, the bands do not.

     No auto margin and no cap on the container. Auto was the whole problem at
     both ends: it takes everything left over, so a capped container sat hard
     against the window at 1080p and was stranded several hundred pixels from it
     at 4K. One expression instead, growing with the screen and then stopping.

     --tower-gutter is the floor, on a narrow laptop. 9vw is the middle, which
     works out around 170px at 1080p, and it caps at 14rem so it stops growing
     on very large screens rather than pushing the copy to the middle of the
     page. */
  .pm-tower-zone .container {
    max-width: none;
    margin-left: 0;
    margin-right: var(--tower-width);
    padding-left: var(--tower-indent);
  }

  /* The container is as wide as the space beside the photo, which on a very
     large screen is wider than a card grid wants to be, so the grids stop. The
     cap is raised alongside the indent at the breakpoints below: left where it
     was, the space the grids gave back all collected into one gap in front of
     the photo. */
  .pm-tower-zone .value-grid,
  .pm-tower-zone .services-grid,
  .pm-tower-zone .additional-services {
    max-width: 72rem;
  }

  /* Section headings go left inside the zone. They are marked .text-center in
     the markup, which is a Bootstrap utility and therefore !important, so this
     has to answer in kind. Centred text inside a container that has been pushed
     left reads as text that missed its mark rather than as a split layout. */
  .pm-tower-zone .section-title-block.text-center {
    text-align: left !important;
  }

  .pm-tower-zone .section-title::after {
    left: 0;
    transform: none;
  }

  /* Two columns, not three. Five cards across three columns leaves a hole in
     the second row, and the column is narrower now in any case. */
  .pm-tower-zone .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* The cards sit above the photo rather than under it, so the building shows
     in the gaps between them and behind the headings, not through the card
     faces. Without this the additional services panel goes translucent gray
     where the building crosses it and the copy in it loses contrast. */
  .pm-tower-zone .value-card,
  .pm-tower-zone .service-card,
  .pm-tower-zone .additional-services {
    position: relative;
    z-index: 2;
  }
}

@media (min-width: 1600px) {
  .pm-tower-zone {
    --tower-width: 32%;
    --tower-gutter: 5rem;
  }
}

/* 1440p and up.

   Both numbers move together, and they have to. At 1440p the indent had already
   hit its 14rem ceiling and the grids their 72rem cap, so every pixel of extra
   screen width past that went into a single gap between the cards and the
   photo, around 360px of it, while the copy stayed pinned to the left. Moving
   the block right without widening the grids only moves the gap; widening the
   grids without moving the block only closes it from one side. */
@media (min-width: 2200px) {
  .pm-tower-zone {
    --tower-indent: clamp(14rem, 12vw, 22rem);
  }

  .pm-tower-zone .value-grid,
  .pm-tower-zone .services-grid,
  .pm-tower-zone .additional-services {
    max-width: 80rem;
  }
}

/* Ultrawide. The same adjustment again, one step further out. Past about here
   the layout is wider than any amount of copy wants to be and the honest answer
   is that some of the screen stays empty. */
@media (min-width: 3000px) {
  .pm-tower-zone {
    --tower-indent: clamp(22rem, 14vw, 34rem);
  }

  .pm-tower-zone .value-grid,
  .pm-tower-zone .services-grid,
  .pm-tower-zone .additional-services {
    max-width: 88rem;
  }
}

/* Below the column layout the photo is not a rail at all. The markup already
   puts it first inside the zone, so it needs nothing but permission to be a
   normal block: it lands above the value proposition, full width, which is the
   only image on this page on a phone.

   Cropped here, and only here. At 3:1 a full width photo on a 390px screen
   would be over a thousand pixels tall, which is not an opening image, it is a
   scroll.

   The window is a band rather than most of the fold. 55vh put the photo at
   around 460px on a phone, which meant a screen of building and nothing else.
   36vh leaves the heading below it in view.

   The crop is offset down a little instead of anchored to the very top. The top
   of the frame is pure sky, and in a band this short an anchored window spends
   most of its height on it. */
@media (max-width: 1199px) {
  .pm-tower-zone__image {
    display: block;
    width: 100%;
    height: 36vh;
    min-height: 11rem;
    max-height: 19rem;
    object-fit: cover;
    object-position: center 18%;
  }
}

.pm-section {
  padding: 4rem 0;
}

.pm-section--white {
  background-color: #ffffff;
}

.pm-section--gray {
  background-color: #f2f2f2;
}

.pm-section--dark {
  background-color: var(--brand-dark);
}

/* Uniform background, but only for as far as the building photo runs.

   The reason for the uniformity was the photo: the old white to gray step
   happened underneath its translucent part and drew a horizontal line across
   the building. That reason stops where the photo stops. Carrying one flat gray
   on past it left accounting and leadership reading as more of the same band,
   with nothing to mark that the page had moved on from the tower.

   So the two bands inside the zone are one gray and read as a single chapter,
   and accounting goes back to white directly underneath it. The step
   up in lightness at that seam is the beat that says the photo is finished.
   Leadership takes the gray after it and experience stays dark, which is the
   alternation the page had before, resuming below the zone rather than running
   through it.

   Scoped to the zone and to the page head rather than to .pm-section--white and
   .pm-section--gray themselves, since those two classes are shared with the
   case study template. */
.pm-tower-zone .pm-section--white,
.pm-tower-zone .pm-section--gray {
  background-color: #f9fafb;
}

/* Bands with no edges between them need more air than bands with edges, since
   the colour change was doing part of that work. Hung on the body class
   WordPress generates for the page template, so it does not follow these
   classes onto the case study pages. */
.page-template-page-property-management .pm-section {
  padding: 5rem 0;
}

/* An extra beat under the photo. The band that follows the zone carries the
   weight of the transition, so it gets the room to. */
.pm-tower-zone + .pm-section {
  padding-top: 7rem;
}

.pm-section__header {
  text-align: center;
  margin-bottom: 2rem;
}

.pm-section__header--light {
  color: #ffffff;
}

.pm-section__subtitle {
  display: block;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-red);
  margin-bottom: 0.5rem;
}

.pm-section__subtitle--light {
  color: var(--brand-red);
}

.pm-section__title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--brand-dark);
  margin: 0;
}

@media (min-width: 768px) {
  .pm-section__title {
    font-size: 2.5rem;
  }
}

.pm-section__title--light {
  color: #ffffff;
}

.pm-section__intro-wrapper {
  display: flex;
  max-width: 48rem;
  margin: 0 auto;
}

.pm-section__intro {
  margin-top: -1rem;
  color: #6b7280;
  text-align: center;
  margin: 0 0 2.5rem;
  font-size: 1.125rem;
}

.accounting-section__content .section-title-block,
#leadership .section-title-block {
  margin-bottom: 3rem;
}

.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .value-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* No hover state. The card is not a link and nothing in it is, so lifting it
   under the pointer promised a click that never existed. The transition went
   with it rather than being left animating a property nothing changes. */
.value-card {
  padding: 2rem;
  border: 2px solid #f3f4f6;
  border-radius: 0.125rem;
  background-color: #ffffff;
}

.value-card__icon {
  color: var(--brand-red);
  margin-bottom: 1rem;
}

.value-card__icon svg {
  width: 40px;
  height: 40px;
}

.value-card__title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--brand-dark);
  margin: 0 0 0.75rem;
  text-transform: none !important;
}

.value-card__description {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0;
}

/* Services Grid (PM Section) */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Service Card (PM Section) */
.service-card {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 0.125rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.service-card__icon {
  color: var(--brand-dark) !important;
  background-color: white !important;
  margin-bottom: 1rem;
  font-size: 48px;
  display: block;
}

.service-card__title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--brand-red);
  margin: 0 0 0.75rem;
  text-transform: none !important;
}

.service-card__description {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0;
}

.additional-services {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 0.125rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.additional-services__title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--brand-dark);
  margin: 0 0 1.5rem;
  text-transform: none !important;
}

.additional-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .additional-services__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
  }
}

.service-item {
  display: flex;
  gap: 1rem;
}

.service-item__icon {
  color: var(--brand-red);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.service-item__title {
  font-weight: 700;
  color: var(--brand-dark);
  font-size: 1rem;
  margin: 0 0;
}

.service-item__description {
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0;
}

.accounting-section {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .accounting-section {
    flex-direction: row;
    align-items: center;
  }
}

.accounting-section__content {
  flex: 1;
}

.accounting-section__intro {
  color: #6b7280;
  margin-bottom: 2rem;
  font-size: 1.125rem;
}

.accounting-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 100%;
  margin: 0 auto;
}

@media (max-width: 639px) {
  .accounting-features {
    max-width: 70%;
  }
}

@media (min-width: 640px) {
  .accounting-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

.accounting-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.accounting-feature__icon {
  color: var(--brand-red);
  flex-shrink: 0;
}

.accounting-feature span {
  color: #374151;
  font-weight: 500;
  font-size: 0.875rem;
}

.accounting-section__images {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.accounting-image {
  width: 100%;
  height: 10rem;
  object-fit: cover;
  border-radius: 0.125rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* The stagger moved off the image and onto the figure, which is the grid item
   now. Left on the image it would shift the picture inside its own frame. */
.accounting-image-frame {
  position: relative;
  margin: 0;
  line-height: 0;
}

.accounting-image-frame--2 {
  margin-top: 2rem;
}

.accounting-image-frame--3 {
  margin-top: -2rem;
}

/* Added by image-lightbox.js once it has confirmed the dialog element is
   usable. Without it the frame stays an ordinary image and the button below
   keeps the hidden attribute it was printed with. */
.accounting-image-frame--zoomable {
  cursor: zoom-in;
}

.accounting-image-frame__zoom {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  /* Image 3 is pulled up 2rem by the collage stagger and sits later in the
     DOM, so it painted over the bottom half of image 1's button. The frames
     are position: relative with no z-index of their own, which keeps them at
     the auto level; a positive z-index here lifts the button above all of
     them without disturbing how the images themselves overlap. */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(17, 24, 39, 0.65);
  color: #ffffff;
  cursor: zoom-in;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.accounting-image-frame:hover .accounting-image-frame__zoom,
.accounting-image-frame__zoom:hover,
.accounting-image-frame__zoom:focus-visible {
  background-color: #c8102e;
  transform: scale(1.08);
}

/* The left column is the staggered one. Image 3 is pulled up 2rem, so it
   rises across the bottom of image 1 and a button sitting 0.5rem off that
   edge lands on top of the neighbouring picture rather than on its own.
   Lifting by the same 2rem the stagger uses puts it back inside its frame,
   and image 3 matches so the two icons in the column sit level. */
.accounting-image-frame--1 .accounting-image-frame__zoom,
.accounting-image-frame--3 .accounting-image-frame__zoom {
  bottom: 2.5rem;
}

.accounting-image-frame__zoom:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ========================================
   IMAGE LIGHTBOX
======================================== */
/* The dialog is built once by image-lightbox.js and appended to the body, so
   these rules match nothing until that script has run.

   Centring is done here rather than left to the browser. A dialog normally
   centres itself with margin: auto, and the * { margin: 0 } reset at the top
   of this file cancels that, which pins it to the top left corner. Filling
   the viewport and centring the image with flexbox does not depend on any
   margin surviving. */
.gwe-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  cursor: zoom-out;
}

/* A dialog is display: none until it is open, and the flex rule below would
   override that and leave it on the page permanently. Both states are stated
   so neither depends on the other. */
.gwe-lightbox:not([open]) {
  display: none;
}

.gwe-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gwe-lightbox::backdrop {
  background-color: rgba(0, 0, 0, 0.85);
}

.gwe-lightbox__image {
  display: block;
  max-width: 94vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 0.125rem;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  cursor: zoom-out;
}

/* Pinned to the viewport corner rather than to the picture. The image is a
   different shape in every one of these four, and a button anchored to its
   edge would land somewhere different each time. */
.gwe-lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.gwe-lightbox__close:hover,
.gwe-lightbox__close:focus-visible {
  background-color: #c8102e;
}

.gwe-lightbox__close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Holds the page still behind the modal. This has to be a class rather than
   an inline style, because body carries overflow: visible !important further
   up this file and an inline style loses to it. Matching body plus a class
   outweighs the bare body selector. */
body.gwe-lightbox-open {
  overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
  .accounting-image-frame__zoom {
    transition: none;
  }

  .accounting-image-frame:hover .accounting-image-frame__zoom,
  .accounting-image-frame__zoom:hover,
  .accounting-image-frame__zoom:focus-visible {
    transform: none;
  }
}

.pm-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .pm-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The resting shadow stays, since it is what lifts the card off the grey
   band. The hover state is gone: the card is not a link. The phone and email
   links inside it are, and they keep their own hover. */
.pm-team-member {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 0.125rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .pm-team-member {
    flex-direction: row;
    align-items: flex-start;
  }
}

.pm-team-member__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .pm-team-member__sidebar {
    width: 12rem;
  }
}

.pm-team-member__image-wrapper {
  width: 100%;
}

.pm-team-member__image {
  width: 100%;
  height: 13rem;
  object-fit: cover;
  margin: 0 auto;
  display: block;
}

@media (max-width: 426px) {
  .pm-team-member__image {
    height: 20rem;
  }
}

.pm-team-member__content {
  flex: 1;
}

.pm-team-member__name {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin: 0 0;
  text-transform: none !important;
}

.pm-team-member__title {
  color: var(--brand-red);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 20px !important;
  margin: 0 0 0.5rem;
}

.pm-team-member__bio {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0;
}

/* The bio is a wrapper holding the paragraphs of the record rather than one
   paragraph of flattened text, so the spacing between them has to be stated.
   The * { margin: 0 } reset at the top of this file strips it otherwise and
   a multi paragraph bio runs together into one block. */
.pm-team-member__bio p {
  margin: 0 0 0.85rem;
}

.pm-team-member__bio p:last-child {
  margin-bottom: 0;
}

.pm-team-member__contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.pm-team-member__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brand-red) !important;
  border: 1px solid var(--brand-red);
  text-decoration: none !important;
  transition: color 0.2s ease;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 0.125rem;
}

.pm-team-member__link:hover {
  background-color: var(--brand-red);
  color: var(--brand-light) !important;
}

.experience-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.experience-card {
  background-color: #3a3f43;
  padding: 1.5rem;
  border-radius: 0.125rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .experience-card {
    flex-direction: row;
  }
}

.experience-card__image {
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .experience-card__image {
    width: 33.333%;
  }
}

.experience-card__image img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
  border-radius: 0.125rem;
}

.experience-card__content {
  flex: 1;
}

@media (min-width: 768px) {
  .experience-card__content {
    width: 66.666%;
  }
}

.experience-card__title {
  font-family: 'Playfair Display', serif;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
  text-transform: none !important;
}

.experience-card__location {
  color: #9ca3af;
  font-size: 0.875rem;
  margin: 0 0 1rem;
}

.experience-card__list {
  color: #d1d5db;
  font-size: 0.875rem;
  list-style: disc;
  list-style-position: outside;
  margin: 0;
  padding-left: 1.5rem;
}

.experience-card__list li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
  padding-left: 0.5rem;
}

.experience-card__list li:last-child {
  margin-bottom: 0;
}

.section-dark-bg {
  background-color: var(--brand-dark) !important;
  padding: 4rem 0;
  color: #e5e7eb;
}

.section-title-block {
  margin-bottom: 4rem;
}

.section-title {
  position: relative;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2rem;
  margin: 0.5rem 0 0;
  color: var(--brand-dark);
}

/* the red underline */
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  width: 90px;      /* length of line */
  height: 3px;      /* thickness */
  background-color: var(--brand-red);
}

/* Left-aligned underline for about-us-grid section */
.about-us-grid .section-title::after {
  left: 0;
  transform: none;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 2.5rem;
  }
}

.section-subtitle {
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-red);
  display: block;
  margin-bottom: 0.5rem;
}


.section-title--light {
  color: #f9fafb;
}

.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* auto-fit rather than a fixed three, because the homepage block now shows
   one card per publication and that count follows the series registry. A hard
   three left two cards sitting in the left two thirds with a hole beside
   them. Empty tracks collapse, so two cards fill the row and three still
   land three across. */
@media (min-width: 768px) {
  .insights-grid {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }
}

.insight-card {
  background-color: #3a3f43;
  border-radius: 0.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
}

.insight-card__image-wrap {
  height: 12rem;
  overflow: hidden;
}

.insight-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transform: scale(1);
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.insight-card:hover .insight-card__image {
  transform: scale(1.1);
  opacity: 1;
}

.insight-card__body {
  padding: 1.5rem;
}

.insight-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.insight-card__title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #ffffff;
  margin: 0 0 0.75rem;
  transition: color 0.25s ease;
  text-transform: none !important;
}

.insight-card:hover .insight-card__title {
  color: var(--brand-red);
}

.insight-card__excerpt {
  color: #9ca3af;
  font-size: 0.875rem;
  margin: 0 0 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.insight-card__link {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--brand-red);
  text-decoration: none;
}

.insight-card__link:hover {
  text-decoration: underline;
}

/* The whole card is the click target. The card already looked interactive,
   with a pointer cursor, an image zoom, and a title that turns red, while
   only the small Read Newsletter line actually did anything.

   Done by stretching the existing link over the card rather than by wrapping
   the card in a second anchor. One real link means no nested anchors, the
   card stays a single tab stop, and a screen reader announces the newsletter
   once instead of twice. It also degrades correctly: a card whose issue has
   no PDF attached renders no link, so nothing is stretched and the card is
   inert rather than a dead click target. */
.insight-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Keyboard focus has to show on the card, because the link that receives it
   is now covering the whole thing. */
.insight-card:focus-within {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
}

.insight-card__link:focus {
  outline: none;
}

/* Team Section Styles */
.team-section {
  background-color: #f3f4f6;
  padding: 4rem 0;
}



/* .team-section .section-title-block {
  margin-bottom: 3rem;
} */

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

@media (min-width: 640px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.team-member-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.125rem;
  background-color: #111827;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: all 0.3s ease;
}

.team-member-card:hover {
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

.team-member-card__image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 125%;
  overflow: hidden;
}

@media (min-width: 768px) {
  .team-member-card__image-wrapper {
    padding-top: 133.33%;
  }
}

.team-member-card__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.95);
  transition: transform 0.7s ease, filter 0.3s ease;
}

.team-member-card:hover .team-member-card__image {
  transform: scale(1.1);
  filter: brightness(1.05);
}

.team-member-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2) 50%, transparent);
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.team-member-card:hover .team-member-card__overlay {
  opacity: 0.9;
}

.team-member-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 1.25rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .team-member-card__content {
    padding: 1.25rem;
  }
}

.team-member-card__name {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  margin: 0 0 0.25rem;
  text-transform: none !important;
}

.team-member-card__credentials {
  display: block;
  color: #d1d5db;
  font-weight: 400;
  font-size: 0.875rem;
}

.team-member-card__role {
  background-color: var(--brand-red);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.5rem;
  margin-top: 0.25rem;
  display: inline-block;
}

.team-section__cta {
  text-align: center;
  margin-top: 3rem;
}

.btn-outline {
  display: inline-block;
  background: transparent;
  border: 2px solid var(--brand-dark);
  color: var(--brand-dark);
  padding: 0.75rem 2rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 16px;
  text-transform: uppercase;
}

.btn-outline:hover {
  background: var(--brand-dark);
  color: #ffffff;
  text-decoration: none !important;
}

/* Featured Listings Section Styles */
.featured-listings-section {
  padding: 4rem 0;
}

/* .section-dark-bg is declared once, further up this file, with an important
   background. A second declaration lived here setting #1f2937 and lost to it,
   so it had never had any effect while looking authoritative sitting above the
   grid it appeared to belong to. Removed rather than reconciled: the colour in
   force is var(--brand-dark), which is what the band has always rendered. */
.featured-listings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .featured-listings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .featured-listings-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Four across only once there is room for it. Between 1024 and 1279 a fourth
   column would be squeezed rather than accommodated, so that range keeps
   three and wraps the fourth card onto its own line. */
@media (min-width: 1280px) {
  .featured-listings-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

.featured-listing-card {
  background-color: #3a3f43;
  /* border-radius: 0.5rem; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* The card used to have no hover at all, on the grounds that it was an
   article rather than a link and a tile that animates but does nothing reads
   as broken. That reasoning still holds; the card is simply a control now,
   so the affordance belongs.

   Keyed to is-openable, which the script adds only after it has confirmed it
   can actually open something. A browser that never runs it gets the inert
   card and no hover, so the two can never disagree. */
.featured-listing-card.is-openable {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.featured-listing-card.is-openable .featured-listing-card__image {
  transition: transform 0.4s ease;
}

.featured-listing-card.is-openable:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

/* The wrap already clips, so the picture grows inside a fixed frame rather
   than pushing the card around. */
.featured-listing-card.is-openable:hover .featured-listing-card__image {
  transform: scale(1.05);
}

/* A quiet cue that the whole tile is the target, not just the picture. */
.featured-listing-card.is-openable:hover .featured-listing-card__title {
  color: var(--brand-red);
}

/* The same three states for keyboard users, matched on :has(:focus-visible)
   rather than on :focus-within.

   :focus-within was leaving a card stuck in its hover look after the lightbox
   closed. That is not a bug in the CSS: the script deliberately returns focus
   to the trigger button on close, which is correct behaviour, and a focused
   button inside the card satisfies :focus-within indefinitely. After a mouse
   click the pointer has usually moved off the card, so the result read as a
   tile frozen mid hover.

   :focus-visible is the distinction that was wanted all along. It matches when
   the browser judges a focus ring warranted, which covers tabbing to the card
   and excludes a button focused after a click, so the returned focus no longer
   paints anything. Written as separate rules rather than added to the selector
   lists above, because a browser that does not understand :has() discards the
   whole rule it appears in, which would take the hover states down with it. */
.featured-listing-card.is-openable:has(:focus-visible) {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.featured-listing-card.is-openable:has(:focus-visible) .featured-listing-card__image {
  transform: scale(1.05);
}

.featured-listing-card.is-openable:has(:focus-visible) .featured-listing-card__title {
  color: var(--brand-red);
}

.featured-listing-card.is-openable .featured-listing-card__title {
  transition: color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .featured-listing-card.is-openable,
  .featured-listing-card.is-openable .featured-listing-card__image,
  .featured-listing-card.is-openable .featured-listing-card__title {
    transition: none;
  }

  /* The shadow still deepens, so the cue survives without the movement. */
  .featured-listing-card.is-openable:hover {
    transform: none;
  }

  .featured-listing-card.is-openable:hover .featured-listing-card__image {
    transform: none;
  }

  .featured-listing-card.is-openable:has(:focus-visible) {
    transform: none;
  }

  .featured-listing-card.is-openable:has(:focus-visible) .featured-listing-card__image {
    transform: none;
  }
}

.featured-listing-card__image-wrap {
  position: relative;
  width: 100%;
  height: 14rem;
  overflow: hidden;
  background-color: #f3f4f6;
}

.featured-listing-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-listing-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.25rem;
  z-index: 10;
  line-height: 1;
}

.featured-listing-card__badge--sold {
  background-color: #dc2626;
  color: #ffffff;
}

.featured-listing-card__badge--leased {
  background-color: #eab308;
  color: #000000;
}

.featured-listing-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.featured-listing-card__category {
  font-size: 0.7rem;
  font-weight: 700;
  color: #dc2626;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.75rem;
}

.featured-listing-card__title {
  font-weight: 700;
  font-size: 1.25rem;
  color: #ffffff;
  margin: 0 0 1rem;
  line-height: 1.3;
  transition: color 0.25s ease;
}

.featured-listing-card__details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.featured-listing-card__detail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #9ca3af;
}

.featured-listing-card__icon {
  flex-shrink: 0;
  color: #9ca3af;
  width: 16px;
  height: 16px;
}

.featured-listing-card__agent {
  font-size: 0.875rem;
  color: #9ca3af;
  margin-bottom: 1rem;
}

/* The only link on the card, sitting on a dark panel where the browser
   default blue is both illegible and off brand. Signalled with weight and a
   soft underline rather than colour, so it reads as clickable while the row
   around it stays quiet, then goes red on hover. */
.featured-listing-card__agent a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.featured-listing-card__agent a:hover,
.featured-listing-card__agent a:focus {
  color: var(--brand-red);
  text-decoration-color: var(--brand-red);
}

/* Designations are links in their own right but should not compete with the
   agent name beside them, so they keep the underline affordance at a lighter
   weight and a quieter colour. */
.featured-listing-card__agent a.featured-listing-card__agent-cred {
  font-weight: 400;
  color: #d1d5db;
}

/* The comma between designations is punctuation, not part of either link. */
.featured-listing-card__agent-sep {
  color: #9ca3af;
}

.featured-listing-card__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: #dc2626;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
  margin-top: auto;
}

.featured-listing-card__link:hover {
  color: #b91c1c;
  text-decoration: underline;
}

.featured-listings-section__cta {
  text-align: center;
  margin-top: 3rem;
}

.section-dark-bg .btn-outline {
  border-color: #ffffff;
  color: #ffffff;
}

.section-dark-bg .btn-outline:hover {
  background: #ffffff;
  color: #1f2937;
}

/* .testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.quote-icon {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  color: rgba(220, 38, 38, 0.2);
} */
/* 
.testimonial-card {
  background-color: white;
  padding: 2rem;
  border-radius: 0.125rem;
  position: relative;
  border-top: 4px solid var(--brand-red);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.testimonial-quote {
  flex: 1;
  margin-bottom: 1.5rem;
}

.testimonial-card > div:last-child {
  margin-top: auto;
  padding-top: 1rem;
}

@media (min-width: 768px) {
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
} */

/* Case Studies Section Styles */
.case-studies-section {
  background-color: #f3f4f6;
  padding: 4rem 0;
}

.case-study{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 320px;
  margin-bottom: 2rem;
  background-color: #fcfcfd;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.case-study img{
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-study__content{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  padding: 2rem;
  min-height: 0;
  background-color: #fcfcfd;
}

/* Stacked, below the row layout.

   flex: 1 on both children is right in a row, where they are splitting a width,
   and wrong in a column, where it lets the content panel be shorter than what is
   in it. min-height: 0 removes the one thing that would have stopped that, and
   the card clips its overflow for the sake of its rounded corners, so the last
   thing in the panel, the button, was the part that disappeared.

   So neither child flexes here. The image is given a height and the panel is as
   tall as its content. */
@media (max-width: 766px) {
  .case-study img {
    flex: 0 0 auto;
    height: 12rem;
  }

  .case-study__content {
    flex: 0 0 auto;
    min-height: auto;
  }
}

@media (min-width: 767px) {
  .case-study{
    flex-direction: row;
    align-items: stretch;
  }
  .case-study img,
  .case-study__content {
    flex: 1 1 0%;
    min-width: 0;
  }
}

.case-study__title{
  font-size: 2rem;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  margin-bottom: 1rem;
  text-transform: none !important;
  line-height: 1.2;
}

.case-study__subtitle{
  font-size: .75rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: .5rem;
  text-transform: uppercase;
  color: var(--brand-red);
}

.case-study__description{
  font-size: 1rem;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 1rem;
  color: #6b7280;
}
.stats{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-family: 'Playfair Display', serif;
  gap:0.75rem;

}
.stat{
  display: flex;
  flex-direction: column;
  border-bottom: 4px solid var(--brand-red);
  padding: 1rem;
  width: 100%;
  margin-bottom: 1rem;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.stat__values{
  font-size: 2.25rem;
  font-weight: 700;
  padding-left: 1rem;
}
.stat__label{
  font-size: 1rem;
  font-weight: 400;
  padding:1rem;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 600;
}

.case-study-ctas{
  display: flex;
  justify-content: space-between;
  width: 100%;
  text-align: center;
}

.btn-red{
  width: 100%;
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: #ffffff !important;
}
.btn-red:hover{
  background: var(--brand-red-dark) !important;
  border-color: var(--brand-red-dark) !important;
  text-decoration: none !important;
}

/* Services Section Styles */
.about-us-section {
  background-color: #ffffff;
  padding: 4rem 0;
}

.about-us-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Services Section Styles */
.about-section {
  background-color: #ffffff;
  padding: 4rem 0;
}

.about-section .section-title::after {
    left:0;
    transform:translateX(0%);
}

.about-section .section-title-block {
  margin-bottom: 3rem;
}


/* ========================================
   MEMBER PROFILE PAGE
======================================== */

.member-profile-page {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding: 3rem 0;
}

.profile-header {
  display: flex;
  gap: 2rem;
}

@media (max-width: 425px) {
  .profile-header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
}

.profile-header-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: flex-end;
  gap: 1rem;
}

@media (max-width: 425px) {
  .profile-header-content {
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
}

.profile-photo {
  width: 250px !important;
  height: 250px !important;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .profile-photo {
    width: 300px !important;
    height: 300px !important;
  }
}

.profile-name {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .profile-name {
    font-size: 2rem;
  }
}

.profile-title {
  background-color: var(--brand-red);
  color: #ffffff;
  font-size: 0.8125rem;      /* was 10px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.85rem;   /* was 0.25rem 0.5rem */
  margin-top: 0.25rem;
  margin-bottom: 0rem;
  display: inline-block;
}

.profile-credentials {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.profile-credential {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #1a1a1a;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 600;
}

.profile-credential i {
  font-size: 0.75rem;
}

/* A designation with a URL renders as an anchor rather than a span, so the
   badge has to shed the site's default link colour and underline and pick up
   a hover state instead. Designations without a URL stay spans and are left
   looking exactly as they did. */
.profile-credential--link {
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.profile-credential--link:hover,
.profile-credential--link:focus {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
  text-decoration: none;
}

.profile-achievement {
  margin-bottom: 0px !important;
  color: #6b7280;
}

.profile-contact-wrapper {
  display: flex;
  gap: 1rem;
}

@media (max-width: 1023px) {
  .profile-contact-wrapper {
    flex-direction: column;
    
    gap: 1rem;
  }
  .profile-achievement {
    max-width: 300px;
    text-align: center;
  }
}

.profile-contact-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: #fff;
  /* border-radius: 8px; */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  text-decoration: none !important;
  color: #333;
}

@media (max-width: 425px) {
  .profile-contact-card {
    width: 100%;
    justify-content: center;
  }
}

.profile-contact-card:hover {
  background-color: #f8f9fa;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.profile-contact-card i {
  font-size: 1.5rem;
  color: var(--brand-red);
}

.profile-contact-card span {
  font-size: 0.95rem;
  font-weight: 600;
  color: #555;
}

.profile-contact-card:hover span {
  color: var(--brand-red) !important;
}

.profile-tabs {
  max-width: 1200px;
  margin: 0 auto;
  border-bottom: 2px solid #dee2e6;
}

.profile-tabs .nav-link {
  color: var(--brand-dark) !important;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border: none;
  background: none;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .profile-tabs .nav-link {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}

.profile-tabs .nav-link:hover {
  color: var(--brand-red) !important;
  border-top-color: var(--brand-red) !important;
}

.profile-tabs .nav-link.active {
  color: var(--brand-red) !important;
  border-top-color: var(--brand-red) !important;
  background: none;
}

.profile-tab-content {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  /* border-radius: 8px; */
  padding: 2.5rem;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .profile-tab-content {
    padding: 1.5rem;
  }
}

.profile-section {
  margin-bottom: 2.5rem;
}

.profile-section:last-child {
  margin-bottom: 0;
}

.profile-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #f0f0f0;
}

/* Headings inside a bio match the section titles above them, so Notable
   Transactions reads as a section of the profile rather than as a subheading
   of the biography it now lives inside. */
.profile-section-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #f0f0f0;
}

.profile-section-content p {
  color: var(--brand-dark);
  line-height: 1.8;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.profile-section-content p:last-child {
  margin-bottom: 0;
}

.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.profile-tag {
  padding: 0.5rem 1rem;
  background-color: #f0f0f0;
  color: #555;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.profile-tag:hover {
  background-color: #e0e0e0;
}

.profile-transactions,
.profile-section-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-transactions li,
.profile-section-content ul li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 1rem;
  line-height: 1.6;
  font-size: 0.95rem;
}

.profile-transactions li::before,
.profile-section-content ul li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.3rem;
  color: var(--brand-red);
}

.profile-table {
  margin-top: 0;
}

.profile-table thead th {
  background-color: #1a1a1a;
  color: #fff;
  font-weight: 600;
  padding: 1rem;
  border: none;
}

.profile-table tbody td {
  padding: 0.875rem 1rem;
  vertical-align: middle;
  color: #555;
}

.profile-table tbody tr:hover {
  background-color: #f8f9fa;
}

/* ========================================
   iOS SAFARI STICKY HEADER FIX
======================================== */
@supports (-webkit-overflow-scrolling: touch) {
  /* iOS-specific fixes - only apply on iOS devices */
  body {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Force hardware acceleration for sticky on iOS */
  .site-header {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* PAGE CONTENT */
.page-content {
  font-size: 1rem;
  line-height: 1.625; 
  margin-bottom: 1rem;
}

.page-content > * + * {
  margin-top: 1.5rem;    /* space-y-6 */
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.image-card {
  position: relative;
  padding: .5rem;
  background-color: #fff;
  border-radius: 0.125rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.image-content {
  position: relative;
}

@media (max-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .image-content {
    order: -1;
    width: 100%;
  }
  
  .image-content img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Hero dark section override — remove the red underline on dark bg */
#hero .section-title::after {
  background-color: var(--brand-red);
}

/* Property meta strip */
.cs-meta-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 2rem auto 1.5rem;
  max-width: 760px;
}

.cs-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2rem;
  text-align: center;
}

.cs-meta-item__label {
  font-size: 0.7rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.cs-meta-item__value {
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  color: #111111;
}

.cs-meta-divider {
  width: 1px;
  height: 36px;
  background-color: #d1d5db;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .cs-meta-strip {
      flex-direction: column;
      gap: 1rem;
  }
  .cs-meta-divider {
      width: 40px;
      height: 1px;
  }
}

/* Hero tagline */
.cs-hero-tagline {
  font-size: 1.125rem;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: #374151;
  text-align: center;
  margin: 0 auto 0.5rem;
  max-width: 560px;
  line-height: 1.6;
}

/* Hero stat row */
.cs-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-width: 760px;
  margin: 0 auto;
}

.cs-hero-stat {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-bottom: 3px solid var(--brand-red);
  padding: 1.25rem 1rem;
  text-align: center;
}

.cs-hero-stat__value {
  font-size: 1.75rem;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  color: #111111;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}

.cs-hero-stat__label {
  font-size: 0.7rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
}

/* Banner image — full bleed, fixed height */
.cs-banner {
  width: 100%;
  height: 420px;
  overflow: hidden;
  line-height: 0;
}

@media (min-width: 768px) {
  .cs-banner {
      height: 520px;
  }
}

.cs-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Key Highlights list */
.cs-highlights-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cs-highlights-list li {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #374151;
  line-height: 1.65;
  padding: 1rem 1rem 1rem 3.25rem;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  position: relative;
}

.cs-highlights-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--brand-red);
}

.cs-highlights-list li::after {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  background-color: var(--brand-red);
}

/* Opportunity / Strategy content layout */
.cs-content-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .cs-content-section {
      flex-direction: row;
      gap: 4rem;
      align-items: flex-start;
  }
  .cs-content-section__header {
      flex: 0 0 220px;
  }
  .cs-content-section__body {
      flex: 1;
  }
}

.cs-content-section__header .section-title-block {
  margin-bottom: 0;
}

.cs-content-section__title {
  font-size: 1.75rem !important;
}

/* Remove centered underline — left-align for these sections */
.cs-content-section__header .section-title::after {
  left: 0;
  transform: none;
}

.cs-content-section__body p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.cs-content-section__body p:last-child {
  margin-bottom: 0;
}

/* Results section */
.cs-results-intro {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.125rem;
  color: #d1d5db;
  text-align: center;
  max-width: 600px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}

.cs-results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .cs-results-grid {
      grid-template-columns: repeat(3, 1fr);
  }
}

.cs-result-card {
  background-color: #ffffff;
  border-bottom: 4px solid var(--brand-red);
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}

.cs-result-card__value {
  font-size: 2rem;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  color: #111111;
  margin-bottom: 0.25rem;
  line-height: 1.1;
}

.cs-result-card__label {
  font-size: 0.7rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-red);
  margin-bottom: 0.75rem;
}

.cs-result-card__desc {
  font-size: 0.875rem;
  font-family: 'Montserrat', sans-serif;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

.video-wrapper {
  width: 100%;
  height: 550px; 
  overflow: hidden;
  position: relative;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.15);
  transform-origin: 15% top;
}

/* ==========================================================================
   Newsletter series covers
   Append to the end of assets/css/custom.css

   The existing .insight-card__image and .newsletter-thumbnail img rules use
   object-fit: cover, which is right for a photograph but crops a wide logo to
   its middle. These modifiers only apply when the image is a series cover
   rather than a per issue featured image, so photographs keep the original
   treatment.
   ========================================================================== */

.insight-card__image--logo {
  object-fit: contain;
  opacity: 1;
  background: #ffffff;
  padding: 0.75rem;
}

.insight-card:hover .insight-card__image--logo {
  /* Kept subtle. The full 1.1 scale on the photographic cards pushes a
     contained logo past its padding and clips the edges. */
  transform: scale(1.03);
  opacity: 1;
}

.newsletter-thumbnail__logo {
  object-fit: contain !important;
  background: #ffffff;
  padding: 0.25rem;
}
/* ========================================
   BACK TO TOP
======================================== */
.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 9998; /* Under .site-header, which sits at 9999. */
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--brand-red);
  color: #ffffff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);

  /* Hidden until navigation.js adds the visible class. visibility rather than
     display, so the fade has something to animate, and pointer-events off so
     it cannot be clicked while invisible. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.5rem);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease,
    background-color 0.2s ease;
}

.back-to-top--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus {
  background-color: var(--brand-red-dark);
}

@media (max-width: 767px) {
  .back-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 2.75rem;
    height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.01ms, visibility 0.01ms;
    transform: none;
  }
}

/* ========================================
   NEWSLETTER COLUMNS
======================================== */
.newsletter-columns {
  display: grid;
  grid-template-columns: 1fr;
  /* Stacked below 992px, where this gap is what separates one publication from
     the next. The desktop rule below drops the row half of it. */
  gap: 3rem;
}

@media (min-width: 992px) {
  .newsletter-columns {
    /* Two publications side by side. Below this width they stack, because the
       logo and its description do not survive half a tablet. */
    grid-template-columns: repeat(2, minmax(0, 1fr));

    /* No row gap. There are only two rows, heads and lists, so a row gap here
       is pure space between the red rule and the first issue. Column gap is
       the only one that separates anything. */
    gap: 0 2.5rem;

    /* Two named rows, heads then lists. Each column spans both and inherits
       them through subgrid, so both heads size to the taller of the two and
       the red rule underneath lands at the same height in each column. Without
       this the rule follows its own description and the two never line up. */
    grid-template-rows: auto auto;
  }

  .newsletter-column {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}

.newsletter-column__head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--brand-red);
}

/* Logo left, wording right. flex-shrink is off so a long description cannot
   squeeze the logo, and the text block takes whatever is left. */
.newsletter-column__logo {
  flex: 0 0 auto;
  width: 150px;
  max-height: 130px;
  height: auto;
  object-fit: contain;
}

.newsletter-column__text {
  min-width: 0;
}

.newsletter-column__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--brand-dark);
  margin: 0 0 0.5rem;
}

@media (max-width: 479px) {
  /* Side by side stops working once the logo is most of the screen. */
  .newsletter-column__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

.newsletter-column__intro {
  color: #6b7280;
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0;
}

/* The issue list. One row per month, because the publication name, the
   description, and the call to action all live in the column head now. */
.newsletter-issues {
  list-style: none;
  margin: 0;
  /* Only the row padding on the first link separates it from the rule above,
     which is the intent. */
  padding: 0;
}

.newsletter-issue + .newsletter-issue {
  border-top: 1px solid #e5e7eb;
}

.newsletter-issue__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem;
  color: var(--brand-dark);
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.newsletter-issue__link i {
  color: var(--brand-red);
  flex-shrink: 0;
}

a.newsletter-issue__link:hover,
a.newsletter-issue__link:focus {
  color: var(--brand-red);
  background-color: #f9fafb;
  text-decoration: none !important;
}

/* An issue with no PDF attached. Shown rather than hidden, so a missing file
   is visible to the client instead of the row silently vanishing. */
.newsletter-issue__link--empty {
  color: #9ca3af;
  cursor: default;
}

.newsletter-issue__link--empty i {
  color: #9ca3af;
}

/* List and pager stacked, filling the second subgrid row. The pager sits at the
   bottom of the column rather than floating beside the list. */
.newsletter-column__body {
  display: flex;
  flex-direction: column;
}

.newsletter-pager {
  /* Grouped in the middle rather than pushed to the outer edges. Pinned to the
     edges, the Older button of one column sat right against the Newer button
     of the next and read as one set of controls. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.newsletter-pager__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 2px;
  background: none;
  color: var(--brand-dark);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.newsletter-pager__button:hover:not(:disabled),
.newsletter-pager__button:focus:not(:disabled) {
  color: #ffffff;
  background-color: var(--brand-red);
  border-color: var(--brand-red);
}

/* The end of the run. Greyed rather than hidden, so the two buttons do not
   jump sideways as you page through. */
.newsletter-pager__button:disabled {
  color: #d1d5db;
  border-color: #f3f4f6;
  cursor: default;
}

.newsletter-pager__count {
  color: #6b7280;
  font-size: 0.875rem;
  white-space: nowrap;
  min-width: 7rem;
  text-align: center;
}

/* ========================================
   BEVEL
======================================== */
/* One place, rather than forty edits scattered up the file. The stylesheet
   had fifteen different corner values in it and most boxes had none at all,
   so this both softens the sharp ones and pulls the rest to a single value.

   Being last in the file, these win over the earlier values at equal
   specificity. The older declarations are left where they are rather than
   hunted down, so reverting is a matter of deleting this section.

   Three things are deliberately left out. Pills keep their full round ends
   (.hero-badge, .profile-credential, .menu-toggle__icon), the back to top
   button stays a circle, and the angled corner ribbons on the deal cards are
   a shape rather than a box. Full bleed bands, the header, and the footer are
   also untouched: they run edge to edge, so a corner there would sit against
   the viewport and look like a mistake. */

/* Buttons and controls. */
.site-nav__link,
.site-nav__cta,
.site-header__menu-toggle,
.hero-btn,
.hero-category,
.cta-btn-primary,
.cta-btn-outline,
.button,
.button-link,
.btn-red,
.btn-outline,
.newsletter-cta,
.newsletter-pager__button,
.contact-form__button,
.contact-form__select,
.contact-form__input,
.contact-form__textarea,
.form-dropdown,
.form-textbox,
.form-textarea,
.footer-form-input,
.footer-form-submit,
.footer-social-icons li a,
.profile-tabs .nav-link {
  border-radius: var(--radius);
}

/* Cards and panels. */
.value-card,
.service-card,
.additional-services,
.pm-team-member,
.pm-team-member__link,
.experience-card,
.team-member-card,
.insight-card,
.featured-listing-card,
.testimonial-card,
.image-card,
.contact-card,
.contact-sidebar,
.contact-map,
.newsletter-item,
.profile-contact-card,
.profile-tab-content,
.cs-hero-stat,
.cs-result-card,
.stat,
.form-all {
  border-radius: var(--radius);
}

/* Images and media. An image needs the radius on the element itself as well
   as on any wrapper, because a square corner will otherwise poke out past a
   rounded parent unless that parent also clips. */
.accounting-image,
.accounting-image-frame,
.experience-card__image img,
.featured-listing-card__image-wrap,
.insight-card__image-wrap,
.newsletter-thumbnail,
.pm-team-member__image-wrapper,
.team-member-card__image-wrapper,
.profile-photo,
.video-wrapper,
.gwe-lightbox__image {
  border-radius: var(--radius);
  overflow: hidden;
}

/* The about-block frame is the one exception to the rule above: its badge is
   deliberately positioned outside the frame (bottom: -1.5rem, left: -24px),
   so this wrapper must not clip. The photo sits inside a 0.5rem white mat,
   which means no square corner can poke past the rounded frame regardless --
   so the radius goes on the frame and on the photo separately instead of
   being enforced by overflow. */
.image-wrapper {
  border-radius: var(--radius);
}

.image-wrapper img {
  border-radius: calc(var(--radius) - 1px);
}

/* Small tags and badges. */
.image-badge,
.featured-listing-card__badge,
.team-member-card__role,
.profile-tag,
.footer-brand__mark,
.service-card__icon,
.cs-meta-item,
.contact-map__label {
  border-radius: var(--radius);
}

/* Cards whose children paint their own background need to clip, not just
   round. A border-radius shapes an element's own background and border and
   stops there: children are not clipped to it unless told to be. The case
   study card is a flex row of an image and an opaque content panel, each
   filling half of it, so the rounded corners were being drawn and then
   painted straight over by the square corners of the two children. The
   radius was applying the whole time and could not be seen.

   The children do not carry a radius of their own here. Rounding the panel
   would round its inner edge too, in the middle of the card. */
.case-study {
  border-radius: var(--radius);
  overflow: hidden;
}

/* The dropdown hangs off the header, so only its lower corners are free. */
.nav-dropdown__menu {
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ========================================
   CASE STUDY CAROUSEL
======================================== */
/* Three cards on stage: one centred, one tucked behind each side. Every card
   occupies the same grid cell, so the stage is as tall as the tallest of
   them and nothing needs measuring in script. Position is expressed as a
   transform off that shared cell rather than as a scroll offset, which is
   what lets the side cards disappear on a phone by changing two rules
   instead of recalculating anything. */
.cs-carousel {
  position: relative;
}

.cs-carousel__stage {
  display: grid;
  /* Room for the resting shadow and for the scaled cards, which would
     otherwise be shaved off by the horizontal clip below. */
  padding: 1.5rem 0 2rem;
  overflow: hidden;
}

/* The clip leaves a hard vertical cut down each tucked card, which reads as
   a broken edge rather than as something continuing past the frame. Fading
   the last few percent turns the cut into a falloff. Only the ghosts are
   touched: the centred card spans 9% to 91%, well inside the solid band. */
@media (min-width: 992px) {
  .cs-carousel.is-ready .cs-carousel__stage {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}

.cs-carousel__stage > .case-study {
  grid-area: 1 / 1;
  margin-bottom: 0;
}

/* Until the script runs there is no carousel, only the first card. This is
   what makes the block degrade to what it rendered before rather than to a
   pile of cards stacked on top of each other. */
.cs-carousel:not(.is-ready) .case-study:not(:first-child) {
  display: none;
}

.cs-carousel.is-ready .case-study {
  width: 100%;
  justify-self: center;
  opacity: 0;
  transform: scale(0.84);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.45s ease, opacity 0.45s ease, filter 0.45s ease;
}

.cs-carousel.is-ready .case-study.is-active {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
  z-index: 3;
}

/* Below the breakpoint the side cards are gone rather than merely faded. A
   peek needs width to sit in, and on a phone the card already fills it. */
@media (min-width: 992px) {
  .cs-carousel.is-ready .case-study {
    /* Narrower than the stage on purpose. The gap either side is the only
       place the tucked cards have to show through, so this number is what
       sets how much of each ghost is visible: at 76% there is 12% of stage
       either side rather than 9%. Widening it hides them; narrowing it past
       about 70% starts to shrink the card being read for no gain. */
    width: 76%;
  }

  .cs-carousel.is-ready .case-study.is-prev,
  .cs-carousel.is-ready .case-study.is-next {
    /* Blurred as well as faded. Opacity alone left the stats and the button
       readable, so the tucked cards read as content competing with the one
       in front instead of as depth behind it. Blur removes the words while
       keeping the shape, which is the whole point of a card being back
       there. Opacity can then come back up a little. */
    opacity: 0.38;
    filter: blur(3px) saturate(0.6);
    pointer-events: auto;
    cursor: pointer;
    z-index: 2;
  }

  .cs-carousel.is-ready .case-study.is-prev {
    transform: translateX(-62%) scale(0.84);
  }

  .cs-carousel.is-ready .case-study.is-next {
    transform: translateX(62%) scale(0.84);
  }

  .cs-carousel.is-ready .case-study.is-prev:hover,
  .cs-carousel.is-ready .case-study.is-next:hover {
    opacity: 0.6;
    filter: blur(1.5px) saturate(0.8);
  }
}

/* Arrows sit outside the card at full width and move inward over it as the
   viewport narrows, because there is no margin left to sit in. */
/* Solid and dark rather than a white chip with a grey hairline. The old pair
   were white on a near white band with a blurred card behind them, which is
   about the least visible thing a control can be. These are now the darkest
   objects in the section, which is what a control competing with a large
   photograph has to be. */
.cs-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--radius);
  background-color: var(--brand-dark);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.cs-carousel__arrow--prev {
  left: 0;
}

.cs-carousel__arrow--next {
  right: 0;
}

.cs-carousel__arrow:hover,
.cs-carousel__arrow:focus-visible {
  background-color: var(--brand-red);
  color: #ffffff;
  transform: translateY(-50%) scale(1.06);
}

.cs-carousel__arrow:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cs-carousel__arrow,
  .cs-carousel__arrow:hover,
  .cs-carousel__arrow:focus-visible {
    transition: none;
    transform: translateY(-50%);
  }
}

.cs-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* The visible dot is small; the button around it is not. The hit area is
   padded out to something a thumb can land on. */
.cs-carousel__dot {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.cs-carousel__dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background-color: #c7cbd1;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.cs-carousel__dot.is-current::after {
  width: 1.25rem;
  background-color: var(--brand-red);
}

.cs-carousel__dot:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
}

@media (max-width: 991.98px) {
  .cs-carousel__arrow--prev {
    left: 0.25rem;
  }

  .cs-carousel__arrow--next {
    right: 0.25rem;
  }
}

/* On a phone the arrows come off the card and go down beside the dots.

   Vertically centred over the card is right while the card has margin either
   side to sit in. Once it fills the width there is no margin, so the arrows
   were sitting on the card itself, over the description on one side and the
   stats on the other, covering the content and taking the taps meant for it.

   The dots row is given the height of an arrow so the three controls line up
   across the bottom, and the arrows are anchored to it rather than to the
   middle of the stage. Bottom: 0 is the bottom of .cs-carousel, which is the
   dots row, because both the arrows and the dots are appended to it. */
@media (max-width: 766px) {
  .cs-carousel__arrow {
    top: auto;
    bottom: 0;
    width: 2.75rem;
    height: 2.75rem;
    transform: none;
  }

  /* The centring transform is gone, so the hover state cannot keep reapplying
     it or the button jumps half its height on touch. */
  .cs-carousel__arrow:hover,
  .cs-carousel__arrow:focus-visible {
    transform: scale(1.06);
  }

  .cs-carousel__dots {
    align-items: center;
    min-height: 2.75rem;
    margin-top: 0.25rem;
  }
}

@media (max-width: 766px) and (prefers-reduced-motion: reduce) {
  .cs-carousel__arrow,
  .cs-carousel__arrow:hover,
  .cs-carousel__arrow:focus-visible {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-carousel.is-ready .case-study,
  .cs-carousel.is-ready .case-study.is-prev:hover,
  .cs-carousel.is-ready .case-study.is-next:hover {
    transition: none;
  }

  .cs-carousel__dot::after {
    transition: none;
  }
}

/* ========================================
   COMPLETED TRANSACTIONS
======================================== */
/* The filter tabs are links that reload the page, not panel switches, so
   they are styled as a segmented control rather than as buttons. The current
   one is marked by fill rather than by weight alone, because a bold word
   beside two regular ones is not a strong enough signal for a control that
   changes what the page contains. */
.deal-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.deal-filter {
  padding: 0.6rem 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  background-color: #ffffff;
  color: var(--brand-dark);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.deal-filter:hover,
.deal-filter:focus-visible {
  border-color: var(--brand-red);
  color: var(--brand-red);
  text-decoration: none;
}

.deal-filter.is-current {
  border-color: var(--brand-red);
  background-color: var(--brand-red);
  color: #ffffff;
}

.deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 2rem;
}

.deal-grid__empty {
  padding: 3rem 0;
  text-align: center;
  color: #6b7280;
}

/* The trigger covers the card. It sits below the agent links rather than
   above them, so a click on an agent still reaches the profile and only the
   rest of the card opens the panel. */
.featured-listing-card.is-openable {
  position: relative;
  cursor: pointer;
}

.featured-listing-card__open {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.featured-listing-card__agent a {
  position: relative;
  z-index: 2;
}

.featured-listing-card__open:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: -2px;
}

/* ---------- The panel ---------- */
/* Hidden in the card and revealed once the script has moved it into the
   dialog, so it never flashes on the page during load. */
.deal-panel {
  display: grid;
  grid-template-columns: 1fr;
  background-color: #ffffff;
  border-radius: var(--radius);
  overflow: hidden;
}

@media (min-width: 768px) {
  .deal-panel {
    grid-template-columns: 1.1fr 1fr;
  }
}

.deal-panel__media {
  position: relative;
  min-height: 18rem;
  background-color: #f3f4f6;
}

.deal-panel__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deal-panel__body {
  padding: 2.5rem;
}

.deal-panel__title {
  margin: 0.25rem 0 0;
  font-family: 'Playfair Display', serif;
  font-size: 2.125rem;
  font-weight: 700;
  color: var(--brand-dark);
}

.deal-panel__building {
  margin-top: 0.35rem;
  color: #6b7280;
  font-size: 0.95rem;
}

/* A definition list, because these are label and value pairs. Each pair is
   wrapped in a div so the grid has one child per fact rather than alternating
   dt and dd across the columns. */
.deal-panel__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1rem;
  margin: 1.75rem 0 0;
  padding: 1.25rem 0;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.deal-panel__fact dt {
  margin-bottom: 0.3rem;
  color: #6b7280;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deal-panel__fact dd {
  margin: 0;
  color: var(--brand-dark);
  font-weight: 600;
}

.deal-panel__agent {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* The span the script mounts the portrait into. Sized here as well as on the
   image, so the row does not reflow at the moment the picture appears. */
.deal-panel__agent-figure {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
}

.deal-panel__agent-photo {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  object-fit: cover;
  /* The one round thing in this panel. A headshot cropped square next to a
     name reads as a record; cropped round it reads as a person. */
  border-radius: 999px;
}

.deal-panel__agent-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.deal-panel__agent-label {
  color: #6b7280;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.deal-panel__agent-name {
  color: var(--brand-dark);
  font-weight: 700;
}

.deal-panel__agent-role {
  color: #6b7280;
  font-size: 0.85rem;
}

/* Designations sit on their own line under the name rather than trailing it,
   because an agent can carry three of them and a wrapped name reads badly. */
.deal-panel__agent-creds {
  font-size: 0.85rem;
  line-height: 1.5;
}

.deal-panel__agent-cred {
  color: var(--brand-red);
  font-weight: 600;
}

a.deal-panel__agent-cred:hover,
a.deal-panel__agent-cred:focus-visible {
  text-decoration: underline;
}

.deal-panel__agent-sep {
  color: #6b7280;
}

/* ---------- The dialog ---------- */
.deal-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.deal-lightbox:not([open]) {
  display: none;
}

.deal-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tight, because the panel is now wide enough that generous margins were
     the thing capping it on a laptop rather than the max-width. */
  padding: 1rem;
}

.deal-lightbox::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

.deal-lightbox__content {
  width: 100%;
  max-width: 76rem;
  /* Scrolls inside the dialog rather than growing past the viewport, which
     is what a long address plus a portrait does on a short laptop screen. */
  max-height: 92vh;
  overflow-y: auto;
  border-radius: var(--radius);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.deal-lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.deal-lightbox__close:hover,
.deal-lightbox__close:focus-visible {
  background-color: var(--brand-red);
}

.deal-lightbox__close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* body carries overflow: visible !important further up this file, which an
   inline style cannot beat. Matching body plus a class does. */
body.deal-lightbox-open {
  overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
  .deal-filter,
  .deal-lightbox__close {
    transition: none;
  }
}