/*
 Theme Name:   Divi Child
 Theme URI:    https://www.elegantthemes.com/gallery/divi/
 Description:  Divi 5 child theme
 Author:       Seamless Atomica
 Author URI:   https://seamlessatomica.com
 Template:     Divi
 Version:      1.0.44
 Text Domain:  divi-child
*/

/* ==========================================================================
   CSS Custom Properties (from Framer design tokens)
   ========================================================================== */

:root {
  /* Colors */
  --color-accent:              rgb(64, 141, 140);
  --color-bg:                  rgb(255, 255, 255);
  --color-bg-secondary:        rgb(242, 242, 242);
  --color-heading:             rgb(0, 0, 0);
  --color-heading-light:       rgb(255, 255, 255);
  --color-body:                rgb(51, 51, 51);
  --color-body-light:          rgb(255, 255, 255);
  --color-black-transparent:   rgba(0, 0, 0, 0.2);
  --color-white-transparent:   rgba(255, 255, 255, 0.2);

  /* Fonts */
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-text:    "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-link:    "Figtree", sans-serif;

  /* Sizes */
  --font-size-button: 22px; /* 25% up from Divi's 20px default */
}

/* ==========================================================================
   Global font override — kill Divi's Open Sans default
   ========================================================================== */

body,
body.et-tb,
body.et-tb .container,
#page-container,
#main-content,
#et-main-area,
.et_pb_section,
.et_pb_row,
.et_pb_column,
.et_pb_module,
.et_pb_text,
.et_pb_blurb,
.et_pb_toggle,
.et_pb_accordion,
.et_pb_tab,
.et_pb_slider,
.et_pb_cta,
.et_pb_pricing_table,
.et_pb_contact_form,
.et_pb_blog_grid,
.et_pb_post_content {
  /* font-family: var(--font-text) !important; */
  color: var(--color-body);
}

/* ==========================================================================
   Headings (H1-H6)
   ========================================================================== */

h1,
.et_pb_module h1,
.et_pb_text h1,
.et_pb_slide_description h1,
.et_pb_fullwidth_header h1 {
  /* font-family: var(--font-display) !important; */
  font-weight: 300;
  font-size: 50px;
  line-height: 1em;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

h2,
.et_pb_module h2,
.et_pb_text h2,
.et_pb_slide_description h2 {
  /* font-family: var(--font-display) !important; */
  font-weight: 300;
  font-size: 50px;
  line-height: 1.1em;
  letter-spacing: -0.03em;
  color: var(--color-accent);
}

h3,
.et_pb_module h3,
.et_pb_text h3 {
  /* font-family: var(--font-display) !important; */
  font-weight: 300;
  font-size: 28px;
  line-height: 1.3em;
  margin-bottom:7px;
  letter-spacing: -0.03em;
  color: var(--color-accent);
}

h4,
.et_pb_module h4,
.et_pb_text h4,
.et_pb_toggle_title {
  /* font-family: var(--font-display) !important; */
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3em;
  margin-bottom:7px;
  letter-spacing: -0.03em;
  color: var(--color-accent);
}

h5,
.et_pb_module h5,
.et_pb_text h5 {
  /* font-family: var(--font-display) !important; */
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3em;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

h6,
.et_pb_module h6,
.et_pb_text h6 {
  /* font-family: var(--font-display) !important; */
  font-weight: 300;
  font-size: 22px;
  line-height: 1.3em;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

.et_pb_testimonial_author {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3em;
  letter-spacing: -0.03em;
  color: var(--gcid-primary-color) !important;
}

.entry-content ul{padding-left: 1.3em!important;}
/* ==========================================================================
   Responsive heading scale — tablet ≤980px, mobile ≤767px
   Pixel values; !important + body #page-container specificity to beat Divi/TB.
   Desktop sizes: h1 80 / h2 40 / h3 28
   ========================================================================== */

@media (max-width: 980px) {
  body #page-container h1,
  body #page-container .et_pb_module h1,
  body #page-container .et_pb_text h1,
  body #page-container .et_pb_slide_description h1,
  body #page-container .et_pb_fullwidth_header h1,
  body #page-container .entry-title {
    font-size: 40px !important;
  }
  body #page-container h2,
  body #page-container .et_pb_module h2,
  body #page-container .et_pb_text h2,
  body #page-container .et_pb_slide_description h2 {
    font-size: 32px !important;
  }
  body #page-container h3,
  body #page-container .et_pb_module h3,
  body #page-container .et_pb_text h3 {
    font-size: 24px !important;
  }
  body #page-container h6,
  body #page-container .et_pb_module h6,
  body #page-container .et_pb_text h6 {
    font-size: 20px !important;
  }
}

@media (max-width: 767px) {
  body #page-container h1,
  body #page-container .et_pb_module h1,
  body #page-container .et_pb_text h1,
  body #page-container .et_pb_slide_description h1,
  body #page-container .et_pb_fullwidth_header h1,
  body #page-container .entry-title {
    font-size: 30px !important;
  }
  body #page-container h2,
  body #page-container .et_pb_module h2,
  body #page-container .et_pb_text h2,
  body #page-container .et_pb_slide_description h2 {
    font-size: 26px !important;
  }
  body #page-container h3,
  body #page-container .et_pb_module h3,
  body #page-container .et_pb_text h3 {
    font-size: 22px !important;
  }
}


/* ==========================================================================
   Body / Paragraph
   ========================================================================== */

p,
li,
.et_pb_module p,
.et_pb_text p,
.et_pb_blurb_description,
.et_pb_toggle_content,
.et_pb_tab_content,
.et_pb_pricing li,
.et_pb_contact_form label,
.et_pb_contact_form input,
.et_pb_contact_form textarea {
  /* font-family: var(--font-text) !important; */
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5em;
  letter-spacing: -0.01em;
  padding-bottom:15px;
}

/* Divi zeroes the last paragraph in a block with
   `p:not(.has-background):last-of-type { padding-bottom: 0 }`. Keep the same
   15px as every other paragraph instead. The `body` prefix outranks Divi's
   rule on specificity, so load order does not matter. */
body p:not(.has-background):last-of-type {
  padding-bottom: 15px;
}

/* ==========================================================================
   Links
   ========================================================================== */

a,
.et_pb_module a {
  /* font-family: var(--font-link) !important; */
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}

/* ==========================================================================
   Divi Buttons — locked size, no grow on hover
   ========================================================================== */

