/*-- Index --*/

.index-header {height:68rem; background-color:var(--black); position:relative;}

@media (min-width: 768px) {.index-header {height:60rem; background-size:cover;}}

.index-header video {
    position:relative;
    margin-top:-5rem;
    max-width: 100vw; 
    max-height:auto;
    z-index:0;
    opacity:.45;
}

@media (min-width: 768px) {.index-header video {margin-top:-5rem !important; max-height:59vw;}}

.index-header .textbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    padding: 3rem;
    border-radius: 10px;
}

@media (min-width: 768px) {.index-header .textbox {top: 53%;}}


    .index-header .textbox h1 {
        font-family:'gala', sans-serif;
        color:var(--white);
        font-size:4rem;
        line-height:1.2;
        margin-bottom:1rem;
        width:95%;
        margin:auto;
    }

    @media (min-width: 768px) {.index-header .textbox h1 {font-size:6rem; width:70%;}}

    .index-header .textbox p {padding:1rem 0 2rem 0;}

    .index-header .textbox p {
        font-family:'gravita-hum-variable', sans-serif;
        color:var(--white);
        font-size:1.6 rem;
        width:98%;
        text-decoration:none;
        margin:auto;
    }

    @media (min-width: 768px) {.index-header .textbox p {font-size:1.7rem; width:45%;}}


/*-- Logo Carousel --*/

.logos {position:relative; background-color:var(--pale); padding:4rem 0;}

    .logos .title h5 {font-size:1.6rem;}

    .logos p {font-size:1.4rem; width:60%; margin:auto;}
    @media (min-width: 768px) {.logos p {font-size:1.4rem; width:100%;}}

.logo-marquee {
    overflow: hidden;              /* hides logos outside the strip */
    width: 100%;
    padding: 2rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.logo-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 4rem;                 /* even spacing everywhere, including the wrap point */
    list-style: none;
    margin: 0;
    padding: 0;
    animation: logo-scroll 50s linear infinite;
}

.logo-track {
    will-change: transform;
    backface-visibility: hidden;
}

.logo-track li {
    flex: 0 0 auto;
    margin: 0;                 /* remove the per-item margin; gap handles it */
}

.logo-track img {
    height: 10rem;                  /* uniform logo height; width auto-scales */
    width: auto;
    display: block;
}

@keyframes logo-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* move exactly one full set */
}

/* pause when someone hovers, so they can look */
.logo-marquee:hover .logo-track {
    animation-play-state: paused;
}

/* respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
    .logo-track { animation: none; }
}


/*-- Baskets Background --*/

.baskets-bkgd {margin-top:-10rem;}
@media (min-width: 768px) {.baskets-bkgd {margin-top:-5rem;}}

.baskets-bkgd img {width:100%; height:auto;}


/*-- Stories --*/

.stories {position:relative; margin-top:-.5rem; padding:6rem 0rem;}
@media (min-width: 768px) {.stories {padding:8rem 5rem;}}

    .stories .title {margin-bottom:3rem;}

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

        .stories .title p {width:100%; margin:0 auto 2rem auto;}
        @media (min-width: 768px) {.stories .title p {width:60%; margin:0 auto 2rem auto;}}

    .stories .tile {margin-bottom:7rem; background-color:var(--light-green); border-radius:.8rem; padding:1.75rem 1.75rem 2.5rem 1.75rem ; margin:2rem 1rem;}
    @media (min-width: 768px) {.stories .tile {margin:1rem;}}
    
        .stories .tile img {width:100%; height:auto; margin-bottom:1rem;}
    
        .stories .tile h5 {color:var(--green); font-weight:700;}

        .stories .tile h4 {line-height:1.3; padding:.75rem 0;}


/*-- Collage --*/

.collage img {width:100%; height:auto; padding:1.5rem;}


/*-- About Header --*/

.about-header {height:68rem; background-color:var(--black);}

@media (min-width: 768px) {.about-header {height:60rem; background-size:cover;}}

.about-header video {
    position:relative;
    margin-top:-5rem;
    max-width: 100vw; 
    max-height:auto;
    z-index:0;
    opacity:.45;
}

@media (min-width: 768px) {.about-header video {margin-top:-5rem !important; max-height:59vw; min-width: 100vw;}}

.about-header .textbox {
    position:absolute;
    top:37%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
    padding:3rem;
}

