/* ============================================
   Elementor Free - Widget & Layout Overrides
   ============================================
   Proposal C: Bold & Dark
   ============================================ */

/* ------------------------------------------------------------------
 * Widget spacing
 * ----------------------------------------------------------------*/
.elementor-widget:not(:last-child) { margin-bottom: 1rem !important; }
.elementor-widget-heading:not(:last-child) { margin-bottom: .75rem !important; }
.elementor-widget-spacer { margin-bottom: 0 !important; }
.elementor-widget-heading + .elementor-widget-heading { margin-top: -2px !important; }
.elementor-widget-heading + .elementor-widget-divider { margin-top: -2px !important; }
.elementor-widget-divider + .elementor-widget-text-editor { margin-top: -2px !important; }

/* ------------------------------------------------------------------
 * Section background scoping classes
 *
 * The actual background COLOUR is set on each section via Elementor's
 * native settings (`background_background = 'classic'` +
 * `background_color = '#hex'`) so the editor's Style > Background
 * panel is the source of truth. These classes survive only as scoping
 * selectors for the cascading text-colour rules below -- e.g. headings
 * on a dark section default to white. The text rules avoid !important
 * (so the Elementor user can override per-widget colours via the
 * heading widget's own Style > Color control without fighting the
 * theme).
 *
 * Section padding/margin live in Elementor's native section settings
 * (settings.padding, settings.padding_tablet, settings.padding_mobile)
 * so the editor's Advanced > Padding panel is also the source of
 * truth. Helper classes for spacing -- `.st-section-pad`,
 * `.st-section-pad-top`, `.st-section-pad-bottom` -- have been retired
 * for the same reason. See docs/web-dev/lessons-html-mockup-to-elementor.md
 * in wordpress-orchestration.
 * ----------------------------------------------------------------*/
.st-bg-dark .elementor-widget-heading .elementor-heading-title { color: var(--wh); }
.st-bg-dark .elementor-widget-text-editor { color: rgba(255,255,255,.82); }

.st-bg-burgundy .elementor-widget-heading .elementor-heading-title { color: var(--wh); }
.st-bg-burgundy .elementor-widget-text-editor { color: rgba(255,255,255,.90); }

.st-bg-black .elementor-widget-heading .elementor-heading-title { color: var(--wh); }
.st-bg-black .elementor-widget-text-editor { color: rgba(255,255,255,.82); }

/* ------------------------------------------------------------------
 * Service cards -- Proposal C: gray bg, bottom burgundy accent on hover
 * ----------------------------------------------------------------*/
/* Card background, border-radius, and padding live in Elementor's
   native column settings (background_background + background_color
   + border_radius + padding) so the editor panels are the source of
   truth. CSS here only carries what Elementor doesn't expose:
   pseudo-element decorations, hover states, and the cascading widget
   layout rules. */
.st-svc.elementor-column > .elementor-widget-wrap {
  overflow: hidden;
  position: relative;
  transition: all .3s var(--ease);
}
.st-svc.elementor-column > .elementor-widget-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--burgundy);
  transform: scaleX(0);
  transition: transform .3s var(--ease);
}
.st-svc.elementor-column:hover > .elementor-widget-wrap {
  /* Hover state -- background swap is intentionally NOT in Elementor
     settings (Elementor doesn't expose :hover bg via the column Style
     panel). Keep this in CSS. */
  background: var(--wh) !important;
  box-shadow: 0 12px 44px rgba(0,0,0,.07);
  transform: translateY(-4px);
}
.st-svc.elementor-column > .elementor-widget-wrap:hover::after {
  transform: scaleX(1);
}
.st-svc .elementor-widget-image img {
  width: 100%;
  height: 170px;
  object-fit: cover;
}
.st-svc .elementor-widget-heading,
.st-svc .elementor-widget-text-editor,
.st-svc .elementor-widget-button {
  padding: 0 22px;
}
.st-svc.elementor-column { flex: 1 1 0 !important; min-width: 0; }

/* Section-header split layout (proposal-c style). Two columns:
     left  = label + heading + intro paragraph (left-aligned)
     right = single CTA button bottom-aligned with the heading
   Internal widget margins are pulled in tight so the heading group
   reads as one block; section bottom padding is 32px so the cards
   grid that follows sits close. */
.elementor-section.st-sec-header-split > .elementor-container {
  /* Bottom-align the columns so the right-side button lines up with
     the bottom edge of the heading text on the left. */
  align-items: flex-end !important;
}
.st-sec-header-split .elementor-widget:not(:last-child) {
  /* Tight stack inside the left column: label > heading > paragraph. */
  margin-bottom: 6px !important;
}
.st-sec-header-split .elementor-widget-text-editor {
  /* Small breathing space between heading and paragraph. */
  margin-top: 8px;
}
.st-sec-header-split .elementor-widget-button {
  text-align: right;
}
.st-sec-header-split > .elementor-container > .elementor-column:last-child {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  /* On mobile: stack the columns and let the button take full width. */
  .elementor-section.st-sec-header-split > .elementor-container {
    align-items: stretch !important;
  }
  .st-sec-header-split > .elementor-container > .elementor-column:last-child {
    justify-content: flex-start;
  }
  .st-sec-header-split .elementor-widget-button {
    text-align: left;
  }
}

