/* Base button look for all rf-btn variants */
/* Buttons */
.rf-btn,
.rf-btn.rf-btn--primary,
.rf-btn.rf-btn--ghost,
.rf-btn.rf-btn--outline {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;

  /* shape & spacing */
  padding: .70rem 1.25rem;
  border-radius: 0px;             /* rounded corners like screenshot */
  border: 1px solid rgba(0,0,0,.12);

  /* colors */
  background:#fff;
  color:#0f172a;

  /* text style */
  text-transform: uppercase;
  letter-spacing:.06em;
  font-weight:600;
  font-size:.9rem;

  /* depth + interaction */
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease;
}

/* Hover & focus */
.rf-btn:hover{
  box-shadow: 0 4px 12px rgba(0,0,0,.14);
  border-color: rgba(0,0,0,.2);
  transform: translateY(-1px);
}
.rf-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0 4px 12px rgba(0,0,0,.14);
}

/* Active */
.rf-btn:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
}

.rf-hero__actions {
    gap: 50px;
    display: flex;
    justify-content: center;
}







/* Video Main */

/* Base reset so there’s no stray gap */
html, body { margin: 0; }

/* Hero fills the screen height on every device */
.rf-hero {
  position: relative;
  min-height: 100vh;   /* fallback */
  min-height: 100svh;  /* mobile “small viewport” */
  min-height: 100dvh;  /* dynamic viewport (best) */
  display: flex;
  align-items: center;            /* vertically center your content */
  overflow: hidden;               /* crop video overflow */
} 

/* Background layer that the video sits in */
.rf-hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Make the video fill the hero and crop like a background image */
.rf-hero__img{
  width: 100%;
  height: 100%;
  object-fit: cover;              /* keep aspect ratio, cover entire area */
  object-position: center;
  display: block;                 /* avoid inline gaps */
  pointer-events: none;           /* clicks go to your CTA, not video */
  transform: translateZ(0);       /* fixes rare iOS repaint glitches */
}

/* Your overlay sits above the video */
.rf-hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,13%);
  z-index: 1;
}

/* Content goes above overlay */
.rf-hero__inner{
  position: relative;
  z-index: 2;
  width: 100%;
}

.rf-hero__content{
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 5rem) 1.5rem;
  text-align: center;
  color: #fff;
}

.rf-hero__title {
  color: white;
}


/* Calculator Section */

.modal {
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #fff;
  padding: 20px;
  width: 400px;
  max-width: 90%;
  position: relative;
}

.close {
  position: absolute;
  top: -10px; right: 5px;
  font-size: 24px;
  cursor: pointer;
}

#price-modal input[type="number"] {
  display: flex;
}

#price-modal select#foam-type {
  display: flex;
  margin-top: 10px;
}

#foam-swatch-box {
  width: 250px;
  height: auto;
  margin-left: 10px;
  vertical-align: middle;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#price-modal .modal-content {
  display: grid;
  grid-template-columns: 1fr 360px;   /* left column grows, right is fixed */
  gap: 24px;
  align-items: start;
  width: 550px;
}

#price-modal #price-calculator{ grid-column: 1; grid-row: 1; }
#price-modal #foam-swatch-box{  grid-column: 2; grid-row: 1; }

#price-modal #calculate-price {
  background: red;
  position: absolute;
  transform: translate(10px, 260px);
  width: 125px;
  border-radius: 0px;
}

#price-modal #add-to-cart {
  background: blue;
  position: absolute;
  transform: translate(140px, 245px);
  width: 125px;
  border-radius: 0px;
}


#modal-actions {
    grid-column: 2;
    grid-row: 1;
    position: absolute;
}

/* Service Offerings Section */

.service-offering {
  display: flex;
  flex-wrap: wrap;
  gap: 5%;
  justify-content: center;
  align-items: stretch;
  padding: 32px 0;
  background: #f9f8f6;
}

.offering {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* reduced gap for tighter inline spacing */
  max-width: 220px;
  text-align: center;
  margin: 0 8px; /* add horizontal margin for spacing between cards */
}

.offering video {
  width: 250px;
  height: 300px;
  border-radius: 0px;
  box-shadow: 0 2px 12px #0001;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 8px; /* add space below video */
}

.offering video:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px #0002;
}

.offering .title {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  margin-top: 0; /* remove extra space above title */
}

@media (max-width: 900px) {
  .service-offering {
    gap: 20px;
    padding: 24px 0;
  }
  .offering {
    max-width: 180px;
    gap: 10px;
    margin: 0 4px;
  }
}



/* Marquee Section */

.strip-card {
    flex: 0 0 400px;
    text-decoration: none;
    color: #111;
}

.page-title {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-top: 2rem;
}

.strip-card__label {
    font-size: 25px;
}






/*Banner Sections - Sustainability, Reticulated, Slitter, Soundproofing */

/* ===== Tokens (single source of truth) ===== */
:root{
  --cms-bg:#f9f8f6;
  --cms-ink:#0f172a;
  --cms-ink-soft:#334155;
  --cms-accent:#2f7a5b;
  --cms-accent-600:#27634a;
}

/* ===== Section wrapper: only identical declarations ===== */
.sustainability-banner,
.reticulated-banner,
.slitter-banner,
.soundproofing-banner {
  position: relative;
  isolation: isolate;
  background: var(--cms-bg);
  color: var(--cms-ink);
  place-items: center;             /* identical in all three */
  overflow: clip;
  min-height: 700px;
  justify-content: space-between;
}
/* Variant-only: these two use grid (slitter intentionally does NOT) */
.sustainability-banner,
.reticulated-banner{
  display: grid;
}

