#fw-section-custom-html-ae1cd03a-3fef-4905-898d-f135fd6b32f3 {

/* --- Root Font Size for REM Units --- */
html {
    font-size: 62.5%; /* This makes 1rem equal to 10px (base 16px * 0.625) */
}

/* --- Global Layout & Centering --- */
body {
    text-align: center; /* Centers all inline content (text, images not block) within the body */
    max-width: 120rem; /* 1200px -> 120rem. Max width for entire content area. */
    margin: 0 auto; /* Centers the body block itself on the page */
    padding: 0 2rem; /* 20px -> 2rem. Horizontal padding to prevent content from touching edges */
}

/* Ensure headings are explicitly centered (both the block and its text content) */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    text-transform: none;
    line-height: 1.2;
    /* CENTERING THE HEADING BLOCK */
    display: block; /* Make it a block element to take full available width initially */
    margin: 0 auto 0; /* Top margin (2em), **CENTERED HORIZONTALLY**, no bottom margin here */
    max-width: fit-content; /* Make the block width fit its content */
    /* Alternatively, if fit-content is problematic, give it a % width or max-width: 80rem; for content, and margin: auto */

    /* CENTERING THE TEXT WITHIN THE HEADING */
    text-align: center;

    /* Spacing below the heading and its pseudo-separator */
    padding-bottom: 1.5em; /* INCREASED: Generous space below the heading (and its separator) */
    position: relative; /* Needed for the ::after pseudo-element positioning */
}

/* --- Separator as a pseudo-element under headings --- */
/* This will create the line under the heading, adjusting to its width. */
h1::after,
h2::after,
h3::after,
h4::after,
h5::after,
h6::after {
    content: ''; /* Required for pseudo-elements */
    display: block; /* Makes the pseudo-element a block to create its own line */
    width: 50%; /* Make the line half the width of the heading text. Adjust as needed. */
    min-width: 5rem; /* Ensure it's not too short for very short headings */
    height: 0.1rem; /* 1px line thickness */
    background-color: currentColor; /* Inherits the heading's text color */
    opacity: 0.7; /* Makes the separator line lighter as requested */
    margin: 0.5em auto 0; /* CENTERS the line under the heading, adds space from heading */
}

/* --- Heading Font Sizes --- */
h1 { font-size: 3em; }
h2 { font-size: 2.5em; }
h3 { font-size: 2em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1em; }


/* --- Typography & Spacing for Body Text --- */

p, ul, ol, li, a {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 1.6rem; /* **FIXED:** 16px -> 1.6rem. This is a standard readable desktop body font size. */
    line-height: 1.6; /* Good readability */
    margin-bottom: 1em; /* Consistent bottom spacing for paragraphs */
    margin-top: 0; /* Prevents extra top margin from interfering with spacing from separator */
    max-width: 70rem; /* **Adjusted for Desktop Width:** 700px -> 70rem. This ensures text isn't too wide or too narrow. */
    margin-left: auto; /* Centers the paragraph block itself within the parent */
    margin-right: auto; /* Centers the paragraph block itself within the parent */
    text-align: center; /* **FIXED:** Centers the *entire paragraph block*, then the text aligns within it. */
    /* If you want the *text within* the paragraph to be left-aligned (ragged right), change text-align: left */
    /* but if the block is centered, text will still appear centered on the page. */
}
.maintext{
    font-size: 1.15rem;
    font-weight: bold;
    color: #ddd;
    margin-bottom: 0.8rem;

}


.subtext{
    font-size: 0.95rem;
    font-style: italic;
    color: #777;
}

.lowertext{
    font-size: 1rem;
    line-height: 1.5;
    font-weight: var(--font-weight-base);
    font-style: var(--font-style-base);
    text-transform: var(--text-transform-base);

}
/* --- Section and Div Spacing --- */
section {
    padding: 6rem 2rem;
    margin-bottom: 6rem;
    max-width: 100rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Ensure contents of sections are centered if they are inline */





}
/* --------------------------------------------------------------------------------------------*/
/* --- Image and Media Defaults --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 4rem auto;
}

/* --- Form Elements (Basic) --- */
input, select, textarea, button {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    padding: 1rem;
    border-radius: 0.4rem;
    margin-bottom: 2rem;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

button, input[type="submit"] {
    border: none;
    cursor: pointer;
    padding: 1.2rem 2.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}
}
#fw-section-custom-html-de1e81da-1d7b-4e53-8308-317b9bb1835d {