body #page-container a.transwhitebtn:hover,
body #page-container a.transwhitebtn:focus,
body #page-container a.transwhitebtn:active,
body #page-container .transwhitebtn .et_pb_button:hover,
body #page-container .transwhitebtn .et_pb_button:focus,
body #page-container .transwhitebtn .et_pb_button:active {
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 100px !important;
  opacity: 0.8 !important;
}

/* Every button inside #page-container, Divi and Gravity Forms alike, overriding
   the per-module colours and sizes set in the builder. The `#et-boc .et-l
   .et_pb_section` chain outranks Divi's own module CSS, which reaches two IDs
   on Theme Builder layouts.
   Exceptions:
   - Event Calendar "Event details" links (.dec-more-info-button) keep the
     plugin's own style throughout.
   - Footer buttons, .transwhitebtn buttons and the page 609 "Buy at Crowley"
     CTA keep their own colours and borders but share the size and font. */

/* Size and font */
body #page-container #et-boc .et-l .et_pb_section :is(.et_pb_button, .gform_button):not(.dec-more-info-button > a),
body #page-container #et-boc .et-l .et_pb_section :is(.et_pb_button, .gform_button):not(.dec-more-info-button > a):is(:hover, :focus, :active) {
  font-family: var(--font-display) !important;
  /* 25% bigger than Divi's 20px default. Padding is in em, so the button box
     scales with it. Header buttons keep their own 18px above. */
  font-size: var(--font-size-button) !important;
  padding: 0.3em 1em !important;
  padding-left: 1em !important;
  padding-right: 1em !important;
  letter-spacing: 0 !important;
  box-sizing: border-box !important;
  /* Pill shape at every breakpoint; longhands beat Divi's per-corner
     !important radius settings */
  border-radius: 999px !important;
  border-top-left-radius: 999px !important;
  border-top-right-radius: 999px !important;
  border-bottom-left-radius: 999px !important;
  border-bottom-right-radius: 999px !important;
  transition: background-color 0.2s, color 0.2s !important;
}

/* Mobile: centre wrapped button text and tighten line height */
@media (max-width: 767px) {
  body #page-container #et-boc .et-l .et_pb_section :is(.et_pb_button, .gform_button):not(.dec-more-info-button > a),
  body #page-container #et-boc .et-l .et_pb_section :is(.et_pb_button, .gform_button):not(.dec-more-info-button > a):is(:hover, :focus, :active) {
    text-align: center !important;
    line-height: 1.3em !important;
    display: block !important;
    width: 100% !important;
    /* Divi caps .et_pb_module.et_pb_button at max-content */
    max-width: 100% !important;
  }

  /* Careers "Apply for …" links are hand-styled inline-block anchors in text
     modules, not Divi buttons; give them the same mobile treatment */
  body.page-id-141 #page-container .et_pb_text a[href*="/careers/"][style*="inline-block"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    line-height: 1.3em !important;
  }

  /* Let the button module wrapper span the column so the button can too */
  body #page-container #et-boc .et-l .et_pb_section .et_pb_button_module_wrapper:has(> .et_pb_button:not(.dec-more-info-button > a)) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Colours and border */
body #page-container #et-boc .et-l .et_pb_section :is(.et_pb_button, .gform_button):not(.et-l--footer *, .transwhitebtn, .dec-more-info-button > a, .page-id-609 .et_pb_button_module_wrapper > a) {
  background-color: var(--color-accent) !important;
  background-image: none !important;
  border: 2px solid var(--color-accent) !important;
  color: var(--color-heading-light) !important;
}

/* Background drops to 70%; text and border stay solid. opacity: 1 stops the
   global `a:hover` fade from dimming the whole button. */
body #page-container #et-boc .et-l .et_pb_section :is(.et_pb_button, .gform_button):not(.et-l--footer *, .transwhitebtn, .dec-more-info-button > a, .page-id-609 .et_pb_button_module_wrapper > a):is(:hover, :focus, :active) {
  background-color: hsl(from var(--color-accent) h s l / 0.7) !important;
  color: var(--color-heading-light) !important;
  border-color: var(--color-accent) !important;
  opacity: 1 !important;
}

/* Event Calendar "Event details" links: background drops to 70% of the
   module's button colour on hover; text and border stay solid. opacity: 1
   stops the global `a:hover` fade from dimming the whole button. */
body #page-container .event-displays .dec-more-info-button > a.et_pb_button:is(:hover, :focus, :active) {
  background-color: hsl(from var(--gcid-mx1z4up38d) h s l / 0.7) !important;
  opacity: 1 !important;
}

/* Kill Divi arrow icons on buttons */
.et_pb_button:not(.dec-more-info-button > a)::after,
.et_pb_button:not(.dec-more-info-button > a)::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   Service Tiles — reusable component

   Usage: set the Divi Row's CSS ID to `servicetiles` (4-up, home page) or
   `subservicetiles` (3-up, service sub-pages) — Row > Advanced > CSS ID.
   Each column in that row becomes an image tile with a gradient scrim and a
   hover darken. Put one module per column (Blurb/CTA/Text); it is pinned to
   the bottom of the tile.

   Both IDs share every visual treatment (scrim, hover, focus, padding) and
   differ only in the column count / aspect ratio vars below.

   Works on the frontend and inside the Divi visual builder — no page-,
   row-index-, or column-index-specific selectors.

   Per-instance overrides (set on the row via Divi's custom CSS, Main Element):
     --tiles-columns      columns at full width
     --tiles-columns-md   columns at <= 1599px
     --tiles-columns-sm   columns at <= 767px
     --tiles-gap          grid gap
     --tiles-ratio        tile aspect ratio
     --tiles-padding      inner padding of the tile content
   ========================================================================== */

#servicetiles,
#subservicetiles {
  --tiles-columns: 4;
  --tiles-columns-md: 2;
  --tiles-columns-sm: 1;
  --tiles-gap: 24px;
  --tiles-ratio: 1 / 1;
  --tiles-padding: 30px 20px;

  display: grid !important;
  grid-template-columns: repeat(var(--tiles-columns), minmax(0, 1fr));
  gap: var(--tiles-gap);
  align-items: stretch !important;
}

/* 3-up variant: stays 3 across down to mobile, wider tiles to compensate. */
#subservicetiles {
  --tiles-columns: 3;
  --tiles-columns-md: 3;
  --tiles-columns-sm: 1;
  --tiles-ratio: 4 / 3;
}

