/* ===== HERO META STRIP (bottom) =====
   Apply class "hero-meta" to a container at the bottom of hero. */
.hero-meta{
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(6px);
  border-top: 3px solid var(--bf-red);
}
.hero-meta-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 24px !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  color: var(--bf-white);
}
.hero-meta-item{
  display: flex !important;
  align-items: center;
  gap: 12px;
  font-family: var(--bf-font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bf-white);
}
.hero-meta-item strong{
  font-family: var(--bf-font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--bf-red);
}
.hero-meta-item span{
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255,255,255,0.85);
}
/* ============================================================
   BUTTON SYSTEM
   Apply classes "btn btn-red", "btn btn-black",
   "btn btn-outline-white", or "btn btn-outline-black" to any
   button widget or anchor.
   ============================================================ */
.btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 28px !important;
  font-family: var(--bf-font-condensed) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: 2px solid transparent !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  width: fit-content !important;
}
.btn .arrow{
  display: inline-block;
  transition: transform 0.2s;
}
.btn:hover .arrow{
  transform: translateX(4px);
}
/* Red button */
.btn-red{
  background: var(--bf-red) !important;
  color: var(--bf-white) !important;
  border-color: var(--bf-red) !important;
}
.btn-red:hover{
  background: var(--bf-red-dark) !important;
  border-color: var(--bf-red-dark) !important;
  color: var(--bf-white) !important;
}
/* ============================================================
   SECTION HEADER (reusable)
   Apply class "section-header" to a container, with child
   widgets having classes "section-eyebrow", and an h2.
   ============================================================ */