/* --- Root Font Size for REM Units --- */
html {
    font-size: 62.5%; /* This makes 1rem equal to 10px (base 16px * 0.625) */
}

/* --- Global Layout & Centering --- */
body {
    text-align: center; /* Centers all inline content (text, images not block) within the body */
    max-width: 120rem; /* 1200px -> 120rem. Max width for entire content area. */
    margin: 0 auto; /* Centers the body block itself on the page */
    padding: 0 2rem; /* 20px -> 2rem. Horizontal padding to prevent content from touching edges */
}

/* Ensure headings are explicitly centered (both the block and its text content) */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    text-transform: none;
    line-height: 1.2;
    /* CENTERING THE HEADING BLOCK */
    display: block; /* Make it a block element to take full available width initially */
    margin: 0 auto 0; /* Top margin (2em), **CENTERED HORIZONTALLY**, no bottom margin here */
    max-width: fit-content; /* Make the block width fit its content */
    /* Alternatively, if fit-content is problematic, give it a % width or max-width: 80rem; for content, and margin: auto */

    /* CENTERING THE TEXT WITHIN THE HEADING */
    text-align: center;

    /* Spacing below the heading and its pseudo-separator */
    padding-bottom: 1.5em; /* INCREASED: Generous space below the heading (and its separator) */
    position: relative; /* Needed for the ::after pseudo-element positioning */
}

/* --- Separator as a pseudo-element under headings --- */
/* This will create the line under the heading, adjusting to its width. */
h1::after,
h2::after,
h3::after,
h4::after,
h5::after,
h6::after {
    content: ''; /* Required for pseudo-elements */
    display: block; /* Makes the pseudo-element a block to create its own line */
    width: 50%; /* Make the line half the width of the heading text. Adjust as needed. */
    min-width: 5rem; /* Ensure it's not too short for very short headings */
    height: 0.1rem; /* 1px line thickness */
    background-color: currentColor; /* Inherits the heading's text color */
    opacity: 0.7; /* Makes the separator line lighter as requested */
    margin: 0.5em auto 0; /* CENTERS the line under the heading, adds space from heading */
}

/* --- Heading Font Sizes --- */
h1 { font-size: 3em; }
h2 { font-size: 2.5em; }
h3 { font-size: 2em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1em; }


/* --- Typography & Spacing for Body Text --- */

p, ul, ol, li, a {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 1.6rem; /* **FIXED:** 16px -> 1.6rem. This is a standard readable desktop body font size. */
    line-height: 1.6; /* Good readability */
    margin-bottom: 1em; /* Consistent bottom spacing for paragraphs */
    margin-top: 0; /* Prevents extra top margin from interfering with spacing from separator */
    max-width: 70rem; /* **Adjusted for Desktop Width:** 700px -> 70rem. This ensures text isn't too wide or too narrow. */
    margin-left: auto; /* Centers the paragraph block itself within the parent */
    margin-right: auto; /* Centers the paragraph block itself within the parent */
    text-align: center; /* **FIXED:** Centers the *entire paragraph block*, then the text aligns within it. */
    /* If you want the *text within* the paragraph to be left-aligned (ragged right), change text-align: left */
    /* but if the block is centered, text will still appear centered on the page. */
}
.maintext{
    font-size: 1.15rem;
    font-weight: bold;
    color: #ddd;
    margin-bottom: 0.8rem;

}

.subtext{
    font-size: 0.95rem;
    font-style: italic;
    color: #777;
}

.lowertext{
    font-size: 1rem;
    line-height: 1.5;
    font-weight: var(--font-weight-base);
    font-style: var(--font-style-base);
    text-transform: var(--text-transform-base);

}

.bold{font-size: 1rem;}
/* --- Section and Div Spacing --- */
section {
    padding: 6rem 2rem;
    margin-bottom: 6rem;
    max-width: 100rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Ensure contents of sections are centered if they are inline */

}
/* --------------------------------------------------------------------------------------------*/
/* --- Image and Media Defaults --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 4rem auto;
}
.narrow {
  max-width: 45rem; /* 450px */
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

