/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  --color-primary: #86190E;
  --color-secondary: #040304;
  --color-accent: #F0B23E;
  --color-footer-bg: #19303E;
  --radius-btn: 0.5rem;
  --shadow-card: 0 4px 20px rgba(0,0,0,0.08);
  --transition-base: all 0.25s ease;
  --font-inter: 'Inter', sans-serif;
  --font-dmsans: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  
  /* Hero defaults (can be overridden by paragraph styles) */
  --hero-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --hero-heading-font-family: var(--font-dmsans);
  --hero-heading-color: #ffffff;
  --hero-text-color: rgba(255, 255, 255, 0.9);
  --hero-overlay-opacity: 0.78;
  --hero-heading-size: clamp(2.75rem, 5vw, 3.5rem);
  --hero-text-size: 1.08rem;
}

/* ============================================
   FONTS
   ============================================ */
html {
  overflow-x: hidden;
}
body {
  font-family: var(--font-dmsans);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  padding-top: calc(64px + var(--drupal-displace-offset-top, 0px)); /* offsets the fixed .region-header-bar (min-height: 64px) plus Drupal's admin toolbar, when present */
}

/* Permanent fix: Bootstrap's .row applies negative left/right margins
   (calc(-.5 * var(--bs-gutter-x))) expecting a padded .container parent.
   Several regions use .row without one, which pushes content past the
   viewport edge and creates the horizontal scrollbar. Neutralize it here
   so no .row, present or future, can trigger it. */
.row {
  margin-left: 0;
  margin-right: 0;
}
.row > [class*="col"] {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

h1, h2, h3, h4, h5, h6,
.rochefs-hero__heading,
.rochefs-feature__heading {
  font-family: var(--font-dmsans);
}

/* ============================================
   BUTTONS (generic)
   ============================================ */
.btn-rochefs {
  border-radius: var(--radius-btn);
  transition: var(--transition-base);
}
.btn-rochefs:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* ============================================
   REGION BACKGROUNDS / LAYOUT
   ============================================ */
/* .region-highlighted intentionally has no background here - it's a
   generic wrapper reused across pages, and hardcoding a color on it
   blocked per-page backgrounds. Set background on the hero/content
   inside it instead, per page. */
.region-content-bottom { background-color: var(--color-accent); }
.region-footer,
.region-footer-bottom { background-color: var(--color-footer-bg); }

/* Below Content A/B: sit side by side in a shared row when both are present */
.region-content-below {
  display: flex;
  flex-wrap: wrap;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.content-below-a,
.content-below-b {
  flex: 1 1 0;
  min-width: 280px;
  padding: 2rem;
}
.content-below-a .region {
  border-left: 2px solid var(--color-accent);
}
.content-below-b {
  border-left: 1px solid rgba(0,0,0,0.06);
}

@media (max-width: 767.98px) {
  .region-content-below {
    flex-direction: column;
    padding: 0 1rem;
  }
  .content-below-a,
  .content-below-b {
    padding: 1.5rem 1rem;
  }
  .content-below-b {
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.06);
  }
}

/* ============================================
   HEADER + NAVIGATION — fixed, shrinks on scroll
   ============================================ */

.region-header-bar {
  position: fixed;
  top: var(--drupal-displace-offset-top, 0px);
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 0.75rem 1.5rem;
  transition: padding 0.25s ease, min-height 0.25s ease;
  min-height: 64px;
}

/* Shrunk state — JS toggles this class after scroll threshold */
.region-header-bar.is-scrolled {
  padding: 0.5rem 1.5rem;
  min-height: 56px;
  box-shadow: var(--shadow-card);
}
.region-header-bar.is-scrolled .navbar-brand img {
  max-height: 30px;
}

.region-header {
  flex: 0 0 auto;
}
.region-header .navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.region-header .navbar-brand img {
  max-height: 40px;
  width: auto;
  flex-shrink: 0;
  transition: max-height 0.25s ease;
}

.region-header-bar .navbar-collapse {
  flex: 0 0 auto;
  margin-left: auto;
}

.rochefs-nav-close {
  display: none; /* hidden on desktop; overridden below on mobile */
}

.region-primary-menu .navbar-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

/* Request a Quote — single clean rule, no competing !important anywhere */
.region-primary-menu .nav-link--node-10 {
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  padding: 0.575rem .85rem;
  opacity: 0.7;
  margin-left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.region-primary-menu .nav-link--node-10::after {
  content: "→";
  font-size: 0.9em;
}
.region-primary-menu .nav-link--node-10:hover {
  text-decoration: none;
  opacity: 0.9;
}

/* Mobile off-canvas nav panel — slides in from the right, closes via
   the .rochefs-nav-close button (same #RochefsNav collapse target). */
@media (max-width: 991.98px) {
  .region-header-bar .navbar-collapse {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;
    width: min(320px, 85vw);
    height: 100dvh;
    margin-left: 0;
    flex: none;
    display: block !important;
    overflow-y: auto;
    background: #fff;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
    padding: 5rem 1.75rem 2rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .region-header-bar .navbar-collapse.show {
    transform: translateX(0);
    max-height: fit-content;
  }
  .region-primary-menu .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .rochefs-nav-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color-secondary, #040304);
    cursor: pointer;
  }
  .region-primary-menu .nav-link--node-10 {
    background-color: inherit;
    color: var(--color-primary);
    border-radius: 999px;
    opacity: 1;
    display: inline-flex;
    align-items: normal;
    gap: 0.4rem;
  }
}

.region-primary-menu .nav-link {
  color: var(--color-secondary);
  font-weight: 700;
  transition: var(--transition-base);
}
.region-primary-menu .nav-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
}
.region-primary-menu .nav-item.active .nav-link,
.region-primary-menu .nav-link.is-active {
  background-color: rgba(134, 25, 14, 0.08);
  border-radius: var(--radius-btn);
}

/* Dropdown submenu — class is on <li>, not <a> */
.region-primary-menu .dropdown-menu {
  border: none;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-btn);
  padding: 0.5rem 0;
}
.region-primary-menu .dropdown-item {
  padding: 0;
}
.region-primary-menu .dropdown-item a,
.region-primary-menu .dropdown-item a:visited {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color-secondary);
  text-decoration: none;
  transition: var(--transition-base);
}
.region-primary-menu .dropdown-item a:hover {
  background-color: rgba(134, 25, 14, 0.06);
  color: var(--color-primary);
}

