/* Index Header */

.index-header {background-color:var(--black);}

.index-header .carousel {padding-top:8rem;}
@media (min-width: 768px) {.index-header .carousel {padding-top:12rem;}}

.marquee {
    /* knobs you'll actually touch */
    --tile-w: 30rem;     /* tile width  */
    --tile-h: 21rem;     /* tile height */
    --gap: 2rem;         /* space between tiles */
    --speed: 90s;        /* lower = faster. Both rows share this. */
    --radius: 1.4rem;      /* tile corner rounding */

    overflow: hidden;
    /* soft fade on the left & right edges — delete these two lines for hard edges */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .marquee + .marquee { margin-top: var(--gap); }  /* space between the two rows */

  .marquee__track {
    display: flex;
    width: max-content;                 /* let the row be as wide as its contents */
    animation: scroll-left var(--speed) linear infinite;
  }

  /* the reverse row travels the other way */
  .marquee--reverse .marquee__track {animation-name: scroll-right;}

  .marquee__item {
    flex: 0 0 auto;
    /* width: var(--tile-w); */
    height: var(--tile-h);
    margin-right: var(--gap);           /* spacing lives on the tile, keeps -50% exact */
    border-radius: var(--radius);
    overflow: hidden;
  }

  .marquee__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @keyframes scroll-left  {from {transform: translateX(0);} to {transform: translateX(-50%);}}
  @keyframes scroll-right {from {transform: translateX(-50%);} to {transform: translateX(0);}}

  /* accessibility: hold still for anyone who asked to reduce motion */
  @media (prefers-reduced-motion: reduce) {.marquee__track { animation: none; }}

  /* smaller tiles on phones */
  @media (max-width: 640px) {.marquee { --tile-w: 200px; --tile-h: 140px; --gap: 12px; }}

  .index-header h1 {color:var(--white); margin-top:-16rem; text-transform:uppercase; font-size:3.1rem; padding-bottom:20rem;}
  @media (min-width: 768px) {.index-header h1 {margin-top:-27.13rem; font-size:7rem; padding-bottom:22rem;}}


  /* Index Info */

  .index-info {background-color:var(--black); padding:2rem 0 9rem 0;}

  .index-info h2 {color:var(--white); font-size:2.5rem; width:100%;}
  @media (min-width: 768px) {.index-info h2 {font-size:3.25rem; width:70%;}}

  .index-info .tile h5 {color:var(--white); font-size:1.8rem; margin-top:4rem;}

  /*-- Design Without Compromise --*/

  .dwc {position:relative; padding:4rem 0rem;}
  @media (min-width: 768px) {.dwc {position:relative; padding:8rem 3rem;}}

  .dwc img {position: absolute; top:0%; right:0%; width:100%; height:auto;}

  .dwc p {width:90%;}

  .dwc iframe {border:none; width: 100%; aspect-ratio: 16 / 9.27; height: auto; margin-bottom:2rem;}
  @media (min-width: 768px) {.dwc iframe {width: 95%; border:var(--white) 1rem solid;}}

  /*-- Our Services --*/

  .services {position:relative; padding:5rem 0rem;}
  @media (min-width: 768px) {.services {padding:5rem;}}

    .services img {position:absolute; top:0; left:0;}

    .services .title {margin-bottom:4.5rem;}

      .services .title h2 {width:100%; margin:auto;}
      @media (min-width: 768px) { .services .title h2 {width:85%; margin:auto;}}

    .services .tile {margin:0 1.5rem 5rem 1.5rem; background-color:var(--white); padding:3rem; border:var(--black) solid .2rem;}

      .services .tile h5 {font-weight:700; font-size:2rem; margin-bottom:1.25rem;}
      @media (min-width: 768px) {.services .tile h5 {font-weight:700; font-size:1.8rem;}}

      .services .tile p {width:100%; margin:0 auto 2rem auto; font-size:1.7rem;}
      @media (min-width: 768px) {.services .tile p {font-size:1.6rem;}}

  /* Working With Us */

  .working {background-color:var(--black); padding:7rem 0rem;}
  @media (min-width: 768px) {.working {padding:8rem 3rem;}}

  .working h2, .working h5, .working p, .working a {color:var(--white);}

  .working h2 {margin-bottom:1.75rem; margin-top:1.5rem;}

  .working a {font-size:1.7rem; text-transform:uppercase; font-weight:600;}
  @media (min-width: 768px) {.working a {font-size:1.4rem;}}

  .working .imgbox {margin-top:5rem;}
  @media (min-width: 768px) {.working .imgbox {margin-top:7rem;}}

  .working .imgbox img {width:100%; height:auto;}

  /*-- About --*/

  .about {background-color:var(--black); padding:6rem 0;}
  @media (min-width: 768px) {.about {padding:10rem 0;}}

    .about h2 {color:var(--white); width:100%; margin:0 auto 2rem auto;}
    @media (min-width: 768px) {.about h2 {width:50%;}}

    .about p {color:var(--white); width:100%; margin:auto; margin-bottom:4rem;}
    @media (min-width: 768px) {.about p {width:50%;}}

    .about iframe {border:none; width: 100%; aspect-ratio: 16 / 9; height: auto; margin-bottom:3rem;}
    @media (min-width: 768px) {.about iframe {width: 75%; border:var(--white) 1rem solid; margin-bottom:0rem;}}

  /*-- Leadership --*/

  .leadership {padding:6rem 0rem; background-color:var(--grey)}
  @media (min-width: 768px) {.leadership {padding:10rem 5rem;}}

    .leadership img {width:100%; height:auto; margin-bottom:1.5rem;}
    @media (min-width: 768px) {.leadership img {width:90%; margin-bottom:0;}}

    .leadership .textbox h3 {font-size:2.8rem}
    @media (min-width: 768px) {.leadership .textbox h3 {font-size:3.6rem}}

    .leadership .textbox h5 {font-weight:600;}

    .leadership .greg {margin-bottom:8rem;}

      .leadership .katie .imgbox {text-align:right;}

  /*-- Team --*/

  .team {padding:6rem 1.5rem;}
  @media (min-width: 768px) {.team {padding:10rem 15rem;}}

  .team .title {margin-bottom:5rem;}

  .team .tile {margin-bottom:3rem;}
   @media (min-width: 768px) {.team .tile {margin-bottom:0;}}

    .team .tile img {width:100%; height:auto; margin-bottom:1.5rem;}

    .team .tile h3 {font-size:2.5rem}
      @media (min-width: 768px) {.team .tile h3 {font-size:3rem}}

/*-- Value Prop --*/

.value {padding:10rem 0; background-color:var(--grey)}

.value .title h2 {width:85%; margin:0 auto 5rem auto;}

.value .tilebox {padding:0 2rem;}
@media (min-width: 768px) {.value .tilebox {padding:0 10rem;}}

.value .tile {margin-bottom:3rem;}
@media (min-width: 768px) {.value .tile {margin-bottom:0;}}

.value .tile img {height:5rem; width:auto; margin-bottom:2rem;}

.value .tile h5 {font-weight:600; font-size:1.8rem;}
@media (min-width: 768px) {.value .tile h5 {font-size:1.7rem;}}

/*-- Process Intro --*/

.process-intro {padding:.5rem 2rem 4rem 2rem;}
@media (min-width: 768px) {.process-intro {padding:8rem 6rem;}}

.process-intro p {font-size:1.8rem; width:100%; margin-top:2rem;}
@media (min-width: 768px) {.process-intro p {font-size:2.5rem; width:85%; margin-top:2rem;}}


/*-- Signature Process --*/

.process {background-color:var(--black); padding:6rem 2rem;}
@media (min-width: 768px) {.process {padding:4rem 10rem;}}

.process .row {margin:6rem 0;}

.process .textbox {margin-top:-3rem;}

.process .second .textbox {margin-left:0;}
@media (min-width: 768px) {.process .second .textbox {margin-left:3rem;}}

.process span, .process h5, .process p {color:var(--white);}

.process span {font-size:11rem; opacity:.15; font-weight:600;}

.process h5 {margin-top:-6.5rem; margin-bottom:2rem; font-size:1.7rem; font-weight:600;}

.process p {width:95%;}

.process iframe {border:none; width: 100%; aspect-ratio: 16 / 9; height: auto; margin-bottom:3rem;}
@media (min-width: 768px) {.process iframe {width: 100%; border:var(--white) 1rem solid; margin-bottom:0rem;}}


/*-- Rendering Experience Header --*/

.rendering-header {background-color:var(--black); padding:13rem 0rem 5rem 0rem;}
@media (min-width: 768px) {.rendering-header {padding:13rem 2rem 8rem 2rem;}}

.rendering-header h5, .rendering-header h1, .rendering-header p {color:var(--white);}

.rendering-header .textbox {margin-bottom:5rem;}
@media (min-width: 768px) {.rendering-header .textbox {margin-bottom:0rem;}}

.rendering-header h1 {font-size:3.8rem; width:100%; line-height:1.1;}
@media (min-width: 768px) {.rendering-header h1 {font-size:5.2rem; width:90%;}}

.rendering-header p {width:100%;}
@media (min-width: 768px) {.rendering-header p {width:85%;}}

.rendering-header iframe {border:none; width: 100%; aspect-ratio: 16 / 9.24; height: auto; margin-bottom:3rem;}
@media (min-width: 768px) {.rendering-header iframe {width: 100%; border:var(--white) 1rem solid; margin-bottom:0rem;}}


/*-- Rendering Experience Options --*/

.re-options {background-color:var(--black); padding:4rem 2rem;}
@media (min-width: 768px) {.re-options {padding:4rem 10rem;}}

.re-options .row {margin:6rem 0;}

.re-options .second .textbox {margin-left:0;}
@media (min-width: 768px) {.re-options .second .textbox {margin-left:3rem;}}

.re-options span, .re-options h3, .re-options p {color:var(--white);}

.re-options span {font-size:11rem; opacity:.15; font-weight:600;}

.re-options h5 {margin-top:-6.5rem; margin-bottom:2rem; font-size:1.7rem; font-weight:600;}

.re-options p {width:95%;}

.re-options img {width:100%; height:auto; margin-bottom:3rem}
@media (min-width: 768px) {.re-options img {width:90%; height:auto;}}

.re-options iframe {border:none; width: 100%; aspect-ratio: 16 / 9; height: auto; margin-bottom:3rem;}
@media (min-width: 768px) {.re-options iframe {width: 100%; border:var(--white) 1rem solid; margin-bottom:0rem;}}

/*-- FAQ Header --*/

.faq-header {background-color:var(--black); padding-top:12rem;}

  .faq-header .title {padding-bottom:6rem;}
          @media (min-width: 768px) {.faq-header .title {padding-bottom:8rem;}}

              .faq-header .title h1 {text-transform:uppercase; color:var(--white); font-size:3.5rem; width:100%; margin:auto;}
              @media (min-width: 768px) {.faq-header .title h1 {font-size:5.5rem; width:50%;}}

/*-- FAQ --*/

.faq {padding:4rem 0rem; background-color:var(--grey);}
@media (min-width: 768px) {.faq {padding:5rem 10rem;}}

    .faq .title {margin-bottom:2rem;}

    .faq .faqbox {margin-left:-1rem; margin-bottom:5rem;}
    @media (min-width: 768px) {.faq .faqbox {margin-left:4rem; margin-bottom:0rem;}}

    .faq .faqbox h2, .faq .faqbox .subtitle {margin-left:2rem;}

    .faq .faqbox .subtitle {margin-bottom:3rem;}

    .faq .thumbnail {
        width:105%;
        margin:1rem auto;
        padding:1.5rem 1rem 1.25rem 1rem;
        border-bottom:.2rem #c4c4c4 solid;
    }
    @media (min-width: 768px) {.faq .thumbnail {width:98%;}}

        .faq .thumbnail h3 {
            font-size:1.8rem;
            cursor:pointer;
            padding-right:1rem;
            text-transform: capitalize !important;
            font-weight:600;
        }
        @media (min-width: 768px) {.faq .thumbnail h3 {font-size:2.2rem;}}

        .faq .thumbnail h3:after {
            content: '\002B'; /* Unicode character for "plus" sign (+) */
            color: var(--black);
            float: right;
            text-decoration:none;
            font-size:1.5rem;
        }

        @media (min-width: 768px) { .faq .thumbnail h3:after {font-size:2rem;}}

        .faq .thumbnail p {
            font-size:1.8rem;
            color:#1d1819;
            margin-top:1rem;
            display:none;
        }
        @media (min-width: 768px) {.faq .thumbnail p {font-size:1.6rem;}}
    
    .faq .textbox {
        background-color:var(--pale);
        border:var(--red) 7px solid;
        border-radius:7px;
        width:100%;
        margin:auto;
        padding:4rem 3rem;;
    }

    @media (min-width: 768px) {.faq .textbox {width:60%;}}

    .faq .textbox h4 {
        font-size:2.7rem;
        line-height:1.2;
        margin-bottom:1rem;
    }

    .faq .textbox p {padding:1rem 2.5rem;}


    /*-- Start Your Project --*/
    
    .start-project {padding:6rem 3rem;}
    @media (min-width: 768px) {.start-project {padding:8rem 10rem;}}

    .start-project h4 {font-size:2.3rem; font-weight:400; margin-bottom:3rem; width:100%;}
    @media (min-width: 768px) {.start-project h4 {width:90%;}}

    .thank-you h4 {font-size:2.3rem; font-weight:400; margin-bottom:3rem; width:100%;}
    @media (min-width: 768px) {.thank-you h4 {width:70%; margin:0 auto 5rem auto;}}

    .start-project h5 {font-weight:600;}

    .start-project p {line-height:1.7;}

    .start-project ul {list-style: none;}

      .start-project ul li {font-size:2rem; margin-bottom:.5rem;}
      @media (min-width: 768px) {.start-project ul li {font-size:1.7rem; margin-bottom:.5rem;}}

        .start-project ul li a {text-decoration:none;}

    /*-- Copyright Policy --*/

    .copyright {padding:0rem 1.5rem 3rem 1.5rem;}
    @media (min-width: 768px) {.copyright {padding:16rem 15rem 8rem 15rem;}}

    .copyright h2 {margin-bottom:2rem;}

    .copyright p {font-size:2.1rem;}


    /*-- Component: Home Design Gallery --*/

.gallery {padding:8rem 2rem;}
@media (min-width: 768px) {.gallery {padding:8rem 5rem;}}

.gallery .title {margin-bottom:5rem;}

    .gallery .title h2 {width:95%; margin:auto;}
    @media (min-width: 768px) {.gallery .title h2 {width:90%; margin:auto;}}

.gallery .tile {margin-bottom:1rem;}

    .gallery .tile img {width:100%; height:auto;}

    .gallery .tile p {font-size:1.5rem;}

    .gallery .tile .name {text-transform: uppercase;}

    .gallery .tile .specs {text-align:right; text-transform: uppercase;}