/* --- Form Elements (Basic) --- */
input, select, textarea, button {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    padding: 1rem;
    border-radius: 0.4rem;
    margin-bottom: 2rem;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

button, input[type="submit"] {
    border: none;
    cursor: pointer;
    padding: 1.2rem 2.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}

.soft-divider {
  margin: 2rem auto;
  height: 1px;
  width: 60%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08), transparent);
}

.emotional-punch {
  text-align: center;
  margin: 2rem 0;
  padding-left: 1.5rem;
  font-style: italic;
  font-size: 1.1rem;
  color: #ccc;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  font-family: 'Roboto', sans-serif; /* Ensure Roboto for this text block */
}
}

#fw-section-custom-html-6d6e32e6-d810-43b4-912c-cdc4f95b84dc {

/* --- Root Font Size for REM Units --- */
html {
    font-size: 62.5%; /* This makes 1rem equal to 10px (base 16px * 0.625) */
}

/* --- Global Layout & Centering --- */
body {
    text-align: center; /* Centers all inline content (text, images not block) within the body */
    max-width: 120rem; /* 1200px -> 120rem. Max width for entire content area. */
    margin: 0 auto; /* Centers the body block itself on the page */
    padding: 0 2rem; /* 20px -> 2rem. Horizontal padding to prevent content from touching edges */
}

/* Ensure headings are explicitly centered (both the block and its text content) */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    text-transform: none;
    line-height: 1.2;
    /* CENTERING THE HEADING BLOCK */
    display: block; /* Make it a block element to take full available width initially */
    margin: 0 auto 0; /* Top margin (2em), **CENTERED HORIZONTALLY**, no bottom margin here */
    max-width: fit-content; /* Make the block width fit its content */
    /* Alternatively, if fit-content is problematic, give it a % width or max-width: 80rem; for content, and margin: auto */

    /* CENTERING THE TEXT WITHIN THE HEADING */
    text-align: center;

    /* Spacing below the heading and its pseudo-separator */
    padding-bottom: 1.5em; /* INCREASED: Generous space below the heading (and its separator) */
    position: relative; /* Needed for the ::after pseudo-element positioning */
}

/* --- Separator as a pseudo-element under headings --- */
/* This will create the line under the heading, adjusting to its width. */
h1::after,
h2::after,
h3::after,
h4::after,
h5::after,
h6::after {
    content: ''; /* Required for pseudo-elements */
    display: block; /* Makes the pseudo-element a block to create its own line */
    width: 50%; /* Make the line half the width of the heading text. Adjust as needed. */
    min-width: 5rem; /* Ensure it's not too short for very short headings */
    height: 0.1rem; /* 1px line thickness */
    background-color: currentColor; /* Inherits the heading's text color */
    opacity: 0.7; /* Makes the separator line lighter as requested */
    margin: 0.5em auto 0; /* CENTERS the line under the heading, adds space from heading */
}

/* --- Heading Font Sizes --- */
h1 { font-size: 3em; }
h2 { font-size: 2.5em; }
h3 { font-size: 2em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1em; }


/* --- Typography & Spacing for Body Text --- */

p, ul, ol, li, a {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 1.6rem; /* **FIXED:** 16px -> 1.6rem. This is a standard readable desktop body font size. */
    line-height: 1.6; /* Good readability */
    margin-bottom: 1em; /* Consistent bottom spacing for paragraphs */
    margin-top: 0; /* Prevents extra top margin from interfering with spacing from separator */
    max-width: 70rem; /* **Adjusted for Desktop Width:** 700px -> 70rem. This ensures text isn't too wide or too narrow. */
    margin-left: auto; /* Centers the paragraph block itself within the parent */
    margin-right: auto; /* Centers the paragraph block itself within the parent */
    text-align: center; /* **FIXED:** Centers the *entire paragraph block*, then the text aligns within it. */
    /* If you want the *text within* the paragraph to be left-aligned (ragged right), change text-align: left */
    /* but if the block is centered, text will still appear centered on the page. */
}
.maintext{
    font-size: 1.15rem;
    font-weight: bold;
    color: #ddd;
    margin-bottom: 0.8rem;

}