@media (min-width: 768px) {.about-header .textbox {top:52%;  left:53%;}}

    .about-header .textbox h1 {
        font-family:'gala', sans-serif;
        color:var(--white);
        font-size:4rem;
        line-height:1.2;
        margin-bottom:1rem;
        width:95%;
    }

    @media (min-width: 768px) {.about-header .textbox h1 {font-size:6rem; width:50%;}}

    .about-header .textbox p {padding:1rem 0 2rem 0;}

    .about-header .textbox p {
        font-family:'gravita-hum-variable', sans-serif;
        color:var(--white);
        font-size:1.6rem;
        width:98%;
        text-decoration:none;
    }

    @media (min-width: 768px) {.about-header .textbox p {font-size:1.7rem; width:45%;}}


/*-- Component: History --*/

.history {position:relative; padding:6rem 1rem; background-color:var(--white);}
@media (min-width: 768px) {.history {padding:8rem 5rem;}}

    .history .title h2 {width:100%; margin:0 auto 0 auto;}
    @media (min-width: 768px) {.history .title h2 {width:60%; margin:0 auto 3rem auto;}}

    .history .row {margin-bottom:5rem;}

        .history .imgbox img {width:100%; height:auto; margin-bottom:2.5rem;}
        @media (min-width: 768px) {.history .imgbox img {margin-bottom:0; width:95%;}}

        .history .textbox h4 {font-size:3rem; width:80%; padding:1rem 0 1rem 0rem; line-height:1.2;}
        @media (min-width: 768px) {.history .textbox h4 {width:70%; padding:1rem 0 1rem 7rem;}}

        .history .textbox p {width:100%; padding-left:0rem;}
        @media (min-width: 768px) {.history .textbox p {width:90%; padding-left:0;}}

/*-- Stats --*/

.stats {margin:-4rem auto 3rem auto;}

.stats .tile {background-color:var(--pale); border-radius:.8rem; border:var(--black) .2rem solid; padding:4rem 2rem; margin:1rem;}


/*-- Leadership --*/

.leadership {padding:8rem 5rem;}

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

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

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

    .leadership .tile h5 {margin:1rem 0 .25rem 0; color:var(--green);}

    .leadership .tile h4 {margin-bottom:.75rem;}

    .leadership .tile a {color:var(--brown); font-weight:600; font-size:1.4rem;}
        .leadership .tile a:hover {color:var(--black); transition:.4s;}

/*-- Partnership Header --*/

.partner-header {background-color:var(--light-green);}

.partner-header .title {padding:15rem 0 11rem 0;}
@media (min-width: 768px) {.partner-header .title {padding:17rem 0 13rem 0;}}

.partner-header h1 {font-size:4rem; color:var(--green);}
@media (min-width: 768px) {.partner-header h1 {font-size:6rem;}}

.partner-header p {width:85%; margin:auto; font-size:1.8rem;}
@media (min-width: 768px) {.partner-header p {width:50%; margin:auto; font-size:1.8rem;}}


/*-- PGA --*/

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

    .pga img {width:100%; height:auto; margin-bottom:2rem;}
    @media (min-width: 768px) {.pga img {width:85%;}}

    .pga .textbox p {width:100%; margin-bottom:2rem;}
    @media (min-width: 768px) {.pga .textbox p {width:90%;}}

    .pga .textbox a {color:var(--black); font-size:1.4rem; font-weight:600;}
        .pga .textbox a:hover {color:var(--brown); transition:.4s;}


/*-- Partners --*/

.partners {padding:8rem 0rem;}
@media (min-width: 768px) {.partners {padding:8rem 5rem 3rem 5rem;}}

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

    .partners .title p {width:100%; margin:auto;}
    @media (min-width: 768px) {.partners .title p {width:60%; margin:auto;}}

.partners .tile {margin-bottom:5rem;}
@media (min-width: 768px) {.partners .tile {margin-bottom:5rem;;}}

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

    .partners .tile h5 {margin:1rem 0 .5rem 0; color:var(--green); font-size:1.5rem;}
    @media (min-width: 768px) {.partners .tile h5 {margin:.5rem 0; font-size:1.3rem;}}

    .partners .tile h4 {margin-bottom:.75rem;}

    .partners .tile p {font-size:1.7rem;}
    @media (min-width: 768px) {.partners .tile p {font-size:1.4rem;}}


/*-- GIFE Header --*/

.gife-header {padding:18rem 0rem 10rem 2rem;}
@media (min-width: 768px) {.gife-header {padding:18rem 8rem 10rem 8rem;}}