:is(#servicetiles, #subservicetiles) > .et_pb_column {
  position: relative !important;
  display: flex !important;
  isolation: isolate;
  width: 100% !important;
  margin: 0 !important;
  aspect-ratio: var(--tiles-ratio);
  min-width: 0;
  overflow: hidden !important;
  background-color: #000000 !important;
  background-blend-mode: normal !important;
  flex: none !important;
}

:is(#servicetiles, #subservicetiles) > .et_pb_column:hover,
:is(#servicetiles, #subservicetiles) > .et_pb_column:focus-within {
  background-color: #000000 !important;
}

/* Image layer — inherits the column's Divi background image so it can be
   filtered without also filtering the tile content. */
:is(#servicetiles, #subservicetiles) > .et_pb_column::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  background-image: inherit;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: brightness(0.86);
  transition: filter 0.25s ease;
  pointer-events: none;
}

/* Gradient scrim so bottom-aligned text stays legible. */
:is(#servicetiles, #subservicetiles) > .et_pb_column::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: linear-gradient(180deg, rgba(43, 135, 218, 0) 0%, var(--gcid-secondary-color) 100%);
  opacity: 0.8;
  pointer-events: none;
}

:is(#servicetiles, #subservicetiles) > .et_pb_column:hover::before,
:is(#servicetiles, #subservicetiles) > .et_pb_column:focus-within::before {
  filter: brightness(0.58);
}

:is(#servicetiles, #subservicetiles) > .et_pb_column > .et_pb_module {
  position: relative;
  z-index: 2;
}

:is(#servicetiles, #subservicetiles) > .et_pb_column > .et_pb_promo,
:is(#servicetiles, #subservicetiles) > .et_pb_column > .et_pb_module:only-child {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--tiles-padding) !important;
}

@media (max-width: 1599px) {
  :is(#servicetiles, #subservicetiles) {
    grid-template-columns: repeat(var(--tiles-columns-md), minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  :is(#servicetiles, #subservicetiles) {
    grid-template-columns: repeat(var(--tiles-columns-sm), minmax(0, 1fr));
  }
}

/* ==========================================================================
   Service Row Tiles — the home page row carrying the custom class `services`

   Image modules inside linked columns, so they get the same image treatment as
   the other home page tiles: a resting darken that deepens on hover, no zoom,
   no overlay. !important because Divi emits module-specific filter rules.
   ========================================================================== */

.services img {
  filter: brightness(0.86) !important;
  transform: none !important;
  transition: filter 0.25s ease !important;
}

.services .et_pb_column:hover img,
.services .et_pb_column:focus-within img {
  filter: brightness(0.58) !important;
}

/* The whole column is a link, and the global `a:hover { opacity: .8 }` above
   would fade the tile out and read as lightening instead of darkening. */
.services a:hover,
.services a:focus,
.services a:active,
.services .et_pb_column:hover a,
.services .et_pb_column:focus-within a {
  opacity: 1 !important;
}

/* The column carries Beige (--gcid-mx1z4up38d, #f3ebdc) at 40% from the
   builder; hover takes it to 70%. Relative colour syntax against the global
   variable rather than a hard-coded rgba, so an edit to Beige flows through. */
.services .et_pb_column {
  transition: background-color 0.25s ease;
}

.services .et_pb_column:hover,
.services .et_pb_column:focus-within {
  background-color: hsl(from var(--gcid-mx1z4up38d) h s l / 0.7) !important;
}

/* ==========================================================================
   News Grid Cards
   ========================================================================== */

/* Independent Living uses Divi's fullwidth portfolio module. Target the
   component class as well as its generated instance class so Divi cannot fall
   back to its pale native hover overlay when module numbering changes. */
.et_pb_fullwidth_portfolio .et_pb_portfolio_image img {
  filter: brightness(0.86) !important;
  transition: filter 0.25s ease !important;
}

.et_pb_fullwidth_portfolio .et_pb_portfolio_image:hover img,
.et_pb_fullwidth_portfolio .et_pb_portfolio_image:focus-within img {
  filter: brightness(0.58) !important;
}

.et_pb_fullwidth_portfolio .et_pb_portfolio_image .et_overlay {
  display: none !important;
}

.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image {
  aspect-ratio: 1 / 1;
  display: block !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: #000000;
}

.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image::before {
  content: "" !important;
  display: block !important;
  width: 100%;
  padding-top: 100%;
  pointer-events: none;
}

.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image::after {
  content: none !important;
  display: none !important;
}

.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image img {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  /* Match the image colour treatment used by the What's On event tiles.
     !important is needed here because Divi emits module-specific filter rules. */
  filter: brightness(0.86) !important;
  transform: none !important;
  transition: filter 0.25s ease !important;
}

.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image:hover img,
.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image:focus-within img {
  filter: brightness(0.58) !important;
}

.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image .meta {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 4 !important;
  background: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}

.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image:hover .meta,
.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image:focus-within .meta {
  background: none !important;
}

.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image .meta a {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4 !important;
  color: #ffffff;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal;
  pointer-events: auto;
}

.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image .meta a:hover,
.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image .meta a:focus,
.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image .meta a:active,
.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image .meta a:focus-visible {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal;
}

.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image .meta a::before {
  content: none !important;
  display: none !important;
  pointer-events: none;
}

.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image .et_overlay {
  display: none !important;
}

.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image .meta a::after {
  content: "\24";
  font-family: ETmodules !important;
  font-size: 32px;
  line-height: 1;
  color: #ffffff;
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 6 !important;
  opacity: 0;
  transform: none;
  transition: opacity 0.25s ease;
}

.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image:hover .meta a::after,
.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image .meta a:focus-visible::after {
  opacity: 1;
  transform: none;
}

.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image h3.et_pb_module_header {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 30px;
  z-index: 5 !important;
  padding: 0;
  margin: 0;
  color: #ffffff !important;
  font-size: clamp(20px, 1.45vw, 24px);
  line-height: 1.2;
  font-weight: 400;
  text-align: left !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal;
}

.et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image p.post-meta {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 5 !important;
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: calc(100% - 120px);
  padding: 8px 12px;
  margin: 0;
  border-radius: 5px;
  background: #408D8C;
  color: #ffffff !important;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 400;
  text-align: left !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal;
}

@media (max-width: 767px) {
  .et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image h3.et_pb_module_header {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }

  .et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image p.post-meta {
    top: 24px;
    left: 24px;
  }

  .et_pb_fullwidth_portfolio_0 .et_pb_portfolio_image .meta a::after {
    top: 26px;
    right: 24px;
  }
}

/* ==========================================================================
   Event Grid Cards
   ========================================================================== */

body.page-id-609 .et_pb_gallery .et_pb_gallery_item,
body.page-id-609 .et_pb_gallery .et_pb_gallery_item.et_animated {
  -webkit-animation: none !important;
  animation: none !important;
  -webkit-animation-delay: 0s !important;
  animation-delay: 0s !important;
  -webkit-animation-duration: 0s !important;
  animation-duration: 0s !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.event-displays .events-main__container.grid-container .imge_callout,
.event-display_0 .events-main__container.grid-container .imge_callout {
  position: relative;
}

.event-displays .events-main__container.grid-container,
.event-display_0 .events-main__container.grid-container {
  column-gap: 1.5% !important;
}

.event-displays .events-main__container.grid-container .event-container,
.event-display_0 .events-main__container.grid-container .event-container {
  grid-column: span 4 !important;
}

.event-displays .events-main__container.grid-container h3.event__title,
.event-displays .events-main__container.grid-container h3.event__title a,
.event-displays .events-main__container.grid-container h3.event__title a:hover,
.event-displays .events-main__container.grid-container h3.event__title a:focus,
.event-displays .events-main__container.grid-container h3.event__title a:active,
.event-display_0 .events-main__container.grid-container h3.event__title,
.event-display_0 .events-main__container.grid-container h3.event__title a,
.event-display_0 .events-main__container.grid-container h3.event__title a:hover,
.event-display_0 .events-main__container.grid-container h3.event__title a:focus,
.event-display_0 .events-main__container.grid-container h3.event__title a:active {
  font-weight: 300 !important;
}

.event-displays .events-main__container.grid-container .event__image-link,
.event-displays .events-main__container.grid-container .event__image-link:hover,
.event-displays .events-main__container.grid-container .event__image-link:focus,
.event-displays .events-main__container.grid-container .event__image-link:active,
.event-display_0 .events-main__container.grid-container .event__image-link,
.event-display_0 .events-main__container.grid-container .event__image-link:hover,
.event-display_0 .events-main__container.grid-container .event__image-link:focus,
.event-display_0 .events-main__container.grid-container .event__image-link:active {
  opacity: 1 !important;
}

.event-displays .events-main__container.grid-container .tribe-events-event-image img,
.event-display_0 .events-main__container.grid-container .tribe-events-event-image img {
  filter: brightness(0.86);
  transition: filter 0.25s ease;
}

.event-displays .events-main__container.grid-container .imge_callout:hover .tribe-events-event-image img,
.event-displays .events-main__container.grid-container .imge_callout:focus-within .tribe-events-event-image img,
.event-display_0 .events-main__container.grid-container .imge_callout:hover .tribe-events-event-image img,
.event-display_0 .events-main__container.grid-container .imge_callout:focus-within .tribe-events-event-image img,
/* Home page module has "whole tile clickable" on: an absolutely positioned
   .ecs_event_clickable link covers the tile, so .imge_callout never sees
   :hover. Trigger from that overlay link instead (it precedes .image-column). */
.event-displays .events-main__container.grid-container .ecs_event_clickable:is(:hover, :focus-visible) ~ .image-column .tribe-events-event-image img,
.event-display_0 .events-main__container.grid-container .ecs_event_clickable:is(:hover, :focus-visible) ~ .image-column .tribe-events-event-image img {
  filter: brightness(0.58);
}

.event-displays .events-main__container.grid-container .callout_box,
.event-display_0 .events-main__container.grid-container .callout_box {
  top: 30px;
  left: 30px;
  z-index: 5 !important;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  max-width: calc(100% - 120px);
  padding: 8px 12px;
  margin: 0;
  border: 0;
  border-radius: 5px;
  background: #408D8C !important;
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal;
}

.event-displays .events-main__container.grid-container .callout_box:hover,
.event-displays .events-main__container.grid-container .imge_callout:hover .callout_box,
.event-displays .events-main__container.grid-container .imge_callout:focus-within .callout_box,
.event-display_0 .events-main__container.grid-container .callout_box:hover,
.event-display_0 .events-main__container.grid-container .imge_callout:hover .callout_box,
.event-display_0 .events-main__container.grid-container .imge_callout:focus-within .callout_box,
.event-displays .events-main__container.grid-container .ecs_event_clickable:is(:hover, :focus-visible) ~ .image-column .callout_box,
.event-display_0 .events-main__container.grid-container .ecs_event_clickable:is(:hover, :focus-visible) ~ .image-column .callout_box {
  opacity: 1 !important;
  filter: none !important;
}

.event-displays .events-main__container.grid-container .callout_box .event-day,
.event-displays .events-main__container.grid-container .callout_box .event-month,
.event-displays .events-main__container.grid-container .callout_box .event-year,
.event-display_0 .events-main__container.grid-container .callout_box .event-day,
.event-display_0 .events-main__container.grid-container .callout_box .event-month,
.event-display_0 .events-main__container.grid-container .callout_box .event-year {
  color: #ffffff !important;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 400;
}

@media (min-width: 981px) and (max-width: 1024px) {
  .event-displays .events-main__container.grid-container .event-container,
  .event-display_0 .events-main__container.grid-container .event-container {
    grid-column: span 4 !important;
  }
}

@media (max-width: 980px) {
  .event-displays .events-main__container.grid-container .event-container,
  .event-display_0 .events-main__container.grid-container .event-container {
    grid-column: span 12 !important;
  }
}

/* ==========================================================================
   Buy at Crowley CTA Button
   ========================================================================== */

body.page-id-609 #page-container .et-l--post .et_pb_button_module_wrapper .et_pb_button {
  color: #ffffff !important;
  background-color: #408D8C !important;
  border: 2px solid #408D8C !important;
  border-radius: 100px !important;
  padding: 0.3em 1em !important;
  opacity: 1 !important;
}

body.page-id-609 #page-container .et-l--post .et_pb_button_module_wrapper .et_pb_button:hover,
body.page-id-609 #page-container .et-l--post .et_pb_button_module_wrapper .et_pb_button:focus,
body.page-id-609 #page-container .et-l--post .et_pb_button_module_wrapper .et_pb_button:active {
  color: #ffffff !important;
  background-color: rgba(64, 141, 140, 0.7) !important;
  border-color: #408D8C !important;
  border-width: 2px !important;
  padding: 0.3em 1em !important;
  opacity: 0.8 !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.et-l--footer .et_pb_menu__menu > nav > ul,
.et-l--footer .et_pb_menu .et_pb_menu__menu > nav > ul {
  flex-direction: column !important;
}

.et-l--footer .et_pb_menu__menu > nav > ul > li,
.et-l--footer .et_pb_menu .et_pb_menu__menu > nav > ul > li {
  display: block !important;
}

.et-l--footer p,
.et-l--footer .et_pb_module p,
.et-l--footer .et_pb_text p {
  color: #ffffff !important;
}

/* All footer text white — headings excluded so they keep their own color.
   #page-container prefix beats the Theme Builder module's inline CSS. */
#page-container .et-l--footer,
#page-container .et-l--footer p,
#page-container .et-l--footer li,
#page-container .et-l--footer span,
#page-container .et-l--footer strong,
#page-container .et-l--footer em,
#page-container .et-l--footer a,
#page-container .et-l--footer .et_pb_text,
#page-container .et-l--footer .et_pb_text_inner,
#page-container .et-l--footer .et_pb_blurb_description,
#page-container .et-l--footer .et_pb_blurb_container,
#page-container .et-l--footer .et_pb_module p,
#page-container .et-l--footer .et_pb_module li,
#page-container .et-l--footer .et_pb_module span,
#page-container .et-l--footer .et_pb_module a {
  color: #ffffff !important;
}

/* Footer buttons — white border, overriding the global 2px accent border. */
#page-container .et-l--footer .et_pb_button,
#page-container .et-l--footer .et_pb_button:hover,
#page-container .et-l--footer .et_pb_button:focus,
#page-container .et-l--footer .et_pb_button:active,
#page-container .et-l--footer .et_pb_module .et_pb_button,
#page-container .et-l--footer .et_pb_module .et_pb_button:hover,
#page-container .et-l--footer .et_pb_more_button,
#page-container .et-l--footer .et_pb_more_button:hover,
#page-container .et-l--footer .et_pb_promo_button,
#page-container .et-l--footer .et_pb_promo_button:hover,
#page-container .et-l--footer .et_pb_newsletter_button,
#page-container .et-l--footer .et_pb_newsletter_button:hover,
#page-container .et-l--footer li.button > a,
#page-container .et-l--footer li.button > a:hover {
  border: 1px solid #ffffff !important;
  border-color: #ffffff !important;
}

/* Footer menu links white */
#page-container .et-l--footer .et_pb_menu .et-menu > li > a,
#page-container .et-l--footer .et_pb_menu .et-menu li a,
#page-container .et-l--footer .et_pb_menu__menu > nav > ul > li > a,
#page-container .et-l--footer .pa-open-mobile-menu .et-menu li a,
#page-container .et-l--footer .et_mobile_menu li a,
#page-container .et-l--footer .et_pb_menu .et-menu li.current-menu-item > a,
#page-container .et-l--footer .et_pb_menu .et-menu li.current_page_item > a {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Footer menu spacing — the Theme Builder menu modules set line-height: 0em
   on links, so wrapped labels overlap on desktop and items collapse onto each
   other once the mobile rules below zero the li padding. */
#page-container .et-l--footer .et_pb_menu .et-menu > li > a {
  line-height: 1.4 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#page-container .et-l--footer .et_pb_menu .et-menu > li {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 0 0.6em !important;
}

#page-container .et-l--footer .et_pb_menu .et-menu > li:last-child {
  margin-bottom: 0 !important;
}

@media all and (max-width: 980px) {

  /* Show menu list instead of hamburger */
  .pa-open-mobile-menu .et_pb_menu__menu {
    display: flex !important;
    width: 100% !important;
  }

  .pa-open-mobile-menu .et_mobile_nav_menu {
    display: none !important;
  }

  /* Make the module and inner wrappers full width */
  .pa-open-mobile-menu,
  .pa-open-mobile-menu .et_pb_menu_inner_container,
  .pa-open-mobile-menu .et_pb_menu__wrap,
  .pa-open-mobile-menu nav,
  .pa-open-mobile-menu ul {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Left align menu wrapper */
  .pa-open-mobile-menu .et_pb_menu__wrap {
    justify-content: flex-start !important;
  }

  /* Stack items vertically and left align */
  .pa-open-mobile-menu .et_pb_menu__menu > nav > ul {
    display: block !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }

  .pa-open-mobile-menu .et_pb_menu__menu > nav > ul > li {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .pa-open-mobile-menu .et_pb_menu__menu > nav > ul > li > a {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Submenus */
  .pa-open-mobile-menu .sub-menu,
  .pa-open-mobile-menu .et-menu li ul {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }

}



.et-l--footer .et_pb_menu .sub-menu,
.et-l--footer .et_pb_menu .et-menu li ul,
.et-l--footer .pa-open-mobile-menu .sub-menu,
.et-l--footer .pa-open-mobile-menu .et-menu li ul {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.et-l--footer .et_pb_menu .et-menu .menu-item-has-children > a:first-child,
.et-l--footer .pa-open-mobile-menu .et-menu .menu-item-has-children > a:first-child {
  padding-right: 0 !important;
}

.et-l--footer .et_pb_menu .et-menu .menu-item-has-children > a:first-child::after,
.et-l--footer .pa-open-mobile-menu .et-menu .menu-item-has-children > a:first-child::after {
  display: none !important;
  content: none !important;
}

#page-container .et-l--footer .et_pb_menu .et-menu > li > a:hover,
#page-container .et-l--footer .et_pb_menu .et-menu > li > a:focus,
#page-container .et-l--footer .pa-open-mobile-menu .et-menu > li > a:hover,
#page-container .et-l--footer .pa-open-mobile-menu .et-menu > li > a:focus,
#page-container .et-l--footer .et_pb_menu .et-menu > li.menu-item-has-children > a:hover,
#page-container .et-l--footer .et_pb_menu .et-menu > li.menu-item-has-children > a:focus,
#page-container .et-l--footer .pa-open-mobile-menu .et-menu > li.menu-item-has-children > a:focus,
#page-container .et-l--footer .pa-open-mobile-menu .et-menu > li.menu-item-has-children > a:hover,
#page-container .et-l--footer a:hover {
  color: #ffffff !important;
  opacity: 0.8 !important;
  background-color: transparent !important;
}

/* Footer text modules are set to width: 50% in the Theme Builder, which on
   phones squeezes the address block until the email wraps. Let them use the
   full column width on mobile. */
@media all and (max-width: 767px) {
  #page-container .et-l--footer .et_pb_text {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   Single Event pages
   ========================================================================== */

body.single-tribe_events .event_page_module__inner .entry-title.title2.summary,
body.single-tribe_events .event_page_module__inner .ecs-thumbnail,
body.single-tribe_events .event_page_module__inner .tribe-events-event-image {
  display: none !important;
}

body.single-tribe_events .event_page_module__inner .ecs-event-list,
body.single-tribe_events .event_page_module__inner .ecs-event-posts,
body.single-tribe_events .event_page_module__inner article,
body.single-tribe_events .event_page_module__inner .col-md-12 {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.single-tribe_events .event_page_module__inner .decm-show-detail-center {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

body.single-tribe_events .event_page_module__inner .decm-show-data-display-block {
  display: block;
  margin: 0;
  color: var(--color-body);
  font-size: 15px;
  line-height: 1.45;
}

body.single-tribe_events .event_page_module__inner .ecs-detail-label {
  display: block;
  margin: 0 0 2px;
  color: var(--color-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

body.single-tribe_events .event_page_module__inner a {
  color: var(--color-accent);
}

body.single-tribe_events .event_page_module__inner .diec_add_to_calendar {
  padding: 0;
  margin: 24px 0 0;
}

body.single-tribe_events .event_page_module__inner .diec_add_to_calendar .et_pb_button {
  display: block;
  width: 100%;
  padding: 0.75em 1em !important;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent);
  color: #ffffff;
  font-size: 19px !important; /* 25% up from 15px; !important to beat the global button size */
  line-height: 1.2 !important;
  text-align: center;
}

body.single-tribe_events .event_page_module__inner .ecs-calendar_link_align {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

body.single-tribe_events .event_page_module__inner .ecs-calendar_link_align p {
  width: 100%;
  max-width: none;
  padding: 0 !important;
  margin: 0 !important;
}

body.single-tribe_events .event_page_module__inner .ecs-calendar_link_align a {
  display: block;
  padding: 10px 12px;
  border-radius: 5px;
  background: #ffffff;
  color: var(--color-accent);
  font-size: 14px;
  line-height: 1.25;
}

body.single-tribe_events .et_pb_post_content p,
body.single-tribe_events .et_pb_post_content li {
  font-size: 15px;
  line-height: 1.55;
}

body.single-tribe_events .et_pb_post_content ul,
body.single-tribe_events .et_pb_post_content ol {
  padding-bottom: 1em;
}

/* Event content is its own Divi layout nested in the Theme Builder Post
   Content module, so its default section/row padding pushes it below the
   top of the grey sidebar. Strip the top spacing so both columns line up. */
body.single-tribe_events .et_pb_post_content .et_pb_section:first-child,
body.single-tribe_events .et_pb_post_content .et_pb_section:first-child > .et_pb_row:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.single-tribe_events .et_pb_post_content .et_pb_section:first-child > .et_pb_row:first-child > .et_pb_column:first-child > .et_pb_module:first-child,
body.single-tribe_events .et_pb_post_content .et_pb_text_inner > :first-child {
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  body.single-tribe_events .event_page_module__inner .diec_add_to_calendar .et_pb_button {
    font-size: 18px !important; /* 25% up from 14px */
  }
}

/* ==========================================================================
   Hero Buttons — full width on mobile
   ========================================================================== */

@media (max-width: 767px) {
  .et_pb_fullwidth_header_0 .header-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .et_pb_fullwidth_header_0 .et_pb_header_button_wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .et_pb_fullwidth_header_0 .et_pb_header_button_wrapper .et_pb_button,
  .et_pb_fullwidth_header_0 .et_pb_header_button_wrapper .et_pb_button_one,
  .et_pb_fullwidth_header_0 .et_pb_header_button_wrapper .et_pb_button_two {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: stretch !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}



.property-gallery-shell {
  width: 100%;
}

.property-gallery-main {
  margin-bottom: 16px;
}

.property-gallery-main__frame {
  display: block;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #f2f2f2;
}

.property-gallery-main__trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.property-gallery-main__zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  pointer-events: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.property-gallery-main__zoom .et-pb-icon {
  font-size: 18px;
  line-height: 1;
}

.property-gallery-main__trigger:hover .property-gallery-main__zoom,
.property-gallery-main__trigger:focus-visible .property-gallery-main__zoom {
  background: rgba(0, 0, 0, 0.75);
  transform: scale(1.08);
}

.property-gallery-main__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
}

.property-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.property-gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

/* Hugs the displayed image so the nav arrows, which are absolutely
   positioned against it, can never be taller than the image itself. */
.property-gallery-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.property-gallery-lightbox__image {
  display: block;
  max-width: 100%;
  /* Viewport units, not a percentage: the stage's height is derived from this
     image, so a percentage here would be circular and resolve to nothing. */
  max-height: calc(100vh - 80px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

.property-gallery-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.property-gallery-lightbox__close .et-pb-icon {
  font-size: 56px;
  line-height: 1;
}

.property-gallery-lightbox__close:hover,
.property-gallery-lightbox__close:focus,
.property-gallery-lightbox__nav:hover,
.property-gallery-lightbox__nav:focus {
  color: #ccc;
}

.property-gallery-lightbox__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 110px;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.property-gallery-lightbox__nav--prev {
  left: 0;
  justify-content: flex-start;
  padding-left: 24px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.35), transparent);
}

.property-gallery-lightbox__nav--next {
  right: 0;
  justify-content: flex-end;
  padding-right: 24px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.35), transparent);
}

.property-gallery-lightbox__nav-glyph {
  font-size: 56px;
  line-height: 1;
}

@media (max-width: 980px) {
  .property-gallery-lightbox {
    padding: 32px 16px;
  }

  .property-gallery-lightbox__image {
    max-height: calc(100vh - 64px);
  }

  .property-gallery-lightbox__nav {
    width: 84px;
  }

  .property-gallery-lightbox__nav--prev {
    padding-left: 16px;
  }

  .property-gallery-lightbox__nav--next {
    padding-right: 16px;
  }

  .property-gallery-lightbox__nav-glyph,
  .property-gallery-lightbox__close .et-pb-icon {
    font-size: 44px;
  }
}

@media (max-width: 767px) {
  .property-gallery-lightbox {
    padding: 24px 56px;
  }

  .property-gallery-lightbox__close {
    top: 12px;
    right: 12px;
  }

  .property-gallery-lightbox__nav {
    width: 56px;
  }

  .property-gallery-lightbox__nav--prev {
    padding-left: 8px;
  }

  .property-gallery-lightbox__nav--next {
    padding-right: 8px;
  }

  .property-gallery-lightbox__nav-glyph,
  .property-gallery-lightbox__close .et-pb-icon {
    font-size: 34px;
  }
}

body.property-gallery-lock-scroll {
  overflow: hidden;
}

.property-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.property-gallery-thumb {
  display: block;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.property-gallery-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: none;
  border-radius: 10px;
  box-shadow: none;
}

.property-gallery-thumb:hover {
  transform: translateY(-2px);
}

.property-gallery-thumb.is-active {
}

@media (max-width: 980px) {
  .property-gallery-thumbs {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .property-gallery-thumbs {
    grid-template-columns: repeat(2, 1fr);
  }

  .property-gallery-main__image {
    aspect-ratio: 4 / 3;
  }
}


.property-details-list {
  list-style: none;
  margin: 0!important;
  padding: 0!important;
}

.property-details-list li {
  list-style: none;
  margin: 0 0 2px 0;
  padding: 0;
  line-height: 1.35;
  color: #333;
}

.property-details-list li:last-child {
  margin-bottom: 0;
}

.property-details-list strong {
  font-weight: 700;
}


/* ==========================================================================
   SQUARE IMAGES IN BODY CONTENT
   Removes all rounded corners from images inside the body area only.
   Header (.et-l--header / #main-header) and footer (.et-l--footer /
   #main-footer) are untouched.
   ========================================================================== 

#main-content img,
#main-content picture,
#main-content svg,
#main-content figure,
.et-l--body img,
.et-l--body picture,
.et-l--body svg,
.et-l--body figure {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

/* Image wrappers that clip with overflow: hidden and would keep the rounded
   silhouette even after the img itself is squared off. 
#main-content .et_pb_image_wrap,
#main-content .et_pb_image,
#main-content .et_pb_main_blurb_image,
#main-content .et_pb_blog_grid .et_pb_image_container,
#main-content .et_pb_post .entry-featured-image-url,
#main-content .et_pb_portfolio_image,
#main-content .et_pb_gallery_image,
#main-content .et_pb_slide_image,
#main-content .et_pb_team_member_image,
#main-content .et_pb_video_overlay,
#main-content .property-gallery-main__frame,
#main-content .property-gallery-thumb,
.et-l--body .et_pb_image_wrap,
.et-l--body .et_pb_image,
.et-l--body .et_pb_main_blurb_image,
.et-l--body .et_pb_blog_grid .et_pb_image_container,
.et-l--body .et_pb_post .entry-featured-image-url,
.et-l--body .et_pb_portfolio_image,
.et-l--body .et_pb_gallery_image,
.et-l--body .et_pb_slide_image,
.et-l--body .et_pb_team_member_image,
.et-l--body .et_pb_video_overlay,
.et-l--body .property-gallery-main__frame,
.et-l--body .property-gallery-thumb {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}
*/
/* Beat Divi's own high-specificity / inline module styles. 
body #page-container #main-content .et_pb_module img,
body #page-container .et-l--body .et_pb_module img,
body #page-container #main-content .et_pb_module .et_pb_image_wrap,
body #page-container .et-l--body .et_pb_module .et_pb_image_wrap {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}
*/


/* ==========================================================================
   FEATURE ICON ROWS  (.feature_icon on the row)
   Each column holds an Image module above a Text module.
   - Everything centred
   - Vertical gap between the two modules halved: 30px -> 15px
   - Image rendered at half width, responsively
   ========================================================================== */

/* Column: centre children, halve the vertical gap. */
body #page-container .feature_icon .et_pb_column,
.feature_icon .et_pb_column {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  row-gap: 15px !important;
  column-gap: 0;
  text-align: center;
}

/* Divi 4 style module spacing fallback (margin-based, not gap-based). */
body #page-container .feature_icon .et_pb_column > .et_pb_module,
.feature_icon .et_pb_column > .et_pb_module {
  margin-bottom: 0 !important;
  width: 100%;
}

/* Text module: centre all inline content. */
.feature_icon .et_pb_text,
.feature_icon .et_pb_text .et_pb_text_inner,
.feature_icon .et_pb_text h1,
.feature_icon .et_pb_text h2,
.feature_icon .et_pb_text h3,
.feature_icon .et_pb_text h4,
.feature_icon .et_pb_text h5,
.feature_icon .et_pb_text h6,
.feature_icon .et_pb_text p,
.feature_icon .et_pb_text ul,
.feature_icon .et_pb_text ol {
  text-align: center !important;
  list-style-position: inside;
}

/* Image module: centred, fixed pixel width at every breakpoint.
   Change --feature-icon-size to resize the icons everywhere. */
.feature_icon {
  --feature-icon-size: 75px;
}

body #page-container .feature_icon .et_pb_image,
.feature_icon .et_pb_image {
  width: var(--feature-icon-size) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.feature_icon .et_pb_image .et_pb_image_wrap {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.feature_icon .et_pb_image img {
  width: 100% !important;
  height: auto !important;
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
   HEADER DROPDOWNS FLUSH WITH THE HEADER
   By default the sub-menu is positioned off the menu link box, so it opens
   ~19px above the bottom of the header (#et-top-navigation has 35px bottom
   padding, but #top-menu > li > a only has 16px). Making the top-level item
   position: static hands the containing block to #main-header .container,
   whose bottom edge is the bottom of the header, so top: 100% puts the
   dropdown top exactly on the hero image top. left: auto keeps the existing
   horizontal alignment under its menu item.
   ========================================================================== */

#main-header #top-menu > li.menu-item-has-children,
#main-header #top-menu-nav > ul > li.menu-item-has-children {
  position: static;
}

#main-header #top-menu > li.menu-item-has-children > ul.sub-menu {
  top: 100%;
  left: auto;
}

/* Second level and deeper keep their own flyout positioning. */
#main-header #top-menu li li {
  position: relative;
}

/* Dropdown items: halve Divi's horizontal spacing. Divi puts 20px on the li
   and another 20px on the link (40px each side); 10px + 10px gives 20px. */
#main-header #top-menu li li {
  padding-left: 10px;
  padding-right: 10px;
}

#main-header #top-menu li li a {
  padding-left: 10px;
  padding-right: 10px;
}

/* Dropdowns size to their longest item instead of Divi's fixed 240px, so no
   item wraps. min-width keeps short dropdowns at Divi's original width. The
   link's fixed 200px width is dropped so it can grow with the text, and
   third-level flyouts open off the parent's actual right edge (Divi
   hard-codes left: 240px). */
#main-header #top-menu ul.sub-menu {
  width: max-content;
  min-width: 240px;
}

/* Divi makes every #top-menu li inline-block and relies on the fixed 240px
   width to stack them; with max-content they would sit side by side, so
   force each dropdown item onto its own row. */
#main-header #top-menu li li {
  display: block;
}

#main-header #top-menu li li a {
  width: auto;
  white-space: nowrap;
}

#main-header #top-menu li li ul.sub-menu {
  left: 100%;
}

/* Vertically centre the nav text in the white header bar.
   #top-menu > li carries 15px of bottom padding, all of it below the link,
   so the text sat 7.5px above the header's centre line (in both the normal
   and the scrolled/fixed header). Moving 7.5px of it above the link drops the
   text onto the centre line; the remaining 7.5px goes onto the link itself
   (below) so the item height — and so the header height — is unchanged. */
#main-header #top-menu > li {
  padding-top: 7.5px;
  padding-bottom: 0;
}

/* Link box runs all the way to the bottom of the white bar, so the hover
   target touches the hero image and the dropdown with no dead gap to cross.
   44px/20px are Divi's own values for the normal and fixed header, plus the
   7.5px taken off the li above. */
#main-header #top-menu > li > a {
  padding-bottom: 55px;cursor: pointer;
}

#main-header.et-fixed-header #top-menu > li > a {
  padding-bottom: 27.5px;
}