/* Handle admin toolbar */
body.toolbar-fixed .region-header-bar {
  top: 39px;
}
body.toolbar-horizontal.toolbar-fixed .region-header-bar {
  top: 79px;
}

@media (max-width: 767.98px) {
  body.toolbar-vertical.toolbar-fixed .region-header-bar {
    top: 39px;
  }
}

/* ============================================
   HERO - COMMON STYLES (All variants)
   ============================================ */

.rochefs-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
  padding: 3.5rem 0;
}

/* Only the flagship full-bleed style forces near-fullscreen height.
   Other styles (used on interior pages, minimal-content heroes) size
   to their own content via the padding above instead. */
.rochefs-hero--hero-style-1 {
  min-height: calc(100vh - 64px);
  min-height: calc(100dvh - 64px);
  /* Fallback so image-less hero-style-1 instances (HSE, Get in Touch,
     Janitorial) show a proper solid dark background instead of the
     __overlay's near-black gradient sitting directly on white body
     background, which reads as a flat grey wash. Harmless when an
     image IS present since __media/__overlay paint above it. */
  background: var(--color-secondary, #040304);
}

/* Full-bleed media */
.rochefs-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.rochefs-hero__image,
.rochefs-hero__video {
  width: 100%;
  height: 100%;
}

.rochefs-hero__image img,
.rochefs-hero__video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Dark overlay for text readability - uses CSS custom property for opacity */
.rochefs-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      rgba(4, 3, 4, var(--hero-overlay-opacity, 0.78)) 0%,
      rgba(4, 3, 4, calc(var(--hero-overlay-opacity, 0.78) * 0.7)) 45%,
      rgba(4, 3, 4, calc(var(--hero-overlay-opacity, 0.78) * 0.23)) 100%
    );
}

/* Content container */
.rochefs-hero__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 6rem 1.5rem;
  position: relative;
  z-index: 1;
}

.rochefs-hero__content {
  max-width: 760px;
}

/* Eyebrow */
.rochefs-hero__eyebrow {
  margin-bottom: 1rem;
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Heading - uses CSS custom properties for overrides */
.rochefs-hero__heading {
  margin: 0 0 1.5rem;
  color: var(--hero-heading-color, #ffffff);
  font-size: var(--hero-heading-size, clamp(2.75rem, 6vw, 5.5rem));
  font-family: var(--font-dmsans);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 1px;
}

/* Supporting text - uses CSS custom properties for overrides */
.rochefs-hero__text {
  max-width: 650px;
  margin-bottom: 2rem;
  color: var(--hero-text-color, rgba(255, 255, 255, 0.9));
  font-size: var(--hero-text-size, 1.15rem);
  font-family: var(--font-dmsans);
  line-height: 1.7;
}

/* CTA row */
.rochefs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Generic CTA links */
.rochefs-hero__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.5rem 1rem;
  border-radius: 99px;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition-base);
}

/* Primary - milky background, dark text, pill radius matching the
   Request a Quote nav button (border-radius: 999px) */