.gife-header h1 {font-size:4.55rem; color:var(--green); width:90%; line-height:1.2; margin-bottom:1.5rem;}
@media (min-width: 768px) {.gife-header h1 {font-size:6rem; margin-bottom:0;}}

.gife-header p {font-size:1.8rem; width:90%;}

/*-- GIFE Stories --*/

.stories-collage {margin-bottom:10rem;}

.stories-collage .tile {background-color:var(--white); border:.2rem solid var(--black); border-radius:.8rem; margin:1rem; padding:2.5rem;}

.stories-collage .tile img {height:1.6rem;}

.stories-collage .tile h4 {font-size:1.8rem; line-height:1.4; margin:.75rem 0;}

.stories-collage .tile p {margin-bottom:1rem;}

.stories-collage .tile h5 {font-weight:500;}

.stories-collage .featured-tile {margin-bottom:7rem; background-color:var(--light-green); border:.2rem solid var(--black); border-radius:.8rem; padding:1.75rem 1.75rem 2.5rem 1.75rem ; margin:2rem 1rem;}
    @media (min-width: 768px) {.stories-collage .featured-tile{margin:1rem;}}
    
        .stories-collage .featured-tile img {width:100%; height:auto; margin-bottom:1rem;}
    
        .stories-collage .featured-tile h5 {color:var(--green); font-weight:700;}

        .stories-collage .featured-tile h4 {line-height:1.3; padding:.75rem 0;}

/*-- Powertee --*/

.powertee {position:relative; padding:8rem 0;}

.powertee img {position:absolute; top:0; left:0; width:100%; height:auto;}

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

.powertee .title {margin-bottom:4rem;}

.powertee h2 {margin-bottom:1rem;}

.powertee .title p {width:100%;}
@media (min-width: 768px) {.powertee .title p {width:40%;}}

.powertee h5 {font-size:1.7rem; margin-bottom:1rem;}

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

.powertee .tile p {width:90%;}


/*-- All Grass --*/

.all-grass {position:relative; padding:6rem 1rem; background-color:var(--white);}
@media (min-width: 768px) {.all-grass {padding:8rem 5rem;}}

    .all-grass .title h2 {width:100%; margin:0 auto 0 auto;}
    @media (min-width: 768px) {.all-grass .title h2 {width:60%; margin:0 auto 3rem auto;}}

        .all-grass .imgbox img {width:100%; height:auto; margin-bottom:2.5rem;}
        @media (min-width: 768px) {.all-grass .imgbox img {margin-bottom:0; width:95%;}}

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

          .all-grass .textbox h2 {width:80%;}
          @media (min-width: 768px) {.all-grass .textbox h2 {width:100%;}}

        .all-grass .textbox p {width:100%; margin-bottom:2rem;}
        @media (min-width: 768px) {.all-grass .textbox p {width:90%;}}


/*-- Features --*/

.features {position:relative; padding:6rem 0rem; background-color:var(--white);}
@media (min-width: 768px) {.features {padding:4rem 5rem;}}

    .features .row {margin:1rem 0;}
    @media (min-width: 768px) {.features .row {margin:4rem 0;}}

        .features .imgbox img {width:100%; height:auto; margin-bottom:2.5rem;}
        @media (min-width: 768px) {.features .imgbox img {margin-bottom:0; width:95%;}}

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

          .features .textbox h2 {width:100%;}
          @media (min-width: 768px) {.features .textbox h2 {width:80%;}}

        .features .textbox p {width:100%; margin-bottom:2rem;}
        @media (min-width: 768px) {.features .textbox p {width:90%;}}

/*-- Trackman Pricing --*/

.trackman-pricing {background-color:var(--light-green); padding:8rem 0rem;}
@media (min-width: 768px) {.trackman-pricing {padding:8rem 5rem;}}

.trackman-pricing .title {margin-bottom:3rem;}

.trackman-pricing .title p {width:100%; margin:auto;}
@media (min-width: 768px) {.trackman-pricing .title p {width:60%;}}

.trackman-pricing .tile {background-color:var(--pale); border-radius:.8rem; border:var(--black) .2rem solid; padding:2rem; margin:1rem 6rem 4rem 6rem;}
@media (min-width: 768px) {.trackman-pricing .tile {margin:1rem 1rem 4rem 1rem;}}

.trackman-pricing .tile h3 {font-family:'gala', sans-serif; font-size:3.1rem; color:var(--green); line-height:1.3;}