.section-header{
  text-align: center;
  margin-bottom: 56px;
}
.section-eyebrow{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--bf-font-condensed) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.25em !important;
  font-size: 13px !important;
  color: var(--bf-red) !important;
  margin-bottom: 14px !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.section-eyebrow::before, .section-eyebrow::after{
  content: '';
  width: 24px;
  height: 2px;
  background: var(--bf-red);
}
.section-header h2{
  font-family: var(--bf-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(36px, 5vw, 56px) !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: var(--bf-black) !important;
}
.section-header h2 em{
  font-style: normal;
  color: var(--bf-red);
}
.section-header p{
  max-width: 640px !important;
  margin: 18px auto 0 !important;
  color: #555 !important;
  font-size: 17px !important;
  font-family: var(--bf-font-body) !important;
}
.services-grid{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}
.service-card{
  border: 2px solid var(--bf-black) !important;
  background: var(--bf-white) !important;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s !important;
  cursor: pointer;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: 8px 8px 0 var(--bf-red);
}
.service-card-header{
  background: var(--bf-black) !important;
  color: var(--bf-white) !important;
  padding: 24px 20px 18px !important;
  position: relative;
}
.service-card.featured .service-card-header{
  background: var(--bf-red) !important;
}
.service-card.featured .service-card-header::after{
  content: 'NEW';
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--bf-white);
  color: var(--bf-red);
  font-family: var(--bf-font-condensed);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  padding: 3px 8px;
}
.service-card-icon{
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-card-icon svg{
  width: 100%;
  height: 100%;
}
.service-card-header h3, .service-card .service-card-header h3{
  font-family: var(--bf-font-display) !important;
  font-weight: 400 !important;
  font-size: 30px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--bf-white) !important;
  margin: 0 !important;
}
.service-card-body{
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service-card-body p{
  font-family: var(--bf-font-body) !important;
  font-size: 14.5px !important;
  color: #555 !important;
  margin-bottom: 16px !important;
  line-height: 1.5 !important;
  flex: 1;
}
.service-card-link{
  font-family: var(--bf-font-condensed) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 13px !important;
  color: var(--bf-red) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.service-card-link .arrow{
  transition: transform 0.2s;
}
.service-card:hover .service-card-link .arrow{
  transform: translateX(4px);
}
.rentals-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 56px !important;
  align-items: center !important;
  margin-bottom: 48px !important;
}
/* Rentals headline column */
.rentals-eyebrow{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--bf-red) !important;
  color: var(--bf-white) !important;
  padding: 6px 14px !important;
  font-family: var(--bf-font-condensed) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  font-size: 12px !important;
  margin-bottom: 20px !important;
  width: fit-content !important;
}
.rentals-eyebrow::before{
  content: '';
  width: 6px;
  height: 6px;
  background: var(--bf-white);
  border-radius: 50%;
}
.rentals .rentals-headline h2, .rentals-headline h2{
  font-family: var(--bf-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(44px, 6vw, 80px) !important;
  line-height: 0.95 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 20px !important;
  color: var(--bf-white) !important;
}
.rentals-headline h2 em{
  font-style: normal;
  color: var(--bf-red) !important;
  display: block;
}
.rentals .rentals-headline p, .rentals-headline p{
  font-family: var(--bf-font-body) !important;
  font-size: 18px !important;
  color: rgba(255,255,255,0.8) !important;
  line-height: 1.5 !important;
  margin-bottom: 28px !important;
}
/* Rental types list */
.rentals-types{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.rental-type{
  display: grid !important;
  grid-template-columns: 60px 1fr auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 18px 22px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  transition: all 0.25s !important;
}
.rental-type:hover{
  background: rgba(212, 33, 40, 0.1) !important;
  border-color: var(--bf-red) !important;
  transform: translateX(4px);
}
.rental-type-icon{
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bf-red);
}
.rental-type-icon svg{
  width: 100%;
  height: 100%;
}
.rental-type-name{
  font-family: var(--bf-font-display);
  font-weight: 400;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--bf-white);
}
.rental-type-desc{
  font-family: var(--bf-font-condensed);
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rental-type-tag{
  font-family: var(--bf-font-condensed);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
}
/* Duration ribbon */
.duration-ribbon{
  background: var(--bf-red) !important;
  margin: 48px 0 0 !important;
  padding: 28px 24px !important;
  position: relative;
  overflow: hidden;
}
.duration-ribbon::before, .duration-ribbon::after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 8px,
    rgba(0,0,0,0.15) 8px,
    rgba(0,0,0,0.15) 10px
  );
}
.duration-ribbon::before{
  left: 0;
}
.duration-ribbon::after{
  right: 0;
}
.duration-ribbon-inner{
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  position: relative;
  z-index: 2;
}
.duration-ribbon-label{
  font-family: var(--bf-font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 13px;
  color: var(--bf-white);
}
.duration-item{
  font-family: var(--bf-font-display);
  font-weight: 400;
  font-size: clamp(24px, 3.5vw, 38px);
  color: var(--bf-white);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 18px;
}
.duration-item:not(:last-child)::after{
  content: '';
  width: 8px;
  height: 8px;
  background: var(--bf-white);
  border-radius: 50%;
  margin-left: 18px;
}
.about-copy h2, .about .about-copy h2, .about h2{
  font-family: var(--bf-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 24px !important;
  color: var(--bf-black) !important;
}
.about-copy h2 em{
  font-style: normal;
  color: var(--bf-red);
}
.about-copy p, .about p{
  font-family: var(--bf-font-body) !important;
  font-size: 17px !important;
  color: #444 !important;
  line-height: 1.6 !important;
  margin-bottom: 18px !important;
}
.about-copy p strong{
  color: var(--bf-black);
}
.about-stats{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-top: 32px !important;
  padding-top: 32px !important;
  border-top: 2px solid var(--bf-black) !important;
}
.stat strong{
  display: block !important;
  font-family: var(--bf-font-display) !important;
  font-weight: 400 !important;
  font-size: 44px !important;
  line-height: 1 !important;
  color: var(--bf-red) !important;
  margin-bottom: 6px !important;
}
.stat span{
  font-family: var(--bf-font-condensed) !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--bf-gray-400) !important;
  font-weight: 600 !important;
}
.about-image{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.about-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-image::after{
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 140px;
  height: 140px;
  background: var(--bf-red);
  z-index: -1;
}
.categories-header{
  text-align: center;
  margin-bottom: 40px;
}
/* The source writes this heading as an h3; the template uses an h2 so the page
   keeps a sane heading order. Both are matched — keyed on h3 alone, the red
   accent on "Every Style." silently fell back to black italic. */
.categories-header h2, .categories h2,
.categories-header h3, .categories h3{
  font-family: var(--bf-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  color: var(--bf-black) !important;
}
.categories-header h2 em,
.categories-header h3 em{
  font-style: normal;
  color: var(--bf-red);
}
.categories-grid{
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
}
.category-card{
  background: var(--bf-white) !important;
  border: 2px solid var(--bf-black) !important;
  padding: 24px 20px !important;
  text-align: center !important;
  transition: all 0.25s !important;
  cursor: pointer;
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
}
.category-card:hover{
  background: var(--bf-black) !important;
  color: var(--bf-white) !important;
  transform: translateY(-4px);
}
.category-card:hover .category-card-icon{
  color: var(--bf-red);
}
.category-card-icon{
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  color: var(--bf-red);
  transition: color 0.25s;
}
.category-card-icon svg{
  width: 100%;
  height: 100%;
}
.category-card-name{
  font-family: var(--bf-font-display);
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}
.category-card-meta{
  font-family: var(--bf-font-condensed);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--bf-gray-400);
  margin-top: 6px;
}
.category-card:hover .category-card-meta{
  color: rgba(255,255,255,0.7);
}
.visit h2{
  font-family: var(--bf-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(36px, 5vw, 56px) !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  margin-bottom: 24px !important;
  color: var(--bf-white) !important;
}
/* Mobile */
@media (max-width: 640px){
  .elementor-element.hero h1 em::after {
    display: none;
  }

  .elementor-element.hero .e-con-inner {
    padding: 60px 20px;
  }

  .services-grid,
  .elementor-element.services-grid {
    grid-template-columns: 1fr !important;
  }

  .categories-grid,
  .elementor-element.categories-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .duration-item {
    font-size: 22px;
  }

  .duration-item:not(:last-child)::after {
    margin-left: 10px;
  }

  .about-stats,
  .elementor-element.about-stats {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .visit-info,
  .elementor-element.visit-info {
    padding: 48px 32px !important;
  }

  .hero-meta-item {
    flex-basis: 45%;
    justify-content: center;
  }

  .bf-terms__list li {
    padding: 12px 0 12px 32px;
    font-size: 0.95rem;
  }

  .bf-terms__list li::before {
    top: 15px;
    width: 16px;
    height: 16px;
    background-size: 10px 10px;
  }
}
/* ==========================================================================
   Home additions.
   The source painted the hero photo with background-image. House rule: a
   photograph ships as an <img> so it is indexable, carries alt text and can be
   found by the preload scanner. These rules make that <img> behave like a
   background. Measured from the source: min-height 60vh, 60px block padding.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 60vh;
  padding-block: 60px;
  background: var(--wp--preset--color--black);
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.25) 100%);
}

.hero__content { position: relative; z-index: 2; }

.hero h1 {
  margin: 14px 0 0;
  color: var(--wp--preset--color--white);
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.5rem);
}
.hero h1 em { font-style: normal; color: var(--wp--preset--color--red); }

.hero .section-eyebrow { color: var(--wp--preset--color--white); }

.hero__sub {
  max-width: 56ch;
  margin: 20px 0 32px;
  color: rgba(255,255,255,.78);
  font-size: 1.05rem;
}

/* --- The two promo flyers, side by side --- */

.bf-flyers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}
.bf-flyers__item { width: 100%; height: auto; }

@media (max-width: 48rem) {
  .bf-flyers { grid-template-columns: 1fr; gap: 20px; }
}

/* --- About row --- */

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;                 /* two ~550px columns, as the source */
  align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}

/* No `height: auto` here. The source sizes this photo with a 4/5 box and
   `object-fit: cover`; letting the image keep its own 4:3 height left it
   filling only the top 404px of a 673px box — and the red accent block, which
   is meant to sit hidden behind the photo, showed through the gap underneath.
   The source's own `overflow: hidden` is what keeps that block invisible. */

@media (max-width: 48rem) {
  .about { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTION SHELLS
   None of these existed in the source stylesheet — every home
   section's background, padding and inner width lived in
   Elementor container settings, so nothing survived the CSS
   capture. All values below are measured off production at
   1440px.
   ============================================================ */

.hero      { background: var(--wp--preset--color--black); padding-block: 80px; }
.hero-meta { background: rgba(10,10,10,.85); }

/* The source keeps the flyers and "What We Do" inside ONE padded section,
   so they share a single 80px envelope with a 20px gap between them. */
.bf-flyers { padding-block: 80px 0; }
.services  { padding-block: 20px 80px; }

.rentals    { background: #000; padding-block: 80px; }
.rentals h2, .rentals p, .rentals h3 { color: var(--wp--preset--color--white); }
.about      { padding-block: 80px; }
.categories { background: var(--wp--preset--color--gray-50); padding: 64px 24px; }

/* Hero type, measured: Anton 104/95.68 capped at 920px, a Barlow 19/28.5 sub
   at 640px, and a 59px button. Staging was running 72px and full width. */
.hero h1 {
  max-width: 920px;
  margin: 8px 0 24px;
  font-size: clamp(2.75rem, 1rem + 7.2vw, 6.5rem);   /* 104px at 1440, as the source */
  line-height: .92;
}
.hero__sub {
  max-width: 640px;
  margin: 0 0 32px;
  font-family: var(--bf-font-body);
  font-size: 1.1875rem;
  line-height: 1.5;
}
.hero .btn { padding: 12px 24px !important; font-size: 1.1rem !important; line-height: 2 !important; }