.rochefs-hero__cta--primary a {
  background: #FFF8EE;
  color: var(--color-secondary, #040304);
  border-radius: 999px;
}
.rochefs-hero__cta--primary a:hover {
  background: #fff;
  color: var(--color-secondary, #040304);
  transform: translateY(-2px);
}

/* Secondary - right-facing, upward-tilted arrow */
.rochefs-hero__cta--secondary a {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  color: #fff;
  gap: 0.5rem;
}
.rochefs-hero__cta--secondary a::after {
  content: "↗";
  font-size: 1.1em;
  line-height: 1;
}
.rochefs-hero__cta--secondary a:hover {
  background: #fff;
  color: var(--color-secondary);
  transform: translateY(-2px);
}

/* ============================================
   HERO STYLE 1 - Full-width bg image, content top-left (DEFAULT)
   ============================================ */
.rochefs-hero--hero-style-1 .rochefs-hero__content--left {
  max-width: 80%;
  margin-right: auto;
  padding-top:5rem;
}

/* ============================================
   HERO STYLE 2 - Framed image on the right, content stacked left
   ============================================ */
.rochefs-hero--hero-style-2 {
  min-height: auto;
  padding: 5rem 0;
  background: var(--color-secondary, #040304);
}
.rochefs-hero--hero-style-2 .rochefs-hero__content--framed {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 100%;
}
.rochefs-hero--hero-style-2 .rochefs-hero__framed-left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rochefs-hero--hero-style-2 .rochefs-hero__framed-right {
  border-radius: 1.5rem;
  overflow: hidden;
  height: 420px;
}
.rochefs-hero--hero-style-2 .rochefs-hero__framed-right img,
.rochefs-hero--hero-style-2 .rochefs-hero__framed-right video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================
   HERO STYLE 3 - No image. Left: eyebrow/heading/CTA. Right: intro,
   capped to the left column's height (overflow hidden).
   ============================================ */
.rochefs-hero--hero-style-3 {
  background: var(--color-secondary, #040304);
}
.rochefs-hero--hero-style-3 .rochefs-hero__content--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: 100%;
  align-items: start;
}
.rochefs-hero--hero-style-3 .rochefs-hero__split-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.rochefs-hero--hero-style-3 .rochefs-hero__split-right {
  max-height: var(--hero-split-left-height, 320px);
  overflow: hidden;
}
.rochefs-hero--hero-style-3 .rochefs-hero__text {
  max-width: 100%;
  font-size: 1.25rem;
}

/* ============================================
   HERO STYLE 4 - No image. Left: eyebrow/heading/intro. Right: CTA.
   ============================================ */
.rochefs-hero--hero-style-4 {
  background: var(--color-secondary, #040304);
}
.rochefs-hero--hero-style-4 .rochefs-hero__content--split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  max-width: 100%;
}
.rochefs-hero--hero-style-4 .rochefs-hero__split-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.rochefs-hero--hero-style-4 .rochefs-hero__split-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.rochefs-hero--hero-style-4 .rochefs-hero__actions {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.rochefs-hero--hero-style-4 .rochefs-hero__actions a {
  width: 100%;
  justify-content: center;
}

/* ============================================
   HERO STYLE 5 - Full-bleed bg image, all fields stacked & centered
   ============================================ */
.rochefs-hero--hero-style-5 .rochefs-hero__content--center {
  margin: 0 auto;
  text-align: center;
  max-width: 800px;
}
.rochefs-hero--hero-style-5 .rochefs-hero__actions {
  justify-content: center;
}
.rochefs-hero--hero-style-5 .rochefs-hero__text {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   PARAGRAPH-LEVEL STYLE OVERRIDES
   ============================================ */
.rochefs-hero[style*="--hero-font-family"] .rochefs-hero__text {
  font-family: var(--hero-font-family, inherit);
}
.rochefs-hero[style*="--hero-heading-font-family"] .rochefs-hero__heading {
  font-family: var(--hero-heading-font-family, inherit);
}
.rochefs-hero[style*="--hero-heading-size"] .rochefs-hero__heading {
  font-size: var(--hero-heading-size, inherit);
}
.rochefs-hero[style*="--hero-text-size"] .rochefs-hero__text {
  font-size: var(--hero-text-size, inherit);
}
.rochefs-hero[style*="--hero-heading-color"] .rochefs-hero__heading {
  color: var(--hero-heading-color, inherit);
}
.rochefs-hero[style*="--hero-text-color"] .rochefs-hero__text {
  color: var(--hero-text-color, inherit);
}
.rochefs-hero[style*="--hero-overlay-opacity"] .rochefs-hero__overlay {
  background: linear-gradient(
    90deg,
    rgba(4, 3, 4, var(--hero-overlay-opacity, 0.78)) 0%,
    rgba(4, 3, 4, calc(var(--hero-overlay-opacity, 0.78) * 0.7)) 45%,
    rgba(4, 3, 4, calc(var(--hero-overlay-opacity, 0.78) * 0.23)) 100%
  );
}

/* ============================================
   HERO STYLE SWITCHER
   ============================================ */
.rochefs-hero-wrapper {
  display: none;
}
.rochefs-hero-wrapper.is-active {
  display: block;
}
.rochefs-hero-wrapper.is-hidden {
  display: none !important;
}

/* ============================================
   SLICK HERO CAROUSEL - SPECIFIC TARGETING
   ============================================ */
.view-hero-carousel .slick {
  position: relative;
  width: 100%;
  min-height: 500px;
  max-height: 80vh;
  overflow: hidden;
}
.view-hero-carousel .slick-list,
.view-hero-carousel .slick-track {
  height: 100% !important;
  min-height: 500px;
  max-height: 80vh;
}
.view-hero-carousel .slick-slide {
  position: relative;
  min-height: 500px;
  max-height: 80vh;
  overflow: hidden;
  height: auto !important;
}
.view-hero-carousel .slick-slide > div,
.view-hero-carousel .slick-slide .field-content,
.view-hero-carousel .slick-slide .rochefs-hero-wrapper,
.view-hero-carousel .slick-slide .rochefs-hero {
  height: 100% !important;
  min-height: 500px;
  max-height: 80vh;
}
.view-hero-carousel .slick-slide img,
.view-hero-carousel .slick-slide .rochefs-hero__image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 500px;
  max-height: 80vh;
  object-fit: cover !important;
  object-position: center center;
  display: block !important;
}
.view-hero-carousel .slick-slide .rochefs-hero__media,
.view-hero-carousel .slick-slide .rochefs-hero__image {
  height: 100% !important;
  min-height: 500px;
  max-height: 80vh;
  overflow: hidden;
}

/* Slick Dots & Arrows */
.view-hero-carousel .slick-dots {
  bottom: 2rem !important;
  z-index: 10 !important;
  position: absolute !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.view-hero-carousel .slick-dots li {
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}
.view-hero-carousel .slick-dots li button {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  background: transparent !important;
  text-indent: -9999px !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}
.view-hero-carousel .slick-dots li.slick-active button {
  background: var(--color-accent, #F0B23E) !important;
  border-color: var(--color-accent, #F0B23E) !important;
}
.view-hero-carousel .slick-prev,
.view-hero-carousel .slick-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  font-size: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}
.view-hero-carousel .slick-prev {
  left: 1rem !important;
}
.view-hero-carousel .slick-next {
  right: 1rem !important;
}
.view-hero-carousel .slick-prev::before,
.view-hero-carousel .slick-next::before {
  font-family: 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
  font-weight: 900;
  font-size: 1.2rem !important;
  color: #fff !important;
  opacity: 0.8 !important;
}
.view-hero-carousel .slick-prev::before {
  content: "\f104" !important;
}
.view-hero-carousel .slick-next::before {
  content: "\f105" !important;
}
.view-hero-carousel .slick-prev:hover,
.view-hero-carousel .slick-next:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================
   FEATURE - COMMON STYLES
   ============================================ */
.rochefs-feature {
  position: relative;
  overflow: hidden;
}
.rochefs-feature-wrapper {
  display: none;
}
.rochefs-feature-wrapper.is-active {
  display: block;
}
.rochefs-feature-wrapper.is-hidden {
  display: none !important;
}
.rochefs-feature__inner--constrained {
  max-width: 1320px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.rochefs-feature__eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent, #F0B23E);
}
.rochefs-feature__heading {
  font-size: clamp(2.45rem, 4.3vw, 4.6rem);
  font-weight: 700;
  font-family: var(--font-dmsans);
  line-height: 1.1;
  margin: 0;
}
.rochefs-feature__text {
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 650px;
}
.rochefs-feature__cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-btn, 0.5rem);
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition-base, all 0.25s ease);
  background: var(--color-primary, #86190E);
  color: #fff;
}
.bg-off-white-blue .rochefs-feature__cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-btn, 0.5rem);
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition-base, all 0.25s ease);
  background: inherit;
  color: var(--color-primary, #86190E);
}
.rochefs-feature__cta a::after {
  content: "→";
  transition: transform 0.25s ease;
}
.rochefs-feature__cta a:hover::after {
  transform: translateX(4px);
}
.rochefs-feature__cta a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card, 0 4px 20px rgba(0,0,0,0.08));
}