/* 5-card services grid -- single section that wraps to 3+2 on desktop,
   2+2+1 on tablet, 1-up on mobile. Override Elementor's section-flex
   layout to CSS grid so any number of children flows uniformly. Lets us
   put 5 service cards in one section without the awkward 3-col + 2-col
   split that was there before. */
.elementor-section.st-svc-grid > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.elementor-section.st-svc-grid > .elementor-container > .elementor-column {
  width: auto !important;
  max-width: none !important;
}
@media (max-width: 1024px) {
  .elementor-section.st-svc-grid > .elementor-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .elementor-section.st-svc-grid > .elementor-container { grid-template-columns: 1fr; }
}

/* 4-card equipment grid -- the portable-toilet units row on home (Standard
   / White VIP / Accessible / Flush). Same CSS-grid pattern as services so
   gap + stacking are explicit and consistent. Elementor's `gap: extended`
   setting alone left visible drift between the 4 cards horizontally and
   nearly-no vertical breathing room when they wrap. */
.elementor-section.st-eq-grid > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.elementor-section.st-eq-grid > .elementor-container > .elementor-column {
  width: auto !important;
  max-width: none !important;
}
@media (max-width: 1024px) {
  /* Tablet: 2x2 grid. Vertical gap between rows uses the same 18px. */
  .elementor-section.st-eq-grid > .elementor-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* Mobile: single-column stack with 18px between each card. */
  .elementor-section.st-eq-grid > .elementor-container { grid-template-columns: 1fr; }
}

/* Service card arrow circle */
.st-svc-arrow {
  width: 32px;
  height: 32px;
  background: var(--wh);
  border: 1px solid var(--g200);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s;
  margin: 0 22px 22px;
}
.st-svc-arrow svg {
  width: 14px;
  height: 14px;
  color: var(--g500);
  transition: color .3s var(--ease);
}
.st-svc.elementor-column > .elementor-widget-wrap:hover .st-svc-arrow {
  background: var(--burgundy);
  border-color: var(--burgundy);
}
.st-svc.elementor-column > .elementor-widget-wrap:hover .st-svc-arrow svg { color: var(--wh); }

/* ------------------------------------------------------------------
 * Why-Us split -- Proposal C: charcoal left, photo right
 * ----------------------------------------------------------------*/
.st-why-left.elementor-column > .elementor-widget-wrap {
  background: var(--charcoal);
  padding: clamp(36px, 5vw, 64px) !important;
  color: var(--wh);
}
.st-why-left .elementor-widget-heading .elementor-heading-title { color: var(--wh) !important; }
.st-why-left .elementor-widget-text-editor { color: rgba(255,255,255,.82) !important; }

.st-why-right.elementor-column > .elementor-widget-wrap { overflow: hidden; }
.st-why-right .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 400px;
}

/* Why-Us list items */
.st-why-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255,255,255,.04);
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 10px;
}
.st-why-item-icon {
  width: 32px;
  height: 32px;
  background: var(--burgundy);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.st-why-item-icon svg { width: 16px; height: 16px; color: var(--wh); }
.st-why-item span { font-weight: 600; font-size: .85rem; color: rgba(255,255,255,.85); }

/* ------------------------------------------------------------------
 * Counter/stats section
 * ----------------------------------------------------------------*/
.st-stats-section .elementor-column {
  border-right: 1px solid var(--g100);
  text-align: center;
  padding: 2rem 1rem;
}
.st-stats-section .elementor-column:last-child { border-right: none; }
.elementor-widget-counter .elementor-counter-number-wrapper {
  font-family: var(--ff);
  color: var(--charcoal);
  font-size: 3rem;
  font-weight: 800;
}
.elementor-widget-counter .elementor-counter-title {
  font-family: var(--ff);
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: 1px;
  color: var(--g500);
  margin-top: .5rem;
}

/* ------------------------------------------------------------------
 * Button widget
 * ----------------------------------------------------------------*/
.elementor-widget-button .elementor-button,
.elementor-button,
a.elementor-button,
a.elementor-button-link,
.wp-block-button__link,
.btn {
  border-radius: var(--r) !important; /* 12px Proposal C */
  font-family: var(--ff);
  font-weight: 700;
  transition: all .3s var(--ease);
}
.elementor-widget-button .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* ------------------------------------------------------------------
 * Hero HTML widget styles (avoid inline styles -- Elementor strips them)
 * ----------------------------------------------------------------*/
.hero h1.hero-h1 {
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 18px;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.hero h1.hero-h1 .acc { color: var(--burgundy); }

/* Hero buttons override the global .btn radius -- 12px not 50px in C */
.hero .btn { border-radius: var(--r) !important; }

/* ------------------------------------------------------------------
 * CTA card -- Proposal C: burgundy card with rounded corners
 * ----------------------------------------------------------------*/
.st-cta-card {
  background: var(--burgundy);
  border-radius: var(--r-lg);
  padding: clamp(44px, 6vw, 72px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.st-cta-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
}
.st-cta-card h2 {
  color: var(--wh) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  margin-bottom: 10px;
  position: relative;
}
.st-cta-card p {
  color: rgba(255,255,255,.88);
  font-size: 1.05rem;
  max-width: 460px;
  margin: 0 auto 24px;
  position: relative;
}
.st-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}
.st-cta-card .btn { border-radius: var(--r) !important; }

/* ------------------------------------------------------------------
 * Contact info cards (3 cards: phone, address, hours)
 * ----------------------------------------------------------------*/
.st-contact-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}
.st-contact-info-card {
  background: var(--g50);
  padding: 24px;
  border-radius: var(--r-lg);
  text-align: center;
}
.st-contact-info-card strong {
  display: block;
  font-size: 13px;
  color: var(--g500);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.st-contact-info-card a,
.st-contact-info-card span {
  font-size: 1rem;
  font-weight: 700;
  color: var(--charcoal);
}
.st-contact-info-card a:hover { color: var(--burgundy); }

/* ------------------------------------------------------------------
 * Area section -- Proposal C: charcoal bg, pill tags
 * ----------------------------------------------------------------*/
/* Area-pills supports BOTH HTML structures so the client can edit it as
   a plain bulleted list inside Elementor's text-editor widget OR keep the
   legacy <span class="st-area-pill"> markup. Adding/removing a town in
   the rich-text editor produces a fresh <li> which is styled the same as
   any existing pill. */
.st-area-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.st-area-pills li,
.st-area-pill {
  /* Mockup .area-pill (lines 621-626): padding 8px 14px, color rgba(255,255,255,.72). */
  display: inline-block;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  padding: 8px 14px;
  border-radius: 50px;
  font-size: .82rem;
  color: rgba(255,255,255,.72);
  list-style: none;
  transition: background .2s, color .2s, border-color .2s;
}
.st-area-pills li:hover,
.st-area-pill:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--wh);
  border-color: rgba(255, 255, 255, .18);
}