.trackman-pricing .tile h4 {font-family:'gala', sans-serif; font-size:4.2rem; font-weight:500; color:var(--black); margin:1rem 0 0 0;}

.trackman-pricing .tile p {font-size:1.4rem;}


/*-- Component: Instruction Header // Light --*/

.instruction-header-light {position:relative; padding:12rem 0rem 8rem 0rem; background-color:var(--pale);}
@media (min-width: 768px) {.instruction-header-light {padding:18rem 5rem 8rem 5rem;}}

    .instruction-header-light .textbox h2 {width:90%; margin:1rem 0;}
    @media (min-width: 768px) {.instruction-header-light .textbox h2 {width:70%; margin:0 0 1rem 0;}}

        .instruction-header-light .imgbox img {width:100%; height:auto; margin-bottom:2.5rem;}
        @media (min-width: 768px) {.instruction-header-light .imgbox img {margin-bottom:0; width:95%;}}

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

        .instruction-header-light .textbox p {width:100%; margin-bottom:2rem;}
        @media (min-width: 768px) {.instruction-header-light .textbox p {width:90%;}}


/*-- Component: Instruction Header // Dark --*/

.instruction-header-dark {position:relative; padding:12rem 0rem 8rem 0rem; background-color:var(--green);}
@media (min-width: 768px) {.instruction-header-dark {padding:18rem 5rem 8rem 5rem;}}

    .instruction-header-dark .textbox h2 {width:90%; margin:1rem 0; color:var(--white);}
    @media (min-width: 768px) {.instruction-header-dark .textbox h2 {width:70%; margin:0 0 1rem 0;}}

        .instruction-header-dark .imgbox img {width:100%; height:auto; margin-bottom:2.5rem;}
        @media (min-width: 768px) {.instruction-header-dark .imgbox img {margin-bottom:0; width:95%;}}

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

        .instruction-header-dark .textbox p {width:100%; margin-bottom:2rem; color:var(--white);}
        @media (min-width: 768px) {.instruction-header-dark .textbox p {width:90%;}}


/*-- Repair Features --*/

.repair-features {position:relative; padding:6rem 0rem; background-color:var(--white);}
@media (min-width: 768px) {.repair-features {padding:4rem 5rem;}}

    .repair-features .row {margin:1rem 0;}
    @media (min-width: 768px) {.repair-features .row {margin:8rem 0;}}

        .repair-features .imgbox img {width:100%; height:auto; margin-bottom:2.5rem;}
        @media (min-width: 768px) {.repair-features .imgbox img {margin-bottom:0; width:95%;}}

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

          .repair-features .textbox h2 {width:100%;}
          @media (min-width: 768px) {.repair-features .textbox h2 {width:100%;}}

        .repair-features .textbox p {width:100%; margin-bottom:2rem;}
        @media (min-width: 768px) {.repair-features .textbox p {width:90%;}}

        .repair-features .textbox ul {margin-left:3rem;}

        .repair-features .textbox ul li {width:100%; margin-bottom:1rem; font-size:1.4rem;}
        @media (min-width: 768px) {.repair-features .textbox ul li {width:90%;}}


/*-- Repair Info Card --*/

.tpi {padding:8rem 3rem;}

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

.tpi .title p {width:100%; margin:auto;}
@media (min-width: 768px) {.tpi .title p {width:50%;}}

.repair-info-card {background-color:var(--light-green); border:var(--black) .2rem solid; border-radius:.8rem; padding:4rem 2rem;}
@media (min-width: 768px) {.repair-info-card {padding:5rem;}}

.repair-info-card .textbox {padding-left:0rem; margin-bottom:3rem;}
@media (min-width: 768px) {.repair-info-card .textbox {padding-left:1rem; margin-bottom:0;}}

.repair-info-card .textbox p {width:100%;}
@media (min-width: 768px) {.repair-info-card .textbox p {width:90%;}}

.repair-info-card .infobox {background-color:var(--white); border:.2rem var(--black) solid; border-radius:.8rem; margin:0 1rem; padding:2rem;}
@media (min-width: 768px) {.repair-info-card .infobox {margin:0 5rem;}}

.repair-info-card .infobox .row {padding:.75rem 0;}
@media (min-width: 768px) {.repair-info-card .infobox .row {padding:1.5rem 0;}}