/* ==========================================================================
   SECONDARY NAV BAR DEPTH (#top-header)
   The global "Body / Paragraph" rule above matches every `li`, so the
   secondary menu items were carrying its 15px padding-bottom. That padded the
   bar out to 67.5px tall while the link text stayed put, leaving the text
   7.5px above the bar's centre line. Dropping the inherited padding takes the
   bar to 52.5px: the container's 12px padding-top and the link's 12px
   (0.75em) padding-bottom now match, so the text is centred without moving
   from where it sits today — the bar only loses depth at the bottom.
   ========================================================================== */

#top-header #et-secondary-nav > li,
#top-header #et-secondary-menu > ul > li {
  padding-bottom: 0;
}


/* ==========================================================================
   HEADER NAV BUTTON ITEMS
   Add the CSS class `button` to a menu item (Appearance > Menus > Screen
   Options > CSS Classes) to render it as an accent-outlined lozenge, matching
   the site's other buttons: 2px accent border, fully rounded corners, accent
   text that inverts to white on accent on hover.

   The link's own tall padding-bottom (set above so the hover target reaches
   the bottom of the header) is reset here, or the pill would be the full
   height of the bar. The li keeps the spacing instead, so item height — and
   so header height — is unchanged.
   ========================================================================== */

#main-header #top-menu > li.button {
  padding-bottom: 44px;
}