/* Service-area Google Maps iframe -- subtle desaturated treatment so it
   doesn't fight with the dark photo-and-burgundy palette around it. */
.st-area-map {
  background: rgba(255, 255, 255, .04);
  border-radius: var(--r-lg);
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
}
.st-area-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(.5) contrast(1.05) brightness(.92);
}

/* ------------------------------------------------------------------
 * Reviews section
 *
 * Two flavours:
 *   - .st-reviews-big -- the big "4.9 + 5 stars + Google Reviews"
 *     headline pair shown above the testimonials cards.
 *   - .st-rev / .st-rev-stars / .st-rev-author -- one card per
 *     testimonial. Sits in a 3-col grid below the headline.
 *
 * The svg width/height rules are critical: SVGs without explicit
 * sizing AND without a CSS rule render at the browser default
 * (300x150) -- five of them in a row blow the layout out. Width/
 * height on the <svg> tag itself is also added in convert-native.php
 * as defence-in-depth so the size is correct even before this CSS
 * has loaded.
 * ----------------------------------------------------------------*/

/* Big "4.9 + stars + Google Reviews" headline.
   Mockup: centered above the testimonial cards. inline-flex inside a
   regular <div> won't auto-center, so use flex + justify-content + a
   wrapping width:fit-content so the box hugs its contents and centers
   in the parent. */
.st-reviews-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 16px;
  width: fit-content;
}
.st-reviews-big-num {
  font-size: 3rem;
  font-weight: 800;
  color: var(--charcoal);
  line-height: 1;
  font-family: var(--ff);
}
.st-reviews-big-detail { text-align: left; }
.st-reviews-big-stars { display: flex; gap: 2px; margin-bottom: 4px; }
.st-reviews-big-stars svg {
  /* Mockup line 571: width: 20px; height: 20px on the big 4.9 badge stars. */
  width: 20px;
  height: 20px;
  color: var(--gold);
  fill: var(--gold);
}
.st-reviews-big-label {
  font-size: .78rem;
  color: var(--g500);
  font-weight: 500;
}

/* 3-card testimonials grid -- the section that holds the .st-rev cards.
   Same CSS-grid pattern as .st-svc-grid / .st-eq-grid so cards have an
   explicit horizontal gap (Elementor's `gap: extended` was getting
   squashed because each .st-rev column fills its own width with the
   white card background). */
.elementor-section.st-rev-grid > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.elementor-section.st-rev-grid > .elementor-container > .elementor-column {
  width: auto !important;
  max-width: none !important;
}
@media (max-width: 1024px) {
  .elementor-section.st-rev-grid > .elementor-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .elementor-section.st-rev-grid > .elementor-container { grid-template-columns: 1fr; }
}

/* Per-card testimonial -- background, padding (22px), and border-radius
   (18px) live in the column's Elementor settings so the editor panels
   reflect them. No CSS rule for those properties here. */