.subtext{
    font-size: 0.95rem;
    font-style: italic;
    color: #777;
}

.lowertext{
    font-size: 1rem;
    line-height: 1.5;
    font-weight: var(--font-weight-base);
    font-style: var(--font-style-base);
    text-transform: var(--text-transform-base);

}
/* --- Section and Div Spacing --- */
section {
    padding: 6rem 2rem;
    margin-bottom: 2rem;
    max-width: 100rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Ensure contents of sections are centered if they are inline */
  }
/* --------------------------------------------------------------------------------------------*/
/* --- Image and Media Defaults --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 4rem auto;
}

/* --- Form Elements (Basic) --- */
input, select, textarea, button {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    padding: 1rem;
    border-radius: 0.4rem;
    margin-bottom: 2rem;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

button, input[type="submit"] {
    border: none;
    cursor: pointer;
    padding: 1.2rem 2.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}

.fragment-grid {
  display: grid;
  /* Adjusting minmax slightly. If 760px container, and 2rem gap, 
     (760 - 4rem padding - 2*2rem gap)/3 = (760-64-64)/3 = 632/3 = ~210px per column */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Keep this, it's generally good */
  gap: 2rem;
  margin-top: 4rem;
  margin-bottom: 1rem;
}

.fragment-card {
  background-color: #222;
  border: 1px solid #444;
  padding: 1.5rem; /* This internal padding adds to the card's total width */
  border-radius: 8px;
  text-align: center;
  transition: transform 0.2s ease-in-out;
}

.fragment-card:hover {
  transform: translateY(-5px);
}

.fragment-card.flicker {
  /* Add flicker animation if desired */
}

.fragment-card .placeholder {
  background-color: #333;
  color: #bbb;
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 150px;
  margin-bottom: 1rem;
  border-radius: 4px;
}

.fragment-caption {
  font-size: 1rem;
  color: #ccc;
  margin-top: 0.5rem;
}

.fragment-caption small {
  font-size: 0.8rem;
  color: #888;
}

.fragments-notify-section p {
  margin-bottom: 1rem;
}

.fragments-sub-link {
  margin-top: auto;
  font-size: 1rem;
  opacity: 0.8;
}

.fragments-sub-link a {
  color: #fff;
  text-decoration: underline;
}
}
#fw-section-custom-html-13d40552-fd69-47af-8bd2-343058d01db9 {

body {
      margin: 0;
      background: #000;
      color: #fff;
      font-family: sans-serif;
    }

    .descent-gallery {
      background: linear-gradient(to bottom, #000 0%, #000 80%, #111 95%, #000 100%);
      color: #fff;
      font-family: sans-serif;
      height: 100vh;
      overflow: hidden;
      position: relative;
      border: 1px solid rgba(255,255,255,0.05);
      box-shadow: inset 0 0 60px rgba(0,0,0,0.4);
    }

    .gallery-piece {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      transform: scale(0.97);
      transition: opacity 1.2s ease, transform 1.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      z-index: 0;
    }

    .gallery-piece.active {
      opacity: 1;
      transform: scale(1);
      z-index: 2;
    }

    .gallery-piece img {
      max-height: 92vh;
      width: auto;
      border-radius: 6px;
      box-shadow: 0 0 80px rgba(255, 255, 255, 0.08), 0 0 120px rgba(0, 0, 0, 0.85);
      filter: brightness(0.9) contrast(1.1);
      transition: transform 10s ease;
    }

    .gallery-piece.active img {
      transform: scale(1.03);
    }

    .grain-overlay {
      pointer-events: none;
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image: url('https://www.transparenttextures.com/patterns/asfalt-dark.png');
      opacity: 0.03;
      mix-blend-mode: screen;
      animation: grainShift 8s infinite linear;
    }

    @keyframes grainShift {
      0% { transform: translate(0, 0); }
      50% { transform: translate(-5px, 5px); }
      100% { transform: translate(0, 0); }
    }

}
#fw-section-hero-1749385483 {