.repair-info-card .infobox h5 {width:100%; color:var(--green); font-size:1.6rem;}
@media (min-width: 768px) {.repair-info-card .infobox h5 {width:100%;}}

.repair-info-card .infobox ul {list-style-type:none;}

.repair-info-card .infobox ul li {width:100%; font-size:1.7rem;}
@media (min-width: 768px) {.repair-info-card .infobox ul li {width:70%; margin-bottom:1rem; font-size:1.4rem;}}


/*-- Visit Header --*/

.visit-header {position:relative;}

.visit-header img {position:absolute; top:0; left:0; width:100%; height:auto;}

.visit-header .title {padding:15rem 1rem 10rem 1rem;}
@media (min-width: 768px) {.visit-header .title {padding:17rem 8rem 10rem 8rem;}}

.visit-header .title h1 {color:var(--white); font-size:5rem; width:100%; line-height:1.3;}
@media (min-width: 768px) {.visit-header .title h1 {font-size:6rem; width:70%;}}

.visit-header .title p {color:var(--white); margin-bottom:2.5rem; width:100%;}
@media (min-width: 768px) {.visit-header .title p {color:var(--white); margin-bottom:2.5rem; width:90%;}}

.visit-header .imgbox img {width:75%; height:auto; margin-top:15.5rem;}

/*-- Hours of Operation - Mobile --*/

.hours img {width:90%; margin:6rem auto;}

/*-- Reservation --*/

.reservation {background-color:var(--light-green); border:var(--black) .2rem solid; border-radius:.8rem; padding:5rem; margin-bottom:8rem;}

.reservation p {width:100%; margin:0 auto 2rem auto;}
@media (min-width: 768px) {.reservation p {width:60%; margin:0 auto 2rem auto;}}


/* ===== Modal ===== */
.modal-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.72);
    display:none;                       /* hidden until .open */
    align-items:center; justify-content:center;
    padding:2rem; z-index:10000;
}
.modal-overlay.open{ display:flex; }

.modal{
    position:relative;
    background:var(--pale);
    border-radius:1rem;
    box-shadow:0 25px 70px rgba(0,0,0,.45);
    width:100%; max-width:74rem;
    max-height:90vh; overflow-y:auto;   /* long bios scroll inside the card */
    padding:3.5rem;
}
.modal-close{
    position:absolute; top:1.4rem; right:1.6rem;
    background:none; border:none; cursor:pointer;
    font-size:2.2rem; line-height:1; color:var(--black);
}

.modal-card{ display:flex; gap:3.5rem; }
.modal-left{ flex:0 0 33%; }
.modal-right{ flex:1; }

.modal-photo{width:100%; height:auto; display:block; margin-bottom:1.5rem;}

.modal-name{font-family:'gala', sans-serif; text-transform:uppercase; color:var(--green); font-size:2.8rem; line-height:1; margin-bottom:.4rem;}

.modal-role{text-transform:uppercase; color:var(--brown); font-weight:700; font-size:1.5rem; margin-bottom:1rem;}
@media (min-width: 768px) {.modal-role{font-size:1.05rem;}}

.modal-divider{ border:none; border-top:1px solid #00000033; margin:1.5rem 0; }
.modal-pricing-title{
    text-transform:uppercase; font-weight:700; font-size:1.1rem;
    letter-spacing:.05rem; margin-bottom:1rem; color:var(--black);
}
.modal-pricing{ list-style:none; margin-bottom:2rem; }
.modal-pricing li{
    position:relative; padding-left:1.4rem; margin:.55rem 0;
    font-size:1.1rem; color:#2b2b2b;
}
.modal-pricing li::before{
    content:'\2022'; position:absolute; left:.3rem; color:#2b2b2b;
}
.modal-btn{display:inline-block; color:var(--brown) !important; text-transform:uppercase; font-weight:400;font-size:1.4rem;}

.modal-right img {height:3rem; width:auto; margin-bottom:2rem;}

.modal-right p{color:#2f2f2f; font-size:1.5rem; line-height:1.55; margin-bottom:1.3rem;}
@media (min-width: 768px) {.modal-right p{color:#2f2f2f; font-size:1.12rem; line-height:1.55; margin-bottom:1.3rem;}}

.modal-right p:last-child{ margin-bottom:0; }

.modal-overlay .link {color:var(--brown); font-size:1.2rem;}

/* stack the two columns on mobile */
@media (max-width:768px){
    .modal-card{ flex-direction:column; gap:2rem; }
    .modal{ padding:2rem; }
}