.st-rev-stars { display: flex; gap: 2px; margin-bottom: 12px; }
.st-rev-stars svg {
  width: 15px;
  height: 15px;
  color: var(--gold);
  fill: var(--gold);
}
.st-rev blockquote {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--g700);
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  font-style: normal;
}
.st-rev-author { display: flex; align-items: center; gap: 10px; }
.st-rev-av {
  width: 36px;
  height: 36px;
  background: var(--burgundy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .78rem;
  color: var(--wh);
  flex-shrink: 0;
}
.st-rev-name strong { display: block; font-size: .85rem; color: var(--charcoal); }
.st-rev-name span { font-size: .75rem; color: var(--g500); }

/* ------------------------------------------------------------------
 * Split image columns
 * ----------------------------------------------------------------*/
.st-split-img .elementor-widget-image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--r-lg);
}

/* ------------------------------------------------------------------
 * Detail list (benefits / checklist pattern)
 * ----------------------------------------------------------------*/
.st-detail-list {
  list-style: none;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
}
.st-detail-list li {
  margin-bottom: .75rem;
  padding-left: 1.5rem;
  position: relative;
}
.st-detail-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  background: var(--burgundy);
  border-radius: 50%;
}

/* ------------------------------------------------------------------
 * Portable unit cards
 * ----------------------------------------------------------------*/
.st-card.elementor-column > .elementor-widget-wrap {
  background: var(--wh);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  overflow: hidden;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.st-card.elementor-column > .elementor-widget-wrap:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  transform: translateY(-4px);
}
/* Square image cells -- portable-toilet images vary wildly in natural
   aspect ratio (460x567 portrait, 940x364 landscape, 284x315 near-square,
   214x317 tall portrait). Forcing cover into a wide-landscape box cropped
   them to thin horizontal slices. Square + contain shows the full toilet
   in every card with consistent product-card heights. The light gray
   background fills the contain whitespace. */
.st-card .elementor-widget-image {
  background: #f5f5f5;
}
.st-card .elementor-widget-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
}
.st-card .elementor-widget-heading,
.st-card .elementor-widget-text-editor,
.st-card .elementor-widget-button {
  padding: 0 1.25rem;
}
.st-card.elementor-column { flex: 1 1 0 !important; min-width: 0; }

/* ------------------------------------------------------------------
 * Equipment grid (portable rental units)
 * ----------------------------------------------------------------*/
/* Card background, border-radius live in column Elementor settings.
   CSS keeps overflow + hover state. */
.st-eq.elementor-column > .elementor-widget-wrap {
  overflow: hidden;
  transition: all .3s var(--ease);
}
.st-eq.elementor-column:hover > .elementor-widget-wrap {
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
  transform: translateY(-3px);
}
.st-eq .elementor-widget-image img {
  /* Reduced from 200px to 160px -- shrinks the equipment card's overall
     vertical footprint so 4-up doesn't dominate the viewport. */
  width: 100%;
  height: 160px;
  object-fit: cover;
}

/* ------------------------------------------------------------------
 * Responsive
 * ----------------------------------------------------------------*/
/* ============================================
   Native widget styling for Hero, CTA, Contact
   ============================================
   These rules style native Elementor widgets so
   they look identical to the previous HTML widget
   versions, while remaining click-to-edit in the
   visual editor.
   ============================================ */

/* ---- HERO native widgets ---- */

/* Pill badge -- a span heading widget rendered as frosted glass pill */
.elementor-widget-heading.hero-pill .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  color: rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.elementor-widget-heading.hero-pill { margin-bottom: 28px !important; }

/* H1 heading */
.elementor-widget-heading.hero-h1 .elementor-heading-title {
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2.5rem, 6vw, 4rem) !important;
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.elementor-widget-heading.hero-h1 .elementor-heading-title .acc { color: var(--burgundy); }

/* Description paragraph */
.elementor-widget-text-editor.hero-desc {
  max-width: 560px;
  margin-bottom: 36px !important;
}
.elementor-widget-text-editor.hero-desc p {
  font-size: 1.15rem !important;
  color: rgba(255,255,255,.88) !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.4);
}