#main-header.et-fixed-header #top-menu > li.button {
  padding-bottom: 20px;
}

#main-header #top-menu > li.button > a,
#main-header.et-fixed-header #top-menu > li.button > a {
  display: inline-block;
  padding: 0.3em 1em !important;
  border: 2px solid var(--color-accent);
  border-radius: 100px;
  color: var(--color-accent) !important;
  line-height: normal;
  box-sizing: border-box;
  transition: background-color 0.2s, color 0.2s;
}

#main-header #top-menu > li.button > a:hover,
#main-header #top-menu > li.button > a:focus,
#main-header.et-fixed-header #top-menu > li.button > a:hover,
#main-header.et-fixed-header #top-menu > li.button > a:focus {
  background-color: var(--color-accent);
  color: var(--color-heading-light) !important;
  opacity: 1;
}

/* Mobile/hamburger menu items are full-width rows — keep them plain text. */
#main-header .et_mobile_menu li.button > a {
  display: block;
  padding: 12px 24px !important;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0;
  background-color: transparent;
}


/* ==========================================================================
   HEADER MOBILE (HAMBURGER) MENU
   Divi indents each sub level three times over: 10px on the ul, 5% on the
   li and another 5% on the link, so sub pages sat a long way in. The global
   "Body / Paragraph" rule also gives every li 15px padding-bottom, which made
   the row spacing uneven. Here all spacing lives on the link: a fixed 24px
   side gutter, with a 16px step per sub level.
   ========================================================================== */