/* ============================================
   FEATURE STYLE 1
   ============================================ */
.rochefs-feature--style-1 .rochefs-feature__layout--two-column {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  align-items: start;
}
.rochefs-feature--style-1 .rochefs-feature__col-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rochefs-feature--style-1 .rochefs-feature__col-left .rochefs-feature__image img {
  max-width: 100%;
  height: auto;
}
.rochefs-feature--style-1 .rochefs-feature__col-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ============================================
   FEATURE STYLE 2
   ============================================ */
.rochefs-feature--style-2 .rochefs-feature__layout--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
}
.rochefs-feature--style-2 .rochefs-feature__col-image {
  overflow: hidden;
}
.rochefs-feature--style-2 .rochefs-feature__col-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rochefs-feature--style-2 .rochefs-feature__col-content--primary-bg {
  background-color: var(--color-primary, #86190E);
  color: #fff;
  padding: 4rem;
  display: flex;
  align-items: center;
}
.rochefs-feature--style-2 .rochefs-feature__content-inner {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
}
.rochefs-feature--style-2 .rochefs-feature__content-inner .rochefs-feature__eyebrow {
  color: var(--color-accent, #F0B23E);
}
.rochefs-feature--style-2 .rochefs-feature__content-inner .rochefs-feature__heading {
  /* Toned down from the generic 4.6rem max - too large/shouty for this
     card context - and softened off pure white to ease the contrast. */
  font-size: clamp(1.9rem, 2.8vw, 2.75rem);
  color: rgba(255, 255, 255, 0.92);
}
.rochefs-feature--style-2 .rochefs-feature__content-inner .rochefs-feature__text {
  color: rgba(255, 255, 255, 0.85);
}
.rochefs-feature--style-2 .rochefs-feature__content-inner .rochefs-feature__cta a {
  background: #fff;
  color: var(--color-primary, #86190E);
}
.rochefs-feature--style-2 .rochefs-feature__content-inner .rochefs-feature__tags .field__item {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ============================================
   FEATURE STYLE 3
   ============================================ */
.rochefs-feature--style-3 .rochefs-feature__layout--with-bg {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
}
.rochefs-feature--style-3 .rochefs-feature__layout--with-bg .rochefs-feature__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.rochefs-feature--style-3 .rochefs-feature__layout--with-bg .rochefs-feature__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rochefs-feature--style-3 .rochefs-feature__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(4, 3, 4, 0.7);
}
.rochefs-feature--style-3 .rochefs-feature__inner--constrained {
  position: relative;
  z-index: 2;
  width: 100%;
}
.rochefs-feature--style-3 .rochefs-feature__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.rochefs-feature--style-3 .rochefs-feature__split-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  color: #fff;
}
.rochefs-feature--style-3 .rochefs-feature__split-left .rochefs-feature__eyebrow {
  color: var(--color-accent, #F0B23E);
}
.rochefs-feature--style-3 .rochefs-feature__split-left .rochefs-feature__heading,
.rochefs-feature--style-3 .rochefs-feature__split-left .rochefs-feature__text {
  color: #fff;
}
.rochefs-feature--style-3 .rochefs-feature__split-left .rochefs-feature__cta a {
  background: var(--color-primary, #86190E);
  color: #fff;
}
.rochefs-feature--style-3 .rochefs-feature__split-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  color: #fff;
}

/* ============================================
   FEATURE STYLE 4
   ============================================ */
.rochefs-feature--style-4 .rochefs-feature__image {
  width: 100%;
  max-height: 400px;
  overflow: hidden;
}
.rochefs-feature--style-4 .rochefs-feature__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rochefs-feature--style-4 .rochefs-feature__content--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  padding: 3rem 0;
}
.rochefs-feature--style-4 .rochefs-feature__content--center .rochefs-feature__text {
  max-width: 800px;
}
.rochefs-feature--style-4 .rochefs-feature__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  width: 100%;
}
.rochefs-feature--style-4 .rochefs-feature__tags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
  gap: 0.5rem;
  justify-content: center;
}