/* Hero buttons inner section -- left-align on desktop */
.elementor-section.hero-btns-inner {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
.elementor-section.hero-btns-inner > .elementor-container {
  max-width: none !important;
  justify-content: flex-start;
}
.elementor-section.hero-btns-inner .elementor-column { padding: 0 6px 0 0 !important; }
.elementor-section.hero-btns-inner .elementor-column:last-child { padding-right: 0 !important; padding-left: 6px !important; }

/* Hero trust badges inner section */
.elementor-section.hero-trust-inner {
  margin-top: 0 !important;
  padding-top: 32px !important;
  border-top: 1px solid rgba(255,255,255,.18);
}
.elementor-section.hero-trust-inner > .elementor-container {
  max-width: none !important;
}

/* Trust badge icon-box widgets */
.elementor-widget-icon-box.hero-trust-box .elementor-icon-box-wrapper {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 12px;
}
.elementor-widget-icon-box.hero-trust-box .elementor-icon-box-icon {
  margin: 0 !important;
  flex-shrink: 0;
}
.elementor-widget-icon-box.hero-trust-box .elementor-icon {
  background: rgba(141,24,38,.18) !important;
  border: 1px solid rgba(141,24,38,.35) !important;
  border-radius: 10px !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.elementor-widget-icon-box.hero-trust-box .elementor-icon i,
.elementor-widget-icon-box.hero-trust-box .elementor-icon svg {
  color: #e85060 !important;
  fill: #e85060 !important;
  font-size: 18px !important;
}
.elementor-widget-icon-box.hero-trust-box .elementor-icon-box-content { text-align: left; }
.elementor-widget-icon-box.hero-trust-box .elementor-icon-box-title {
  margin-bottom: 2px !important;
}
.elementor-widget-icon-box.hero-trust-box .elementor-icon-box-title a,
.elementor-widget-icon-box.hero-trust-box .elementor-icon-box-title {
  color: #fff !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
}
.elementor-widget-icon-box.hero-trust-box .elementor-icon-box-description {
  color: rgba(255,255,255,.82) !important;
  font-size: .78rem !important;
  line-height: 1.35;
  margin: 0 !important;
}

/* ------------------------------------------------------------------
 * Trust strip -- pulled out of the hero now that the hero is a
 * 3-image slider. Sits as its own section directly below the slider.
 * Light bg, dark text, even spacing, stacks 1-up on mobile.
 * ----------------------------------------------------------------*/
/* Trust strip -- charcoal band directly below the hero, with burgundy-
   tinted icon boxes and white text. The hero's bottom-fade fades to
   charcoal so this strip continues that colour seamlessly. */
.elementor-section.st-trust-strip {
  background: var(--charcoal);
}
.elementor-section.st-trust-strip > .elementor-container {
  max-width: 1140px;
}
/* Flip icon-box widget colours when inside the charcoal trust strip:
   icon stays burgundy-ish but on a tinted burgundy bg, title white,
   description light-grey. Overrides the dark-text defaults that
   st_icon_box() sets in convert-native.php. */
.st-trust-strip .elementor-widget-icon-box .elementor-icon-box-title {
  color: var(--wh) !important;
}
.st-trust-strip .elementor-widget-icon-box .elementor-icon-box-title a {
  color: var(--wh) !important;
}
.st-trust-strip .elementor-widget-icon-box .elementor-icon-box-description {
  color: rgba(255, 255, 255, .6) !important;
}
.st-trust-strip .elementor-widget-icon-box .elementor-icon {
  background: rgba(141, 24, 38, .18) !important;
  border: 1px solid rgba(141, 24, 38, .4) !important;
  border-radius: 12px !important;
  width: 48px !important;
  height: 48px !important;
}
.st-trust-strip .elementor-widget-icon-box .elementor-icon i,
.st-trust-strip .elementor-widget-icon-box .elementor-icon svg {
  color: #e85060 !important;
  fill: #e85060 !important;
}
.st-trust-col.elementor-column { flex: 1 1 0 !important; min-width: 0; }
.elementor-widget-icon-box.st-trust-box .elementor-icon-box-wrapper {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 14px;
  padding: 0 16px;
}
.elementor-widget-icon-box.st-trust-box .elementor-icon-box-icon {
  margin: 0 !important;
  flex-shrink: 0;
}
/* Mockup .trust-icon (lines 407-415): 48x48 burgundy-tinted square,
   12px radius, lighter brick-red icon (#e85060). The earlier 44/8/.10
   values made the badge nearly invisible against the charcoal band. */
.elementor-widget-icon-box.st-trust-box .elementor-icon {
  background: rgba(141, 24, 38, .18) !important;
  border: 1px solid rgba(141, 24, 38, .4) !important;
  border-radius: 12px !important;
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.elementor-widget-icon-box.st-trust-box .elementor-icon i,
.elementor-widget-icon-box.st-trust-box .elementor-icon svg {
  color: #e85060 !important;
  fill: #e85060 !important;
  font-size: 22px !important;
}
.elementor-widget-icon-box.st-trust-box .elementor-icon-box-content { text-align: left; }
.elementor-widget-icon-box.st-trust-box .elementor-icon-box-title {
  margin-bottom: 2px !important;
}
/* Trust strip title -- WHITE on the charcoal band (was charcoal on white).
   Also overrides the per-page Elementor CSS that sets color from the
   widget's title_color setting. */
.elementor-widget-icon-box.st-trust-box .elementor-icon-box-title a,
.elementor-widget-icon-box.st-trust-box .elementor-icon-box-title {
  color: var(--wh) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
}
/* Trust strip description -- light grey on charcoal band. */
.elementor-widget-icon-box.st-trust-box .elementor-icon-box-description {
  color: rgba(255, 255, 255, .6) !important;
  font-size: .82rem !important;
  line-height: 1.35;
  margin: 0 !important;
}

/* Hero column padding to push content right and constrain max-width */
.elementor-section.hero .hero-content-col {
  max-width: 760px;
}
.elementor-section.hero {
  position: relative;
}
/* Pseudo-elements need to be on the section element when hero is now a section */
.elementor-section.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(8,8,10,.94) 0%, rgba(14,14,14,.82) 38%, rgba(14,14,14,.55) 70%, rgba(141,24,38,.35) 100%);
  z-index: 1;
}
.elementor-section.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}
.elementor-section.hero > .elementor-container {
  position: relative;
  z-index: 4;
}
.elementor-section.hero.hero-home { min-height: 80vh; }

/* ---- Subpage hero (compact variant) ----
 * Used by every non-home page. Same dark photo + gradient + noise
 * treatment as the home hero, but shorter and centered text.
 */