#main-header .et_mobile_menu {
  padding: 8px 0;
}

#main-header .et_mobile_menu li,
#main-header .et_mobile_menu li li {
  padding: 0;
}

#main-header .et_mobile_menu li ul {
  padding: 0;
}

#main-header .et_mobile_menu li a {
  padding: 12px 24px;
  font-size: 16px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#main-header .et_mobile_menu > li:last-child > a {
  border-bottom: 0;
}

/* Parent items: keep Divi's bold label, drop its grey row fill. */
#main-header .et_mobile_menu .menu-item-has-children > a {
  background-color: transparent;
}

/* Sub pages: one 16px step in, slightly smaller text. */
#main-header .et_mobile_menu li li a {
  padding: 10px 24px 10px 40px;
  font-size: 15px;
}

#main-header .et_mobile_menu li li li a {
  padding-left: 56px;
}
/* ==========================================================================
   Tablet single-column layout — 768px–980px
   Force every row (content + footer, not header) to stack columns like
   mobile instead of keeping Divi's desktop/tablet column widths.
   Covers Divi 5 flex rows and legacy block rows.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 980px) {
  #page-container .et_flex_row:not(.et-l--header .et_flex_row) {
    flex-wrap: wrap !important;
  }

  #page-container .et_flex_row:not(.et-l--header .et_flex_row) > [class*="et_flex_column"],
  #page-container .et_pb_row:not(.et_flex_row):not(.et-l--header .et_pb_row) > .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    margin-right: 0 !important;
  }
}

/* Tablet: centre the footer "Like to learn more?" heading and call button
   once the row stacks (phone already centres via Divi settings) */
@media (min-width: 768px) and (max-width: 980px) {
  #page-container .et-l--footer .et_pb_text_0_tb_footer,
  #page-container .et-l--footer .et_pb_text_0_tb_footer .et_pb_text_inner,
  #page-container .et-l--footer .et_pb_button_0_tb_footer_wrapper {
    text-align: center !important;
    justify-content: center !important;
  }

  #page-container .et-l--footer .et_pb_button_0_tb_footer_wrapper .et_pb_button_0_tb_footer {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}