/* ============================================
   FEATURE STYLE 5
   ============================================ */
.rochefs-feature--style-5 .rochefs-feature__layout--reverse {
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
}
.rochefs-feature--style-5 .rochefs-feature__col-image {
  overflow: hidden;
}
.rochefs-feature--style-5 .rochefs-feature__col-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rochefs-feature--style-5 .rochefs-feature__col-content--primary-bg {
  background-color: var(--color-primary, #86190E);
  color: #fff;
  padding: 4rem;
  display: flex;
  align-items: center;
}
.rochefs-feature--style-5 .rochefs-feature__content-inner {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.rochefs-feature--style-5 .rochefs-feature__content-inner .rochefs-feature__eyebrow {
  color: var(--color-accent, #F0B23E);
}
.rochefs-feature--style-5 .rochefs-feature__content-inner .rochefs-feature__heading,
.rochefs-feature--style-5 .rochefs-feature__content-inner .rochefs-feature__text {
  color: #fff;
}
.rochefs-feature--style-5 .rochefs-feature__content-inner .rochefs-feature__cta a {
  background: #fff;
  color: var(--color-primary, #86190E);
}
.rochefs-feature--style-5 .rochefs-feature__content-inner .rochefs-feature__tags .field__item {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Style 6: image flush to viewport edge, content padded to site container */
.rochefs-feature--style-6 .rochefs-feature__layout--flush {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.rochefs-feature--style-6 .rochefs-feature__col-image--flush {
  position: relative;
  min-height: 480px;
  height: 100%;
  overflow: hidden;
}
.rochefs-feature--style-6 .rochefs-feature__col-image--flush .rochefs-feature__image {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.rochefs-feature--style-6 .rochefs-feature__col-image--flush img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rochefs-feature--style-6 .rochefs-feature__col-content--flush {
  display: flex;
  align-items: center;
  padding: 5rem 1.85rem;
}
.rochefs-feature--style-6 .rochefs-feature__content-inner {
  max-width: 600px;
}

@media (max-width: 767.98px) {
  .rochefs-feature--style-6 .rochefs-feature__layout--flush {
    grid-template-columns: 1fr;
  }
  .rochefs-feature--style-6 .rochefs-feature__col-image--flush {
    min-height: 280px;
  }
  .rochefs-feature--style-6 .rochefs-feature__col-content--flush {
    padding: 2rem 1.25rem;
  }
}

/* ============================================
   FEATURE LAYOUTS (field_layout_selector - structural only, no color)
   ============================================ */

/* Shared: reverse flips column order for equal-width (flush) layouts */
.rochefs-feature__layout--flush.rochefs-feature__layout--reverse {
  direction: rtl;
}
.rochefs-feature__layout--flush.rochefs-feature__layout--reverse > * {
  direction: ltr;
}

/* Layout: two_column / two_column_reversed */
.rochefs-feature__layout--two-col {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: start;
}
.rochefs-feature__layout--two-col.rochefs-feature__layout--reverse {
  grid-template-columns: 1.4fr 1fr;
}
.rochefs-feature__layout--two-col.rochefs-feature__layout--reverse .rochefs-feature__col-left {
  order: 2;
}
.rochefs-feature__layout--two-col.rochefs-feature__layout--reverse .rochefs-feature__col-right {
  order: 1;
}
.rochefs-feature__image--small {
  max-width: 40px;
}
.rochefs-feature__image--small img {
  width: 100%;
  height: auto;
  display: block;
}

/* Layout: layout_image_left / layout_image_right (flush) - shares style-6's flush rules */
.rochefs-feature__layout--flush {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.rochefs-feature__col-image--flush {
  min-height: 480px;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.rochefs-feature__col-image--flush .rochefs-feature__image {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.rochefs-feature__col-image--flush img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.rochefs-feature__col-content--flush {
  display: flex;
  align-items: center;
  padding: 5rem 1.85rem;
}

/* Layout: stacked */
.rochefs-feature__layout--stacked {
  display: flex;
  flex-direction: column;
}
.rochefs-feature__stacked-image {
  position: relative;
  margin-bottom: 2rem;
  /* Without this, an instance with no image field set collapses to
     zero height (its only child, the eyebrow-badge, is absolutely
     positioned and contributes no height) - the badge then overlaps
     the stacked-content heading directly below it instead of sitting
     above it. This floor keeps the badge clear of following content
     even when there's no image; it's overridden naturally by taller
     real images. */
  min-height: 3.5rem;
}
.rochefs-feature__stacked-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.75rem;
}
.rochefs-feature__eyebrow-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--color-secondary, #040304);
  padding: 0.4rem 0.9rem;
  border-radius: 0.4rem;
}
.rochefs-feature__eyebrow-badge .rochefs-feature__eyebrow {
  margin: 0;
}

@media (max-width: 767.98px) {
  .rochefs-feature__layout--two-col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .rochefs-feature__layout--flush {
    grid-template-columns: 1fr;
  }
  .rochefs-feature__col-image--flush {
    min-height: 280px;
  }
  .rochefs-feature__col-content--flush {
    padding: 2rem 1.25rem;
  }
}

/* ============================================
   FEATURE CARDS (nested)
   ============================================ */
.rochefs-feature__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.rochefs-feature-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Weight + Eyebrow share one line, identical font treatment */
.rochefs-feature-card__meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.rochefs-feature-card__weight,
.rochefs-feature-card__eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent, #F0B23E);
  margin: 0;
}
.rochefs-feature-card__divider {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent, #F0B23E);
  opacity: 0.5;
  line-height: 1;
}
.rochefs-feature-card__icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--color-accent, #F0B23E);
}
.rochefs-feature-card__heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}
.rochefs-feature-card__text {
  font-size: 0.95rem;
  color: #fff;
  opacity: 0.8;
}

/* card_style_2: icon card */
.rochefs-feature-card--card-style-2 .rochefs-feature-card__icon {
  margin-bottom: 1rem;
}

/* card_style_3: image card */
.rochefs-feature-card--card-style-3 {
  padding: 0;
  overflow: hidden;
}
.rochefs-feature-card--card-style-3 .rochefs-feature-card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.rochefs-feature-card--card-style-3 .rochefs-feature-card__media img,
.rochefs-feature-card--card-style-3 .rochefs-feature-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rochefs-feature-card--card-style-3 .rochefs-feature-card__content {
  padding: 1.5rem;
}
.rochefs-feature-card--card-style-3 .rochefs-feature-card__eyebrow {
  display: block;
  margin-bottom: 0.5rem;
}

/* Cards on light backgrounds - the base card styling above (white
   text, near-transparent white background) assumes a dark parent
   like feature-3's navy background. bg-white / bg-off-white-blue
   wrap the SAME card styles (HSE page, etc.) and were rendering
   white text on a light background - invisible. Give those contexts
   dark text and a light card surface instead. */
.bg-white .rochefs-feature-card,
.bg-off-white .rochefs-feature-card,
.bg-off-white-blue .rochefs-feature-card {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--color-secondary, #040304);
}

.bg-white .rochefs-feature-card__heading,
.bg-off-white .rochefs-feature-card__heading,
.bg-off-white-blue .rochefs-feature-card__heading {
  color: var(--color-secondary, #040304);
}
.bg-white .rochefs-feature-card__text,
.bg-off-white .rochefs-feature-card__text,
.bg-off-white-blue .rochefs-feature-card__text {
  color: var(--color-secondary, #040304);
  opacity: 0.75;
}

/* Style 3 specific - cards in rows with weight */
.rochefs-feature--style-3 .rochefs-feature__cards {
  grid-template-columns: 1fr;
  gap: 1rem;
}
.rochefs-feature--style-3 .rochefs-feature-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 1rem 1.5rem;
  border: none;
}
.rochefs-feature--style-3 .rochefs-feature-card__meta {
  margin-bottom: 0;
  min-width: 3rem;
  flex-shrink: 0;
}
.rochefs-feature--style-3 .rochefs-feature-card__content {
  flex: 1;
}
.rochefs-feature--style-3 .rochefs-feature-card__heading {
  font-size: 1rem;
  margin: 0;
}
.rochefs-feature--style-3 .rochefs-feature-card__text {
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 0;
}

/* ============================================
   FEATURE TAGS
   ============================================ */
.rochefs-feature__tags .field--name-field-tag, .rochefs-feature__tags .field--type-entity-reference  {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.rochefs-feature__tags .field__item {
  display: block;
  margin: 0;
  padding: 0.25rem 0.75rem;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 0.25rem;
  color: var(--color-secondary, #040304);
}
.rochefs-feature__tags .field__item::before {
	content: "—";
	color: #F0B23E;
	margin-right: .5rem;
}

/* ============================================
   RESPONSIVE - Combined
   ============================================ */
@media (max-width: 991.98px) {
  /* Hero Style 2, 3 & 4 */
  .rochefs-hero--hero-style-2 .rochefs-hero__content--framed {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .rochefs-hero--hero-style-2 .rochefs-hero__framed-right {
    height: 280px;
  }
  .rochefs-hero--hero-style-3 .rochefs-hero__content--split,
  .rochefs-hero--hero-style-4 .rochefs-hero__content--split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .rochefs-hero--hero-style-3 .rochefs-hero__split-right {
    max-height: none;
  }
  .rochefs-hero--hero-style-4 .rochefs-hero__split-right {
    justify-content: flex-start;
  }
  .rochefs-hero--hero-style-4 .rochefs-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .rochefs-hero--hero-style-4 .rochefs-hero__actions a {
    width: auto;
    flex: 0 1 auto;
  }
  
  /* Feature Style 1 */
  .rochefs-feature--style-1 .rochefs-feature__layout--two-column {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  /* Feature Style 2 & 5 */
  .rochefs-feature--style-2 .rochefs-feature__layout--split,
  .rochefs-feature--style-5 .rochefs-feature__layout--reverse {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .rochefs-feature--style-2 .rochefs-feature__col-image,
  .rochefs-feature--style-5 .rochefs-feature__col-image {
    min-height: 300px;
  }
  .rochefs-feature--style-2 .rochefs-feature__col-content--primary-bg,
  .rochefs-feature--style-5 .rochefs-feature__col-content--primary-bg {
    padding: 3rem 1.5rem;
  }
  
  /* Feature Style 3 */
  .rochefs-feature--style-3 .rochefs-feature__split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .rochefs-feature--style-3 .rochefs-feature__layout--with-bg {
    min-height: auto;
    padding: 3rem 0;
  }
  
  /* Slick Carousel */
  .view-hero-carousel .slick,
  .view-hero-carousel .slick-slide,
  .view-hero-carousel .slick-slide > div,
  .view-hero-carousel .slick-slide .field-content,
  .view-hero-carousel .slick-slide .rochefs-hero-wrapper,
  .view-hero-carousel .slick-slide .rochefs-hero,
  .view-hero-carousel .slick-slide .rochefs-hero__media,
  .view-hero-carousel .slick-slide .rochefs-hero__image {
    min-height: 400px !important;
    max-height: 60vh !important;
  }
  .view-hero-carousel .slick-slide img {
    min-height: 400px !important;
    max-height: 60vh !important;
  }
  .view-hero-carousel .slick-prev,
  .view-hero-carousel .slick-next {
    width: 36px !important;
    height: 36px !important;
  }
}

@media (max-width: 767.98px) {
  /* Hero Carousel only - NOT bare .rochefs-hero, which is shared by
     every hero style (including the standalone, non-carousel ones)
     and already gets its height from .rochefs-hero--hero-style-1 /
     content padding, not a hard-clamped vh value. */
  .rochefs-hero-carousel,
  .rochefs-hero-carousel .carousel,
  .rochefs-hero-carousel .carousel-inner,
  .rochefs-hero-carousel .carousel-item {
    min-height: 75vh;
    height: 75vh;
  }
  .rochefs-hero__inner {
    padding: 3rem 1.25rem;
  }
  .rochefs-hero__heading {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }
  .rochefs-hero__text {
    font-size: 1rem;
  }
  .rochefs-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .rochefs-hero__actions a {
    width: 100%;
  }
  .rochefs-hero--hero-style-3 .rochefs-hero__content--split,
  .rochefs-hero--hero-style-4 .rochefs-hero__content--split {
    gap: 1.5rem;
  }
  .rochefs-hero--hero-style-4 .rochefs-hero__actions {
    flex-direction: column;
  }
  .rochefs-hero--hero-style-4 .rochefs-hero__actions a {
    width: auto;
  }
  
  /* Hero Carousel */
  .rochefs-hero-carousel .carousel-control-prev,
  .rochefs-hero-carousel .carousel-control-next {
    width: 10%;
  }
  .rochefs-hero-carousel .carousel-indicators {
    bottom: 1rem;
  }
  .rochefs-hero-carousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    margin: 0 4px;
  }
  
  /* Slick Carousel */
  .view-hero-carousel .slick,
  .view-hero-carousel .slick-slide,
  .view-hero-carousel .slick-slide > div,
  .view-hero-carousel .slick-slide .field-content,
  .view-hero-carousel .slick-slide .rochefs-hero-wrapper,
  .view-hero-carousel .slick-slide .rochefs-hero,
  .view-hero-carousel .slick-slide .rochefs-hero__media,
  .view-hero-carousel .slick-slide .rochefs-hero__image {
    min-height: 350px !important;
    max-height: 50vh !important;
  }
  .view-hero-carousel .slick-slide img {
    min-height: 350px !important;
    max-height: 50vh !important;
  }
  .view-hero-carousel .slick-prev {
    left: 0.5rem !important;
  }
  .view-hero-carousel .slick-next {
    right: 0.5rem !important;
  }
  .view-hero-carousel .slick-prev,
  .view-hero-carousel .slick-next {
    width: 30px !important;
    height: 30px !important;
  }
  .view-hero-carousel .slick-dots {
    bottom: 1rem !important;
  }
  .view-hero-carousel .slick-dots li button {
    width: 10px !important;
    height: 10px !important;
  }
  
  /* Feature */
  .rochefs-feature__inner--constrained {
    padding: 2rem 1.25rem;
  }
  .rochefs-feature--style-2 .rochefs-feature__col-content--primary-bg,
  .rochefs-feature--style-5 .rochefs-feature__col-content--primary-bg {
    padding: 2rem 1.25rem;
  }
  .rochefs-feature__cards {
    grid-template-columns: 1fr;
  }
  .rochefs-feature--style-4 .rochefs-feature__cards {
    grid-template-columns: 1fr;
  }
  .rochefs-feature--style-3 .rochefs-feature-card {
    flex-direction: column;
    text-align: center;
  }
  .rochefs-feature--style-3 .rochefs-feature-card__meta {
    margin-bottom: 0.5rem;
  }
}
@media (max-width: 460px) {
	.rochefs-feature__tags .field--name-field-tag {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   SPLIDE GALLERY - uniform slide image dimensions
   ============================================ */
.splide__slide .media,
.splide__slide > div {
  height: 100%;
}
.splide__slide img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
@media (max-width: 767.98px) {
  .splide__slide img {
    height: 260px;
  }
}

/* ============================================
   DRUPAL LOGIN PAGE - centered form
   ============================================ */
.path-user .region-content {
  display: flex;
  justify-content: center;
  padding: 4rem 1.5rem;
}
.path-user .user-login-form,
.path-user form.user-login-form {
  width: 100%;
  max-width: 420px;
  background: #fff;
  padding: 2.5rem;
  border-radius: var(--radius-btn, 0.5rem);
  box-shadow: var(--shadow-card, 0 4px 20px rgba(0,0,0,0.08));
}

/* Logged-in user profile page (/user/N) - the one page after login
   that reliably uses this theme rather than the admin theme. */
.path-user.page-user .region-content {
  padding: 2rem 1.5rem;
}