.elementor-section.hero.hero-page {
  min-height: 56vh;
}
.elementor-section.hero.hero-page .hero-page-col {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.elementor-section.hero.hero-page .hero-pill {
  display: inline-block;
  padding: 7px 14px;
  margin: 0 auto 18px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.elementor-section.hero.hero-page h1.hero-h1,
.elementor-section.hero.hero-page .hero-h1 .elementor-heading-title {
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.4rem) !important;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 auto 18px;
  text-align: center;
}
.elementor-section.hero.hero-page .hero-desc,
.elementor-section.hero.hero-page .hero-desc p {
  color: rgba(255,255,255,.88) !important;
  font-size: 1.1rem;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.55;
}

/* ---- Section padding consistency ----
 * Every body section between hero and footer gets the same vertical
 * rhythm and the same horizontal container so headings, labels, and
 * body copy line up across pages.
 */
.elementor .elementor-section.elementor-section-boxed > .elementor-container,
.elementor .elementor-section:not(.hero):not([class*="hero-"]) > .elementor-container {
  max-width: 1200px;
  padding-left: 32px;
  padding-right: 32px;
}
.elementor .elementor-section:not(.hero):not(.elementor-inner-section):not([class*="hero-"]):not(.st-cta-btns-inner):not(.hero-btns-inner):not(.hero-trust-inner):not(.st-home-hero) {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(48px, 6vw, 88px);
}

/* Home hero slider must be full-bleed -- override Elementor's default
   column / container / widget paddings so the slider fills edge-to-edge. */
.elementor-section.st-home-hero,
.elementor-section.st-home-hero > .elementor-container,
.elementor-section.st-home-hero .elementor-column > .elementor-element-populated,
.elementor-section.st-home-hero .elementor-widget-wrap,
.elementor-section.st-home-hero .elementor-widget-theme_hero_slider,
.elementor-section.st-home-hero .elementor-widget-theme_hero_slider .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-section.st-home-hero > .elementor-container {
  max-width: none !important;
  width: 100% !important;
}
@media (max-width: 768px) {
  .elementor .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor .elementor-section:not(.hero):not([class*="hero-"]) > .elementor-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---- Why-Us card (replaces old full-bleed Why-Us section) ----
 * Now a boxed dark card sitting inside the standard container so
 * its left edge aligns with every other section on the page.
 */
.elementor-section.st-why-card-section > .elementor-container {
  background: #1a1a1a;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 0 !important;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  /* Subtle drop shadow lifts the card off the page background, matching
     the mockup's elevated rounded-card treatment. */
  box-shadow: 0 24px 64px rgba(0, 0, 0, .06);
}
.elementor-section.st-why-card-section .st-why-card-col {
  padding: clamp(36px, 5vw, 64px) !important;
}
.elementor-section.st-why-card-section .st-why-card-col + .st-why-card-col {
  padding: 0 !important;
}
.elementor-section.st-why-card-section .st-why-card-col + .st-why-card-col .elementor-widget-image {
  height: 100%;
}
.elementor-section.st-why-card-section .st-why-card-col + .st-why-card-col img {
  width: 100%;
  height: 100%;
  min-height: 400px;   /* was 360px -- 400px matches the mockup */
  object-fit: cover;
  display: block;
}
/* Dark card bg: force label + heading + paragraph light for readability. */
.elementor-section.st-why-card-section .st-why-card-col .elementor-widget-heading .elementor-heading-title {
  color: var(--wh) !important;
}
.elementor-section.st-why-card-section .st-why-card-col .elementor-widget-text-editor,
.elementor-section.st-why-card-section .st-why-card-col .elementor-widget-text-editor p {
  color: rgba(255,255,255,.85) !important;
}

/* ---- WHY-US icon-list ---- */
.elementor-widget-icon-list.st-why-iconlist .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.elementor-widget-icon-list.st-why-iconlist .elementor-icon-list-item {
  background: rgba(255,255,255,.04);
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.06);
  padding: 12px 16px !important;
  margin: 0 !important;
}
.elementor-widget-icon-list.st-why-iconlist .elementor-icon-list-icon {
  width: 32px;
  height: 32px;
  background: var(--burgundy);
  border-radius: 8px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 12px;
}
.elementor-widget-icon-list.st-why-iconlist .elementor-icon-list-icon i,
.elementor-widget-icon-list.st-why-iconlist .elementor-icon-list-icon svg {
  color: #fff !important;
  fill: #fff !important;
  font-size: 14px !important;
}
.elementor-widget-icon-list.st-why-iconlist .elementor-icon-list-text {
  color: rgba(255,255,255,.85) !important;
  font-weight: 600 !important;
  font-size: .85rem !important;
}

/* ---- CTA card (native) ----
 * Burgundy bg, rounded corners, and the generous internal padding all
 * live in the column's Elementor settings (per breakpoint). CSS only
 * carries position+overflow so the pseudo-element circles below clip
 * to the card. */
.elementor-column.st-cta-card-col > .elementor-widget-wrap {
  position: relative;
  overflow: hidden;
}
.elementor-column.st-cta-card-col > .elementor-widget-wrap::before {
  /* Mockup .cta-card::before: 320x320 top-right. */
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 320px;
  height: 320px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
}
/* Second decorative circle on the CTA card -- bottom-left, slightly
   smaller and dimmer. Matches the mockup's twin-circle decoration. */
.elementor-column.st-cta-card-col > .elementor-widget-wrap::after {
  content: '';
  position: absolute;
  bottom: -45%;
  left: -8%;
  width: 280px;
  height: 280px;
  background: rgba(255, 255, 255, .03);
  border-radius: 50%;
  pointer-events: none;
}
.elementor-column.st-cta-card-col .elementor-widget {
  position: relative;
  z-index: 1;
}
.elementor-widget-heading.st-cta-heading .elementor-heading-title {
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.875rem, 4vw, 2.75rem) !important;
}
.elementor-widget-text-editor.st-cta-text {
  text-align: center;
}
.elementor-widget-text-editor.st-cta-text p {
  color: rgba(255,255,255,.88) !important;
  font-size: 1.05rem !important;
  max-width: 460px;
  margin: 0 auto !important;
}