/* ===== Background image container: collate shared; isolate differences ===== */
.sustainability-banner .environmental-banner,
.reticulated-banner .reticulated-banner,
.slitter-banner .slitter-banner, 
.soundproofing-banner .soundproofing-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Variant-only */
.slitter-banner .slitter-banner{ opacity: 70%; }

/* ===== Banner images: collate shared; isolate heights ===== */
.sustainability-banner .cms-environmental__img,
.reticulated-banner .cms-reticulated__img,
.slitter-banner .cms-slitter__img, 
.soundproofing-banner .cms-soundproofing-img {
  width: 100%;
  object-fit: cover;
  object-position: 80% center;
  filter: saturate(1.02) contrast(1.02);
}
/* Variant-only heights */
.sustainability-banner .cms-environmental__img{ height: 700px; }
.reticulated-banner .cms-reticulated__img,
.slitter-banner .cms-slitter__img,
.soundproofing-banner .cms-soundproofing-img { height: 100%; }

/* ===== Overlay BETWEEN image and content (identical) ===== */
.sustainability-banner .environmental-banner-overlay,
.reticulated-banner .reticulated-banner-overlay,
.slitter-banner .slitter-banner-overlay,
.soundproofing-banner .soundproofing-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: black;
  opacity: 10%;
}

/* ===== Text layer ABOVE overlay: collate shared; isolate layout diffs ===== */
.sustainability-banner .environmental__inner,
.reticulated-banner .reticulated__inner,
.slitter-banner .slitter__inner,
.soundproofing-banner .soundproofing-wrap {
  position: relative;  /* reticulated/slitter override below */
  z-index: 2;
  padding: clamp(24px, 3.5vw, 56px);  /* identical */
}
/* Per-variant widths & positioning */
.sustainability-banner .environmental__inner{ width: min(1200px, 100%); }
.reticulated-banner .reticulated__inner{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  position: absolute;
}
.slitter-banner .slitter__inner{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  position: absolute;
  padding-top: 200px;
}
.soundproofing-banner .soundproofing-wrap{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  position: absolute;
  padding-top: 200px;
}

/* ===== Content block (identical) ===== */
.sustainability-banner .environmental__content,
.reticulated-banner .reticulated__content,
.slitter-banner .slitter__content,
.soundproofing-banner .soundproofing__content { max-width: 760px; }

/* ===== Titles/subtitles: collate shared typography; isolate colors ===== */
.sustainability-banner .environmental__title,
.reticulated-banner .reticulated__title,
.slitter-banner .slitter__title,
.soundproofing-banner .soundproofing__title {
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

/* Colors */
.sustainability-banner .environmental__title,
.reticulated-banner .reticulated__title{ color: white; }
.slitter-banner .slitter__title,
.soundproofing-banner .soundproofing__title { color: white; }


.sustainability-banner .environmental__subtitle,
.reticulated-banner .reticulated__subtitle,
.slitter-banner .slitter__subtitle,
.soundproofing-banner .soundproofing__subtitle {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.6;
  margin: 0 0 22px;
}

/* Colors */
.sustainability-banner .environmental__subtitle,
.reticulated-banner .reticulated__subtitle{ color: white; }
.slitter-banner .slitter__subtitle,
.soundproofing-banner .soundproofing__subtitle { color: white; }

/* ===== CTAs (identical) ===== */
.sustainability-banner .environmental__actions,
.reticulated-banner .reticulated__actions,
.slitter-banner .slitter__actions,
.soundproofing-banner .soundproofing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.sustainability-banner .environmental-btn,
.reticulated-banner .reticulated-btn,
.slitter-banner .slitter-btn,
.soundproofing-banner .soundproofing-btn {
  --py:12px; --px:20px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--py) var(--px);
  border-radius:999px;
  font-weight:600; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  border:1px solid transparent;
}
.sustainability-banner .environmental-btn--primary,
.reticulated-banner .reticulated-btn--primary,
.slitter-banner .slitter-btn--primary,
.soundproofing-banner .soundproofing-btn--primary {
  background: white;
  color: black;
  border-radius:0;
}
.sustainability-banner .environmental-btn--primary:hover,
.reticulated-banner .reticulated-btn--primary:hover,
.slitter-banner .slitter-btn--primary:hover,
.soundproofing-banner .soundproofing-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px #0000005c;
}

/* ===== Responsive (identical) ===== */
@media (max-width: 900px){
  .sustainability-banner .cms-environmental__img,
  .reticulated-banner .cms-reticulated__img,
  .slitter-banner .cms-slitter__img,
  .soundproofing-banner .cms-soundproofing-img { object-position: 85% center; }
}
@media (max-width: 720px){
  .sustainability-banner,
  .reticulated-banner,
  .slitter-banner,
  .soundproofing-banner { place-items:end start; }

  .sustainability-banner .environmental__content,
  .reticulated-banner .reticulated__content,
  .slitter-banner .slitter__content,
  .soundproofing-banner .soundproofing__content {
    max-width:100%;
    background:rgba(249,248,246,.82);
    backdrop-filter:blur(3px);
    border-radius:14px;
    padding:clamp(14px,3.5vw,20px);
  }
}

/* ===== Dark mode (identical) ===== */
@media (prefers-color-scheme: dark){
  .sustainability-banner,
  .reticulated-banner,
  .slitter-banner,
  .soundproofing-banner {
    background:#0b0f14; color:#e5e7eb;
  }
  .sustainability-banner .environmental-banner-overlay,
  .reticulated-banner .reticulated-banner-overlay,
  .slitter-banner .slitter-banner-overlay,
  .soundproofing-banner .soundproofing-banner-overlay {
    background: linear-gradient(90deg,
      rgba(20,24,30,0.85) 0%,
      rgba(20,24,30,0.60) 28%,
      rgba(20,24,30,0.20) 58%,
      rgba(20,24,30,0.00) 100%);
  }
}