.button--primary {
  background-color: #ffffff;
  color: #000000;
  border: 2px solid #ffffff;
  transition: all 0.3s ease;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.button--primary:hover {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
.section-background::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0,0,0,0.6), rgba(0,0,0,0.9));
  z-index: 1;
  pointer-events: none;
}
.hero__heading--large {
  color: #FFFFFF !important;
  text-shadow: 0 0 6px rgba(0,0,0,0.5);
}
.hero__text {
  color: #CCCCCC !important;
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
}
.hero__content {
  position: relative;
  z-index: 2;
}


}





#fw-section-custom-html-7e672b8e-5ff8-4f50-8d37-1e0819832f27 {

/* --- Root Font Size for REM Units --- */
html {
    font-size: 62.5%; /* This makes 1rem equal to 10px (base 16px * 0.625) */
}

/* --- Global Layout & Centering --- */
body {
    text-align: center; /* Centers all inline content (text, images not block) within the body */
    max-width: 120rem; /* 1200px -> 120rem. Max width for entire content area. */
    margin: 0 auto; /* Centers the body block itself on the page */
    padding: 0 2rem; /* 20px -> 2rem. Horizontal padding to prevent content from touching edges */
}

/* Ensure headings are explicitly centered (both the block and its text content) */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    text-transform: none;
    line-height: 1.2;
    /* CENTERING THE HEADING BLOCK */
    display: block; /* Make it a block element to take full available width initially */
    margin: 0 auto 0; /* Top margin (2em), **CENTERED HORIZONTALLY**, no bottom margin here */
    max-width: fit-content; /* Make the block width fit its content */
    /* Alternatively, if fit-content is problematic, give it a % width or max-width: 80rem; for content, and margin: auto */

    /* CENTERING THE TEXT WITHIN THE HEADING */
    text-align: center;

    /* Spacing below the heading and its pseudo-separator */
    padding-bottom: 1.5em; /* INCREASED: Generous space below the heading (and its separator) */
    position: relative; /* Needed for the ::after pseudo-element positioning */
}

/* --- Separator as a pseudo-element under headings --- */
/* This will create the line under the heading, adjusting to its width. */
h1::after,
h2::after,
h3::after,
h4::after,
h5::after,
h6::after {
    content: ''; /* Required for pseudo-elements */
    display: block; /* Makes the pseudo-element a block to create its own line */
    width: 50%; /* Make the line half the width of the heading text. Adjust as needed. */
    min-width: 5rem; /* Ensure it's not too short for very short headings */
    height: 0.1rem; /* 1px line thickness */
    background-color: currentColor; /* Inherits the heading's text color */
    opacity: 0.7; /* Makes the separator line lighter as requested */
    margin: 0.5em auto 0; /* CENTERS the line under the heading, adds space from heading */
}

/* --- Heading Font Sizes --- */
h1 { font-size: 3em; }
h2 { font-size: 2.5em; }
h3 { font-size: 2em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1em; }


/* --- Typography & Spacing for Body Text --- */

p, ul, ol, li, a {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 1.6rem; /* **FIXED:** 16px -> 1.6rem. This is a standard readable desktop body font size. */
    line-height: 1.6; /* Good readability */
    margin-bottom: 1em; /* Consistent bottom spacing for paragraphs */
    margin-top: 0; /* Prevents extra top margin from interfering with spacing from separator */
    max-width: 70rem; /* **Adjusted for Desktop Width:** 700px -> 70rem. This ensures text isn't too wide or too narrow. */
    margin-left: auto; /* Centers the paragraph block itself within the parent */
    margin-right: auto; /* Centers the paragraph block itself within the parent */
    text-align: center; /* **FIXED:** Centers the *entire paragraph block*, then the text aligns within it. */
    /* If you want the *text within* the paragraph to be left-aligned (ragged right), change text-align: left */
    /* but if the block is centered, text will still appear centered on the page. */
}
.maintext{
    font-size: 1.15rem;
    font-weight: bold;
    color: #ddd;
    margin-bottom: 0.8rem;

}


.subtext{
    font-size: 0.95rem;
    font-style: italic;
    color: #777;
}

.lowertext{
    font-size: 1rem;
    line-height: 1.5;
    font-weight: var(--font-weight-base);
    font-style: var(--font-style-base);
    text-transform: var(--text-transform-base);

}

.bold{
 font-weight: bold;
}

