html { scroll-behavior: smooth;}
main { background:#fff; position:relative;z-index:10;  }
section { padding:80px 40px; }


body { font-family: Lato, sans-serif; overflow-x: hidden; color:var(--notblack);}


@media screen and (max-width:768px) {
    .content { padding:20px; }
    section { padding:40px 0; }

}

/* header ==== */
header {  z-index:50;position:fixed; width:100%; }
header::after { transition:top 0.3s ease;box-shadow: 0 0 10px rgba(0,0,0,0.2);content:"";width:100%; height:130px; background:#fff; position:absolute; top:0; left:0; z-index:-1; }
/* - not hiding any more
.scrolled header::after { top:0; } 
header h3 { color:var(--midBlue);  font-style:normal; margin-bottom:12px;  }
.scrolled header h3 { color:var(--midBlue); }
*/

  .headerLogo { position:relative; }
    .headerLogo img { transition:opacity 1s ease; position:absolute; left:0; top:26px;  }
    .headerLogo img:first-child {opacity:0;}
    .headerLogo img:last-child { opacity:1;}
/* - not hiding any more
.scrolled .headerLogo img:first-child { opacity:0;}
    .scrolled .headerLogo img:last-child { opacity:1;} 
 */   
    @media screen and (max-width:480px) {
    header::after { height:120px; }
    .headerLogo img { width:280px; left:-12px; }
}


/* backgrounds ===== */

.bgWhite { background:#fff;}
.bgDarkBlue { background:var(--darkBlue); color:#fff;  }
.bgDarkBlue h2 { color:var(--teal); }
.bgDarkBlue h3 { color:#fff; }

.bgPaleBlue { background:var(--paleBlue);   }
.bgTeal { background:var(--teal); color:#fff;   }
.bgTeal .btn { background:#fff;    }

.bgMidBlue { background:var(--MidBlue);  color:#000;   }
.bgMidBlue .btn { color:#000;   }


/* ==== colors ====== */
.teal { color:var(--teal); }
.white { color:#fff; }


/* === editable content ==== */

.editableContent h2, .editableContent h3, .editableContent h4  { margin-bottom:12px; padding-top:20px; }
.editableContent p  { margin-bottom:12px; }
.editableContent ul  { list-style:disc; padding-left:20px; }
.editableContent ul li { margin-bottom:12px;  }
.editableContent ol  { list-style:numeral; padding-left:20px; }
.editableContent ol li::marker { font-size: 24px; font-weight:900;font-style: italic; }

/* ==== tables ====== */

table { margin-bottom:20px;  }
td { padding:8px; border:1px solid #ccc; }
table td { min-width:160px;}
table th { background:var(--teal);  border:1px solid var(--teal);color:#fff;padding:8px;  }

@media screen and (max-width:500px) { 
    table td { width:50%; }
}

/* ========= ICONS ======= */

.iconList { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start; padding:0; margin-bottom:30px;  }
.iconList li { list-style:none; text-align:left;  width:33.333%; padding:10px; }





/* ====== MODAL ========= */

/* The background overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px); /* This creates the blur effect */
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    z-index: 9999;
}

/* When the modal is active */
.modal-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* The modal box */
.modal-content {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    position: relative;
    width: 90%;
    max-width: 500px;
    transform: scale(0.7); /* Starts smaller for the "pop" effect */
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

/* Close button style */
.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    cursor: pointer;
    color: #333;
}


/* === type ==== */


h1,h2,h3,h4,
.h1, .h2, .h3, .h4{  font-family: "Inter", sans-serif; font-weight:900; }
h1,h2,h3,
.h1, .h2, .h3
{ letter-spacing:-1px; }

h1, .h1 {font-size:48px;  line-height:120%; color:var(--midBlue);  }
h2, .h2 { font-size:38px;line-height:120%; color:var(--midBlue); font-style:italic;  }
h3, .h3 { font-size:24px;font-style:italic;color:var(--midBlue); }
h4, .h4 { font-size:16px; color:var(--teal); font-style:italic;  }
h5, .h5 { font-size:12px; color:var(--teal); text-transform:uppercase; letter-spacing:2px;  }
h6, .h6 { font-size:12px; color:var(--midBlue); text-transform:uppercase; }
p { font-size:16px; line-height:140%; }
blockquote { font-size:16px; line-height:140%; text-align:center; font-style:italic; }
a { color:inherit; }
h2.massive { font-size:115px; line-height:90%;  }

@media screen and (max-width:480px) {
    h1 { font-size:36px;  }
    h2, .h2 { font-size:24px;line-height:130%;  }
    h2.massive { font-size:70px;   }
.quoteLeft, .quoteRight { display:none; }
}






/* === page hero ==== */

.pageHero { width:100%; display:flex;align-items:flex-start; flex-direction:column; align-items:flex-start; justify-content:flex-end;
position: relative;  height: 50vh;  overflow: hidden; background:#333; padding:60px 60px 20px 60px; }

/* -- trying slimmer headers ----
.pageHero { height:40vh;  }
/* -- trying slimmer headers ---- */

.pageHeroContent { color:#fff;width:100%; position:relative; display:flex;  align-items:flex-end; justify-content:space-between; }
.pageHero img { width:100%; height:100%; top:100px; object-fit:cover; }
.pageHero h1 { color:#fff; z-index:10; line-height:90%;}

.homeHero {   padding:60px 60px 120px 60px;  height: 100vh;   background: rgba(12, 28, 51, 0.5); }

.homeHero h1 { font-size:77px; line-height:100%;font-style:normal; }
.homeHero h2 { color:var(--teal); }
.homeHero p  { max-width:500px; }



@media screen and (max-width:480px) {
    
.homeHero h1 { font-size:60px;  }
.homeHero { padding:60px 20px 120px 20px;}
.pageHero { padding:60px 20px 20px 20px; }

}


/* people */


.avatar { width:120px; height:120px; border-radius:50%; margin-bottom:12px; }
.contactLinks { margin-top:auto; display:flex; align-items:center; justify-content:center; }
.contactLinks img { padding:5px; }
.contactLinks a { transition:transform 0.4s ease; }
.contactLinks a:hover { transform:scale(1.2); }
/* === serviceBanner ==== */
    .serviceBanner { position:absolute; bottom:0; left:0;display:flex; align-items:center; justify-content:center;font-family:"Inter", sans-serif; font-weight:900; font-style:italic; background:var(--midBlue); color:#fff; text-align:center; padding:20px; width:100%; }
    .serviceBanner img { height:20px; width:auto; margin-right:6px; }
        .serviceBanner a { transition:transform 0.4s ease; text-decoration:none; padding:0 18px;display:flex; align-items:center; justify-content:center;}
.serviceBanner a:hover { transform:scale(1.1);}

@media screen and (max-width:480px) {
    .serviceBanner { display:none; }

}


/* == home video  ================= */

    /* The Container */
.video-container {
    position: fixed;
    top: 0;background:#000;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* Puts it behind other content */
}

/* The Video Element */
#bg-video {
    width: 100%;height: 100%; object-fit: cover; position: absolute;top: 0;    left: 0;}




/* heroContent */

.heroContent { z-index: 1; padding:0 60px 60px ;  max-width:80%;height: 100%;color:#fff; position:fixed; top:0; left:0;
display:flex; align-items:flex-start; justify-content:flex-end; flex-direction:column;}
 
.heroContent h2 { font-size:95px; line-height:80%;letter-spacing:-1px;color:#fff;}
.heroContent h3 { font-size:30px; font-weight:normal; color:#fff; max-width:55%; line-height:120%;text-transform:none;}
h2 span { color:var(--teal); }

.heroContent h1 { font-size:16px; margin-bottom:12px; font-weight:700; letter-spacing:4px; color:var(--teal); }

.grad { position:absolute; left:0; bottom:0; width:100%; height:100%; z-index:1;
    background: #333; 
background: linear-gradient(0deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.5) 100%); }


@media screen and (max-width:480px) {
    
    .heroContent h3 { max-width:100%; font-size:24px;}

}
.parallax-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%; /* Extra height so it has room to move */
  object-fit: cover;
  will-change: transform; /* Optimizes performance */
  
  /* The JS will update the --scroll variable */
  transform: translateY(calc(var(--scroll, 0) * 0.5)); 
}





/* Stop scrolling the body when menu is open */
body.no-scroll { overflow: hidden; }







/* ==== forms ===== */

form { max-width:600px; text-align:left; }
label { display:block; margin-bottom:4px; font-size:16px; }
input[type="text"],input[type="email"],input[type="textarea"],input[type="number"],input[type="password"], textarea { -webkit-appearance: none;  text-align:left; border-radius: 4px;outline: none; width:100%; padding:10px;font-family: Lato, sans-serif; border: 1px solid #efefef;  background:#fff; box-shadow:0 0 12px rgba(0,0,0,0.1); margin-bottom:12px; }
form .error { color:red; }
select { border: 1px solid #efefef; background:#fff;  padding: 10px 20px; border-radius: 5px;}
input.btn { border:none;cursor:pointer; }

/* ==== FLOATING LABELS ====== */
.floating-label-group {
  position: relative;
  margin-bottom: 0;
  padding-top: 8px; /* Room for the label to float into */
  font-family: sans-serif;
}

/* The input field */
.floating-input {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease;
}

/* The label acting as a placeholder */
.floating-label {
  position: absolute;
  left: 12px;
  top: 20px; /* Vertically center the label in the empty input */
  color: #777;
  font-size: 14px;
  pointer-events: none; /* Allows clicks to pass through to the input */
  transition: all 0.2s ease;
  background-color: white; /* Hides the input border behind the label when floating */
  padding: 0 4px;
}

/* 
  THE MAGIC: 
  When input is focused OR when the placeholder (the empty space) is NO LONGER shown 
  (meaning the user typed something), move the label up!
*/
.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label {
  top: -2px;
  font-size: 12px;
  color: var(--teal); /* Color changes when active */
}

/* Highlight the border when focused */
.floating-input:focus {
  border-color: var(--teal);
}

        
        
        






/* ====== cards ====== */

.cards { display:grid; gap:40px; grid-template-columns: repeat(2, 1fr); 
grid-template-rows: repeat(2, 1fr); }

.cards a { text-decoration:none; height: 100%;background:#fff; overflow:hidden; display:flex;  border-radius:12px; box-shadow:0 0 24px rgba(0,0,0,0.2); }
.cards a > img { width:40%; height:100%; object-fit:cover; }
.cards a > div { display:flex; flex-direction:column; align-items:flex-start; }
@media screen and (max-width:480px) {
    .cards { display:block; }
.cards a { flex-direction:column; margin-bottom:20px;}
.cards a > img {width:100%; height:200px; }
}









/* ===== service cards ===== */

                        .serviceCards { display:grid; gap:20px;grid-template-columns: repeat(3, 1fr); }
                        .serviceCards li { background:var(--lightGrey);padding: 40px; color:#000; border-radius:3px; transition:all 0.3s cubic-bezier(0.25, 1, 0.5, 1);; }
                        .serviceCards h4 { font-size:40px; margin-bottom:40px;}
                        .serviceCards li a { height:100%;text-decoration:none; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; }
                        .serviceCards li:hover { background:var(--teal); transform:translateY(-10px); box-shadow:0 12px 12px rgba(0,0,0,0.2); }
                        .serviceCards .btn { margin-top:auto; }
                        .serviceCards li:hover .btn{ color:#fff; }
                         .serviceCards li p { margin-bottom:30px; }

@media screen and (max-width:768px) {

                            .serviceCards { display:block; }
                            .serviceCards li { margin-bottom:20px; padding:20px; } 

}







/* ==== blog ===== =*/

.tagSml { font-size:12px;background:#efefef; border:1px solid #ccc; text-decoration:none; border-radius:5px; padding:4px 6px; margin-right:5px; } 
.tagSml:hover { background:#ccc; }








/* === buttons ======= */



/* The Base Button Style */
.btn, .submitBtn { --bgColor: var(--teal);
  display: inline-block;text-decoration: none; cursor:pointer;
  color: #fff; background-color: var(--bgColor); border:none;
  padding: 8px 20px; font-size:14px; font-weight:700; border-radius:5px;
  transition: background-color 0.3s ease;
  
}

.btn:hover, .submitBtn:hover { background-color: color-mix(in srgb, var(--bgColor), black 15%);}

.loginBtns { margin-bottom:6px; }
.loginBtns .btn img { height:16px; width:auto; margin-right:3px; }

.btnLogin, .btnTracking { display:inline-flex; align-items:center; cursor:pointer;color:#fff; border:none; padding:12px 24px; border-radius:0 0 6px 6px; margin-left:12px;}
.btnLogin { background:var(--teal);   }
.btnTracking {  --bgColor:var(--orange); }

/* Optional: change color on hover */
.btn:hover {
  color: #fff;
}

@media screen and (max-width:480px) {
    .loginBtns { display:none; }
}




    
.listBtns .btn { background:var(--teal); border-radius:50px; color:#fff;  padding:6px 24px;}


/* ==== login form === */

.loginForm { background:var(--midBlue); width:100%; max-width:320px; margin-left:40px; border-radius:5px; padding:30px; color:#fff; }
.loginForm h3 { color:var(--teal); }
.loginForm .btn { width:100%; }

@media screen and (max-width:480px) {
.loginForm { display:none; }
}
/* =============== footer ============ */

footer { background:var(--darkBlue); color:#fff; padding-top:60px; }



/* === animated headings ====== */

/* Base style for elements you want to reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  /* This controls the "smoothness" and "time" */
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s ease-out;
  will-change: opacity, transform; /* Performance optimization */
}

/* The state triggered by JS */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}



.revealLeft {
  opacity: 0;
  transform: translateX(-100px);
  /* This controls the "smoothness" and "time" */
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s ease-out;
  will-change: opacity, transform; /* Performance optimization */
}
.revealLeft.active {
  opacity: 1;
  transform: translateX(0);
}


.revealRight {
  opacity: 0;
  transform: translateX(100px);
  /* This controls the "smoothness" and "time" */
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s ease-out;
  will-change: opacity, transform; /* Performance optimization */
}
.revealRight.active {
  opacity: 1;
  transform: translateX(0);
}

.delay01 { transition-delay:0.1s;}
.delay02 { transition-delay:0.2s;}
.delay03 { transition-delay:0.3s;}
.delay04 { transition-delay:0.4s;}
.delay05 { transition-delay:0.5s;}
.delay06 { transition-delay:0.6s;}
.delay09 { transition-delay:0.9s;}
.delay1s { transition-delay:1s;}

/* === animated headings ====== */