/* CTA buttons inner section -- center the buttons */
.elementor-section.st-cta-btns-inner {
  margin: 0 !important;
  padding: 0 !important;
}
.elementor-section.st-cta-btns-inner > .elementor-container {
  max-width: none !important;
  justify-content: center;
  gap: 12px;
}
.elementor-section.st-cta-btns-inner .elementor-column { padding: 0 6px !important; }

/* ---- CONTACT info icon-boxes ----
 * Force CSS-grid on the container so the 3 cards have an explicit
 * 18px gap. Elementor's `gap: wider` setting alone leaves the cards
 * visually touching once the .st-contact-card-col widget-wrap fills
 * its column with the .st-bg-gray panel.
 */
.elementor-section.st-contact-cards-row > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.elementor-section.st-contact-cards-row > .elementor-container > .elementor-column {
  width: auto !important;
  max-width: none !important;
}
@media (max-width: 768px) {
  /* Stack to a single column with the same vertical breathing room. */
  .elementor-section.st-contact-cards-row > .elementor-container {
    grid-template-columns: 1fr;
  }
}

/* Background, padding, border-radius live in the column's Elementor
   settings dict so the editor panels reflect them. CSS only carries
   text-align, which Elementor exposes per-widget rather than per-column. */
.elementor-column.st-contact-card-col > .elementor-widget-wrap {
  text-align: center;
}
.elementor-widget-icon-box.st-contact-icon-box .elementor-icon {
  background: var(--burgundy) !important;
  color: #fff !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 12px !important;
}
.elementor-widget-icon-box.st-contact-icon-box .elementor-icon i,
.elementor-widget-icon-box.st-contact-icon-box .elementor-icon svg {
  color: #fff !important;
  fill: #fff !important;
  font-size: 18px !important;
}
.elementor-widget-icon-box.st-contact-icon-box .elementor-icon-box-title {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--g500) !important;
  margin-bottom: 4px !important;
}
.elementor-widget-icon-box.st-contact-icon-box .elementor-icon-box-description {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--charcoal) !important;
}
.elementor-widget-icon-box.st-contact-icon-box .elementor-icon-box-description a {
  color: var(--charcoal) !important;
}
.elementor-widget-icon-box.st-contact-icon-box .elementor-icon-box-description a:hover {
  color: var(--burgundy) !important;
}