/* --- Section and Div Spacing --- */
section {
    padding: 6rem 2rem;
    margin-bottom: 6rem;
    max-width: 100rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Ensure contents of sections are centered if they are inline */





}
/* --------------------------------------------------------------------------------------------*/
/* --- Image and Media Defaults --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 4rem auto;
}

/* --- Form Elements (Basic) --- */
input, select, textarea, button {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    padding: 1rem;
    border-radius: 0.4rem;
    margin-bottom: 2rem;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

button, input[type="submit"] {
    border: none;
    cursor: pointer;
    padding: 1.2rem 2.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}
}

#fw-section-hero-a14d48ba-6f0a-457e-be07-35946b0a4422 {

.button--primary {
  background-color: #ffffff;
  color: #000000;
  border: 2px solid #ffffff;
  transition: all 0.3s ease;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.button--primary:hover {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
.section-background::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0,0,0,0.6), rgba(0,0,0,0.9));
  z-index: 1;
  pointer-events: none;
}
.hero__heading--large {
  color: #FFFFFF !important;
  text-shadow: 0 0 6px rgba(0,0,0,0.5);
}
.hero__text {
  color: #CCCCCC !important;
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
}
.hero__content {
  position: relative;
  z-index: 2;
}


}
#fw-section-hero-fbdee867-453c-417a-ae50-7e3dd383897a {

.button--primary {
  background-color: #ffffff;
  color: #000000;
  border: 2px solid #ffffff;
  transition: all 0.3s ease;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.button--primary:hover {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
.section-background::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0,0,0,0.6), rgba(0,0,0,0.9));
  z-index: 1;
  pointer-events: none;
}
.hero__heading--large {
  color: #FFFFFF !important;
  text-shadow: 0 0 6px rgba(0,0,0,0.5);
}
.hero__text {
  color: #CCCCCC !important;
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
}
.hero__content {
  position: relative;
  z-index: 2;
}


}
#fw-section-custom-html-9f764d21-9d5f-4835-b57b-0c59d4664ce2 {

#joinSection {
  max-width: 720px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
  font-family: 'Helvetica Neue', sans-serif;
}

#joinSection h2 {
  font-size: 3rem;
  color: #fff;
  margin-bottom: 1rem;
}

#joinSection p {
  font-size: 1.1rem;
  color: #aaa;
  margin-bottom: 3rem;
  line-height: 1.6;
}

#joinForm {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #ccc;
}

#joinForm label {
  text-align: left;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #888;
}

#joinForm input,
#joinForm textarea {
  background-color: #111;
  color: #eee;
  border: 1px solid #333;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 1rem;
}

#joinForm button {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 30px;
  padding: 0.8rem 2rem;
  max-width: max-content;
  transition: all 0.3s ease;
  margin: 2rem auto 0;
  cursor: pointer;
}

#joinForm button:hover {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

#formResponse {
  text-align: center;
  font-size: 0.95rem;
  margin-top: 24px;
  color: #aaa;
  font-style: italic;
}

}






#fw-section-custom-html-a2ace9d8-d0db-4b90-b514-7d890215d33c {

/* --- Root Font Size for REM Units --- */
html {
    font-size: 62.5%; /* This makes 1rem equal to 10px (base 16px * 0.625) */
}

/* --- Global Layout & Centering --- */
body {
    text-align: center; /* Centers all inline content (text, images not block) within the body */
    max-width: 120rem; /* 1200px -> 120rem. Max width for entire content area. */
    margin: 0 auto; /* Centers the body block itself on the page */
    padding: 0 2rem; /* 20px -> 2rem. Horizontal padding to prevent content from touching edges */
}

/* Ensure headings are explicitly centered (both the block and its text content) */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    text-transform: none;
    line-height: 1.2;
    /* CENTERING THE HEADING BLOCK */
    display: block; /* Make it a block element to take full available width initially */
    margin: 0 auto 0; /* Top margin (2em), **CENTERED HORIZONTALLY**, no bottom margin here */
    max-width: fit-content; /* Make the block width fit its content */
    /* Alternatively, if fit-content is problematic, give it a % width or max-width: 80rem; for content, and margin: auto */

    /* CENTERING THE TEXT WITHIN THE HEADING */
    text-align: center;

    /* Spacing below the heading and its pseudo-separator */
    padding-bottom: 1.5em; /* INCREASED: Generous space below the heading (and its separator) */
    position: relative; /* Needed for the ::after pseudo-element positioning */
}

