/* =========================================================
   LUMIERE ARC — HOME PAGE STYLES
   Homepage-only layout and responsive styling
   ========================================================= */

.hero {

      position: relative;

      width: 100%;

      aspect-ratio: 2.4 / 1;

      background: var(--cream-light);

      overflow: hidden;

    }

.hero-slides {

      position: absolute;

      inset: 0;

      z-index: 0;

      overflow: hidden;

    }

.hero-image {

      position: absolute;

      top: 0;
      left: 0;

      width: 100%;

      height: auto;

      max-width: none;

      opacity: 0;

      visibility: hidden;

      transition:
        opacity 1.2s ease,
        visibility 1.2s ease;

    }

.hero-image.active {

      opacity: 1;

      visibility: visible;

    }

.hero-overlay {

      position: absolute;

      inset: 0;

      z-index: 1;

      pointer-events: none;

      background:
        linear-gradient(
          90deg,

          rgba(247, 242, 235, 0.995) 0%,

          rgba(247, 242, 235, 0.985) 16%,

          rgba(247, 242, 235, 0.94) 24%,

          rgba(247, 242, 235, 0.80) 32%,

          rgba(247, 242, 235, 0.58) 40%,

          rgba(247, 242, 235, 0.31) 48%,

          rgba(247, 242, 235, 0.12) 57%,

          rgba(247, 242, 235, 0.025) 68%,

          rgba(247, 242, 235, 0) 100%
        );

    }

.hero-content {

      position: absolute;

      top: 50%;

      left:
        clamp(
          55px,
          6.5vw,
          125px
        );

      z-index: 2;

      width:
        min(
          620px,
          42vw
        );

      transform:
        translateY(-32%);

    }

.hero-title {

      margin: 0;

      color: #403a34;

      font-family: var(--serif);

      font-size:
        clamp(
          48px,
          4.25vw,
          74px
        );

      font-weight: 500;

      line-height: 0.92;

    }

.hero-title span {

      display: block;

      margin-top: 13px;

      color: var(--brass);

      font-style: italic;

      font-weight: 400;

    }

.hero-description {

      width:
        min(
          470px,
          100%
        );

      margin:
        29px 0 28px;

      padding-top: 20px;

      border-top:
        1px solid
        rgba(168, 121, 42, 0.42);

      color: #4d4842;

      font-size: 14px;

      line-height: 1.65;

    }

.primary-button {

      min-width: 178px;

      height: 47px;

      padding: 0 24px;

      display: inline-flex;

      align-items: center;

      justify-content: center;

      background:
        linear-gradient(
          135deg,
          var(--brass-light),
          var(--brass-dark)
        );

      color: #ffffff;

      font-size: 10.5px;

      font-weight: 500;

      letter-spacing: 0.08em;

      text-transform: uppercase;

    }

.services {

      position: relative;

      background: var(--cream-light);

      border-top:
        1px solid
        rgba(96, 73, 40, 0.13);

    }

.services-heading {

      padding:
        34px 24px 36px;

      text-align: center;

      border-bottom:
        1px solid
        rgba(96, 73, 40, 0.12);

    }

.eyebrow {

      margin: 0 0 5px;

      color: var(--brass);

      font-size: 10px;

      font-weight: 500;

      letter-spacing: 0.16em;

      text-transform: uppercase;

    }

.services-heading h2 {

      margin: 0;

      color: #49423a;

      font-family: var(--serif);

      font-size:
        clamp(
          31px,
          2.45vw,
          43px
        );

      font-weight: 500;

      line-height: 1;

    }

.services-intro {

      max-width: 650px;

      margin: 13px auto 0;

      color: #625c55;

      font-size: 10.5px;

      line-height: 1.7;

    }

.services-link {

      margin-top: 15px;

      display: inline-flex;

      align-items: center;

      gap: 8px;

      color: var(--brass);

      font-size: 9px;

      font-weight: 500;

      letter-spacing: 0.09em;

      text-transform: uppercase;

      transition:
        color 0.25s ease,
        transform 0.25s ease;

    }

.services-link:hover {

      color: var(--brass-dark);

      transform: translateX(3px);

    }

.heading-diamond {

      position: absolute;

      bottom: -4px;

      left: 50%;

      width: 7px;
      height: 7px;

      background: var(--cream-light);

      border:
        1px solid
        var(--brass-light);

      transform:
        translateX(-50%)
        rotate(45deg);

    }

.feature-strip {

      display: grid;

      grid-template-columns:
        repeat(3, 1fr);

      gap: 18px;

      padding:
        18px
        clamp(32px, 6vw, 120px);

      background:
        linear-gradient(
          180deg,
          #5c5141,
          #4b4338
        );

    }

.feature-card {

      position: relative;

      min-height: 178px;

      display: flex;

      align-items: center;

      padding: 30px;

      overflow: hidden;

      isolation: isolate;

      background: #625746;

    }

.feature-image {

      position: absolute;

      inset: 0;

      z-index: -2;

      width: 100%;
      height: 100%;

      object-fit: cover;

    }

.feature-overlay {

      position: absolute;

      inset: 0;

      z-index: -1;

      background:
        linear-gradient(
          90deg,
          rgba(64, 55, 44, 0.95) 0%,
          rgba(64, 55, 44, 0.86) 41%,
          rgba(64, 55, 44, 0.36) 63%,
          rgba(64, 55, 44, 0.1) 100%
        );

    }

.feature-content {

      width: 48%;

      min-width: 190px;

      color: #ffffff;

    }

.feature-content h3 {

      margin: 0 0 5px;

      color: #f6eee2;

      font-family: var(--serif);

      font-size:
        clamp(
          25px,
          2vw,
          34px
        );

      font-weight: 400;

    }

.feature-content p {

      margin: 0 0 14px;

      color:
        rgba(255, 255, 255, 0.9);

      font-size: 10px;

      line-height: 1.55;

    }

.feature-content a {

      display: inline-flex;

      align-items: center;

      gap: 9px;

      color: #e2c087;

      font-size: 9px;

      font-weight: 500;

      letter-spacing: 0.07em;

      text-transform: uppercase;

    }

@media (max-width: 1200px) {

.hero-content {

        left: 52px;

        width: 46vw;

      }

.feature-strip {

        padding:
          18px 34px;

      }

}

@media (max-width: 900px) {

.hero {

        width: 100%;

        aspect-ratio: auto;

        min-height: 690px;

      }

.hero-image {

        position: absolute;

        top: 0;
        left: 0;

        width: 100%;

        height: auto;

      }

.hero-overlay {

        background:
          linear-gradient(
            180deg,

            rgba(247, 242, 235, 0.02) 0%,

            rgba(247, 242, 235, 0.08) 30%,

            rgba(247, 242, 235, 0.72) 57%,

            rgba(247, 242, 235, 0.98) 75%,

            rgba(247, 242, 235, 1) 100%
          );

      }

.hero-content {

        top: auto;

        bottom: 45px;

        left: 0;

        width: 100%;

        padding:
          0 28px;

        text-align: center;

        transform: none;

      }

.hero-description {

        margin:
          24px auto;

      }

.services-heading {

        padding:
          32px 26px 34px;

      }

.feature-strip {

        grid-template-columns:
          1fr;

        padding: 18px;

      }

}

@media (max-width: 520px) {

.hero-title {
        font-size: 47px;
      }

.hero-description {
        font-size: 12px;
      }

.services-heading h2 {
        font-size: 31px;
      }

.heading-diamond {
        display: none;
      }

.feature-content {
        width: 66%;
      }

}