/* ---- Mobile responsive for native widgets ---- */
@media (max-width: 768px) {
  /* Stack the 3-col service grid to a single column on tablet.
     Overrides the desktop `flex: 1 1 0 !important` equal-width hack
     so Elementor's natural row wrapping can take over. */
  .st-svc.elementor-column {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  .st-svc .elementor-widget-image img { height: 150px; }
  .st-split-img .elementor-widget-image img { height: 280px; border-radius: var(--r); }
  .st-stats-section .elementor-column {
    border-right: none;
    border-bottom: 1px solid var(--g100);
  }
  .st-stats-section .elementor-column:last-child { border-bottom: none; }
  .st-detail-list { columns: 1; }
  .st-why-right .elementor-widget-image img { min-height: 280px; }

  /* Hero buttons stack on mobile */
  .elementor-section.hero-btns-inner > .elementor-container {
    flex-direction: column;
  }
  .elementor-section.hero-btns-inner .elementor-column {
    padding: 6px 0 !important;
    width: 100% !important;
  }
  .elementor-section.hero-btns-inner .elementor-button {
    width: 100%;
    justify-content: center;
  }

  /* Hero trust badges stack 2-up on mobile */
  .elementor-section.hero-trust-inner > .elementor-container {
    flex-wrap: wrap;
  }
  .elementor-section.hero-trust-inner .elementor-column {
    width: 50% !important;
    padding: 8px !important;
  }

  /* CTA buttons stack on mobile */
  .elementor-section.st-cta-btns-inner > .elementor-container {
    flex-direction: column;
    align-items: center;
  }
}

/* The 2-col rental-unit cards keep 2 columns down to 640px so the
   tablet view doesn't blow each card up to ~668px wide (which makes
   the square images uncomfortably large). Only stack at narrow phone
   widths. Distinct breakpoint from .st-svc which stacks at 768px. */
@media (max-width: 640px) {
  .st-card.elementor-column {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}

/* ------------------------------------------------------------------
 * Horizontal whitespace between adjacent "card" columns
 *
 * Elementor's `gap: wider` setting puts padding INSIDE the column wrap
 * (interior padding around the heading/text). It does NOT create
 * visible whitespace between adjacent cards when the cards have a
 * background/shadow/border applied to the wrap.
 *
 * Combined with our `.st-{card,svc,fcard,trust-col}.elementor-column
 * { flex: 1 1 0 !important }` rules (needed for equal column widths),
 * the wrap edges butt directly against the next column's wrap edge --
 * cards visually touch, looking like one merged block.
 *
 * Adding margin to the wrap creates the gap. Scoped per-pattern to
 * the breakpoint where each multi-column layout actually shows
 * (st-card stacks at 640px, st-svc/st-fcard at 768px). Below those
 * breakpoints the cards are single-column and need zero margin.
 * ----------------------------------------------------------------*/
@media (min-width: 641px) {
  .st-card.elementor-column > .elementor-widget-wrap,
  .st-card.elementor-column > .elementor-element-populated {
    margin-left: 14px;
    margin-right: 14px;
  }
}
@media (min-width: 769px) {
  .st-svc.elementor-column > .elementor-widget-wrap,
  .st-svc.elementor-column > .elementor-element-populated,
  .st-fcard.elementor-column > .elementor-widget-wrap,
  .st-fcard.elementor-column > .elementor-element-populated {
    margin-left: 14px;
    margin-right: 14px;
  }
}
/* Trust-strip uses the same pattern but its icon-boxes are horizontal
   (icon left, text right) so a smaller gap is fine -- 8px each side. */
@media (min-width: 641px) {
  .st-trust-col.elementor-column > .elementor-widget-wrap,
  .st-trust-col.elementor-column > .elementor-element-populated {
    margin-left: 8px;
    margin-right: 8px;
  }
}

/* Trust strip stacks at narrow phone widths where 3-up gets cramped */
@media (max-width: 640px) {
  .st-trust-col.elementor-column {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  .elementor-section.st-trust-strip > .elementor-container {
    flex-wrap: wrap;
  }
  .elementor-widget-icon-box.st-trust-box .elementor-icon-box-wrapper {
    justify-content: center;
    padding: 6px 16px;
  }
}

/* ==================================================================
 * Eyebrow label (.st-label) -- the small uppercase tag above each
 * section heading. Matches the mockup's <p class="tag"><span
 * class="tag-dot"></span>OUR SERVICES</p> pattern via a ::before
 * pseudo-element so we keep the native heading widget editable in
 * Elementor (no raw HTML widget needed). The widget is still a
 * heading widget (header_size: span) -- this rule just adds a
 * burgundy dot before the text.
 * ================================================================ */
.elementor-widget-heading.st-label .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.elementor-widget-heading.st-label .elementor-heading-title::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--burgundy);
  border-radius: 50%;
  flex-shrink: 0;
}
/* Inside dark sections (charcoal/burgundy bg), the eyebrow text
   should still be burgundy. The dot stays burgundy too. .st-bg-dark
   has a generic rule that turns headings white -- override the
   .st-label one to keep its colour. */
.st-bg-dark .elementor-widget-heading.st-label .elementor-heading-title,
.st-why-left .elementor-widget-heading.st-label .elementor-heading-title {
  color: var(--burgundy) !important;
}

/* ==================================================================
 * Card-internal widget spacing -- override Elementor's default 1rem
 * margin-bottom on widgets inside .st-svc and .st-eq cards. The card
 * body is supposed to be tight (image -> heading -> text -> arrow);
 * default Elementor spacing makes it sloppy.
 * ================================================================ */
.st-svc .elementor-widget:not(:last-child),
.st-eq .elementor-widget:not(:last-child) {
  margin-bottom: 0 !important;
}
/* Keep a small 8px gap between heading and description inside cards
   for readability; image already has 16px spacer below it. */
.st-svc .elementor-widget-text-editor,
.st-eq .elementor-widget-text-editor {
  margin-top: 4px !important;
}

/* ==================================================================
 * Contact info cards (.st-ci) -- inline HTML widget bodies emitted
 * from convert-native.php's CONTACT-on-home block. Styles the icon
 * box + label + value structure to match the mockup's .ci pattern.
 * ================================================================ */
.st-ci {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  background: var(--g50);
  border-radius: var(--r);
  margin-bottom: 10px;
}
.st-ci-icon {
  width: 44px;
  height: 44px;
  background: var(--g100);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.st-ci-icon svg {
  width: 20px;
  height: 20px;
  color: var(--burgundy);
}
.st-ci-text strong {
  display: block;
  font-size: .75rem;
  color: var(--g500);
  margin-bottom: 1px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.st-ci-text a,
.st-ci-text span {
  font-size: .92rem;
  font-weight: 600;
  color: var(--charcoal);
}
.st-ci-text a:hover { color: var(--burgundy); }