/* --- Separator as a pseudo-element under headings --- */
/* This will create the line under the heading, adjusting to its width. */
h1::after,
h2::after,
h3::after,
h4::after,
h5::after,
h6::after {
    content: ''; /* Required for pseudo-elements */
    display: block; /* Makes the pseudo-element a block to create its own line */
    width: 50%; /* Make the line half the width of the heading text. Adjust as needed. */
    min-width: 5rem; /* Ensure it's not too short for very short headings */
    height: 0.1rem; /* 1px line thickness */
    background-color: currentColor; /* Inherits the heading's text color */
    opacity: 0.7; /* Makes the separator line lighter as requested */
    margin: 0.5em auto 0; /* CENTERS the line under the heading, adds space from heading */
}

/* --- Heading Font Sizes --- */
h1 { font-size: 3em; }
h2 { font-size: 2.5em; }
h3 { font-size: 2em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1em; }


/* --- Typography & Spacing for Body Text --- */

p, ul, ol, li, a {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 1.6rem; /* **FIXED:** 16px -> 1.6rem. This is a standard readable desktop body font size. */
    line-height: 1.6; /* Good readability */
    margin-bottom: 1em; /* Consistent bottom spacing for paragraphs */
    margin-top: 0; /* Prevents extra top margin from interfering with spacing from separator */
    max-width: 70rem; /* **Adjusted for Desktop Width:** 700px -> 70rem. This ensures text isn't too wide or too narrow. */
    margin-left: auto; /* Centers the paragraph block itself within the parent */
    margin-right: auto; /* Centers the paragraph block itself within the parent */
    text-align: center; /* **FIXED:** Centers the *entire paragraph block*, then the text aligns within it. */
    /* If you want the *text within* the paragraph to be left-aligned (ragged right), change text-align: left */
    /* but if the block is centered, text will still appear centered on the page. */
}
.maintext{
    font-size: 1.15rem;
    font-weight: bold;
    color: #ddd;
    margin-bottom: 0.8rem;

}


.subtext{
    font-size: 0.95rem;
    font-style: italic;
    color: #777;
}

.lowertext{
    font-size: 1rem;
    line-height: 1.5;
    font-weight: var(--font-weight-base);
    font-style: var(--font-style-base);
    text-transform: var(--text-transform-base);

}
/* --- Section and Div Spacing --- */
section {
    padding: 6rem 2rem;
    margin-bottom: 6rem;
    max-width: 100rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Ensure contents of sections are centered if they are inline */





}
/* --------------------------------------------------------------------------------------------*/
/* --- Image and Media Defaults --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 4rem auto;
}

/* --- Form Elements (Basic) --- */
input, select, textarea, button {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    padding: 1rem;
    border-radius: 0.4rem;
    margin-bottom: 2rem;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

button, input[type="submit"] {
    border: none;
    cursor: pointer;
    padding: 1.2rem 2.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
}
}
#fw-section-custom-html-d2c64b33-7617-4b8b-9b9f-dbc06f306fcd {

body {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #fff;
  font-family: 'Helvetica Neue', sans-serif;
}

.tiers-section {
  max-width: 700px;
  margin: 4rem auto;
  padding: 2rem;
  line-height: 1.6;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
}

.tiers-quote {
  font-style: italic;
  color: #ccc;
  border-left: 4px solid #666;
  padding-left: 1rem;
  margin-bottom: 2rem;
  text-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.tiers-intro {
  color: #bbb;
  margin-bottom: 3rem;
  font-size: 1.05rem;
}

.tiers-heading {
  font-size: 1.4rem;
  font-weight: bold;
  border-bottom: 1px solid #444;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ccc;
}

.tier {
  margin-bottom: 2.5rem;
  padding: 1rem 1rem 1.5rem;
  background: #111;
  border-radius: 0.5rem;
  box-shadow: 0 0 30px rgba(255,255,255,0.02);
}

.tier h3 {
  font-weight: bold;
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
  color: #fff;
}

.tier p {
  color: #aaa;
  font-size: 0.95rem;
}

.tier strong {
  color: #fff;
}

.tiers-subheading {
  font-weight: bold;
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: #ccc;
  border-top: 1px solid #333;
  padding-top: 1rem;
}

.tiers-explainer {
  color: #aaa;
  font-size: 0.95rem;
  line-height: 1.6;
}

}
#fw-section-custom-html-efd87a77-00f7-4d15-9c2a-00c37ecc6154 {

.descent-gallery {
    background: #000;
    color: #fff;
    font-family: sans-serif;
    height: 100vh;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 1px solid rgba(255,255,255,0.04);
    border-right: 1px solid rgba(255,255,255,0.04);
    box-shadow: inset 0 0 60px rgba(0,0,0,0.4);
    background: linear-gradient(to bottom, #000 0%, #000 80%, #111 95%, #000 100%);
  }

  .gallery-piece {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 1.2s ease, transform 1.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 0;
  }

  .gallery-piece.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
  }

  .gallery-piece img {
    max-width: 880px;
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 0 80px rgba(255, 255, 255, 0.08), 0 0 120px rgba(0, 0, 0, 0.85);
    filter: brightness(0.85) contrast(1.1);
    transition: transform 10s ease;
  }

  .gallery-piece.active img {
    transform: scale(1.03);
  }

  .caption::before {
    content: "";
    display: block;
    width: 2px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    margin: 0 auto 1rem;
  }

  .caption {
    margin-top: 2rem;
    text-align: center;
    max-width: 680px;
    color: #ccc;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  }

  .caption h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
  }

  .caption p {
    font-size: 1rem;
    font-style: italic;
    margin: 0;
  }

  .emotional-pitch {
  color: #fff;
  background: #000;
    margin-top: 3.5rem;
  padding: 3rem 2rem;
  font-size: 2rem;
  text-align: center;
  font-style: italic;
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(0,0,0,0.6);
}


  .emotional-lead {
    padding: 4rem 1rem 5rem;
    text-align: center;
    color: #999;
    font-style: italic;
    font-size: 1.6rem;
    max-width: 760px;
    margin: 0 auto;
    text-shadow: 0 0 6px rgba(0,0,0,0.6);
  }

  .echo-finale {
    padding: 6rem 1rem 7rem;
    text-align: center;
    font-size: 2.3rem;
    font-style: italic;
    color: #aaa;
    text-shadow: 0 0 6px rgba(0,0,0,0.5);
  }

  .echo-finale span {
    color: #ccc;
  }

  .grain-overlay {
    pointer-events: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('https://www.transparenttextures.com/patterns/asfalt-dark.png');
    opacity: 0.03;
    mix-blend-mode: screen;
    animation: grainShift 8s infinite linear;
  }

  @keyframes grainShift {
    0% { transform: translate(0, 0); }
    50% { transform: translate(-5px, 5px); }
    100% { transform: translate(0, 0); }
  }

  @media (max-width: 768px) {
    .gallery-piece {
      display: flex !important;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      position: relative !important;
      opacity: 1 !important;
      transform: none !important;
      height: auto !important;
      margin-bottom: 6rem;
      padding: 2rem 1rem;
    }

    .gallery-piece img {
      margin-bottom: 1.5rem;
      box-shadow: 0 0 40px rgba(0,0,0,0.6);
    }

    .caption::before {
      display: none;
    }

    .caption {
      margin-top: 0;
      color: #aaa;
      text-shadow: none;
    }
  }
/* Normalize text styles for emotional blocks */
.emotional-pitch,
.emotional-lead,
.echo-finale {
  font-family: inherit;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* Global spacing consistency for emotional sections */
.emotional-pitch {
  padding: 5rem 1.5rem 3rem;
  font-size: 1.8rem;
}

.emotional-lead {
  padding: 3rem 1.5rem 4rem;
  font-size: 1.3rem;
  color: #bbb;
}

.echo-finale {
  padding: 6rem 1rem 6rem;
  font-size: 1.4rem;
  font-weight: 400;
  font-style: italic;
  color: #999;
  max-width: 680px;
  margin: 0 auto;
}
.sig{font-size: 11px;}

}