/* ===================== THEME VARS ===================== */
:root{
  --bg-dark: #023047;
  --bg-light: #ffffff;
  --bg-med: #8ecae6;
  --dk-text:#023047;
  --lt-text:#ffffff;
  --headline:#219ebc;
  --accent: #fc4906;
}

/* ===================== RESET BASICS ===================== */
html { 
  scroll-behavior: auto;
}

* { 
  box-sizing: border-box; 
}

body { 
  margin:0; 
  color:var(--lt-text); 
  background:#ffffff; 
  overflow-x:hidden; 
  opacity: 0; /* GSAP sets this to 1 on load */
}

img { 
  max-width:100%; 
  height:auto; 
  display:block; 
}

/* ===================== TYPE ===================== */
h2 {
  font-family: program, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 3.25rem;
  line-height:3.25rem;
  padding:0 0 30px 0; 
  margin:0;
  text-transform: uppercase;
  color: var(--dk-text);
}

h3 {
  font-family: program, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 2.25rem;
  line-height:2.5rem;
  color: var(--dk-text);
}

p {
  font-family: program, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  color: var(--dk-text);
}

p em {
  font-family: "program", sans-serif;
  font-weight: 400;
  font-style: italic;
}

p strong {
  font-weight:600;
}

.lead { 
  font-size: 1.75rem; 
}



/* ===================== HEADER ===================== */
#main-header{
  position: fixed; 
  top:0; 
  left:0; 
  width:100%; 
  z-index:1000;
  background: rgba(2,48,71,1);
  border-bottom: 2px solid #fc4906;
  transform: translateY(-100%); /* GSAP slides this to 0 */
}

.header-row{ 
  align-items:center; 
}

#main-header h1 {
  font-family: "cubano", sans-serif;
  font-weight: 500;
  font-size: 45px;
  line-height: 45px;
  margin: 15px 0 5px;
  color: var(--lt-text);
  padding: 0;
}

#main-header h1 a {
  color: var(--lt-text);
  text-decoration: none;
}

#main-header h1 a:hover {
  color: var(--lt-text);
  text-decoration: none;
}

#main-header h5 { 
    color: rgba(255, 255, 255, .6);
    font-family: "loretta-display", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.28rem;
    margin:0 0 20px;
    padding:0;
}

nav ul{
  display:flex; 
  justify-content:flex-end; 
  align-items:center;
  gap: 18px; 
  margin: 12px 0;
}

nav ul li{ 
  list-style:none; 
  margin-left:15px;
}

nav ul a{
  font-family: program, sans-serif;
  font-weight: 600; 
  text-transform: uppercase;
  font-size: 1.5rem; 
  letter-spacing:.05em;
  color: var(--lt-text);
}

nav ul a:hover{ 
  color:var(--accent); 
  text-decoration: none; 
}

nav ul a.active {
  color: var(--accent);
}

#nav-indicator {
  position: absolute;
  bottom: 0;                 /* Was bottom — keep this so it sits up against the nav */
  height: 0;
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;

  /* POINT ARROW UP */
  border-bottom: 10px solid var(--accent);

  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}



#main-header i{ 
  font-size:14px; 
  padding:5px 7px; 
  background:#0a66c2; 
  border-radius:6px; 
}

.header-base{ 
  height:0; 
}

/* ===================== SECTIONS ===================== */
.light-bg{ 
  background: var(--bg-light); 
}

.dark-bg { 
  background: var(--bg-dark); 
}

.dark-bg h2, 
.dark-bg p, 
.dark-bg a { 
  color: var(--lt-text); 
}

.dark-bg .btn { 
  background: var(--bg-med); 
  color: var(--dk-text); 
}

/* put this in custom-2026.css */
#solutions, #clients, #about, #contact {
  scroll-margin-top: 128px; /* ~ header height */
}

/* ===================== WELCOME / HERO ===================== */
#welcome { 
  margin: 150px 15px 0;
  overflow: hidden; /* keeps slide-up clean */
}

.welcome-screen{
  width:100%;
  height:70vh;
  min-height:400px;
  background-image:url("/images/gradient-bg.jpg");
  background-size:cover;
  background-repeat: no-repeat;
  background-position: right;
  border-radius:15px;
  display: flex;
  align-items: center;   /* vertical center */
  justify-content: center; /* horizontal center */
  text-align: center;

  /* NEW: start off-screen below; GSAP will slide this to y:0 */
  transform: translateY(100%);
  will-change: transform;
}
.icons { 
  opacity: 0;          /* revealed by GSAP after swipe */
  margin: 0 auto; 
  height: 27vh; 
}

/* Headline: hidden initially; GSAP fades/slides it in */
.home-banner-text h3 {
  opacity: 0;
  transform: translateY(10px);
  font-family: "loretta-display", serif;
  font-weight: 400;
  font-size: 50px;
  line-height: 60px;
  color: #fff;
}

.home-banner-text h3 em {
  font-family: "loretta-display", serif;
  font-weight: 400;
  font-style: italic;
}

.home-banner-text i {
  font-size: 40px;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* ===================== SERVICES ===================== */
#solutions { width:100vw; overflow: hidden;}

#solutions .container { 
  padding:65px 0px 100px; 
}

.service-card {
  text-align:center;
  margin:0 auto;
  border-radius:15px;
  background-color:#d1dadf;
  padding:15px 30px;
  margin-bottom:30px;
  border-bottom: 4px solid #fc4906;
}

.service-card img { height:100px; }

/* Buttons */
.btn{
  background: var(--bg-dark);
  color: var(--lt-text);
  border-radius: 8px;
  padding: 12px 20px;
  display: inline-block;
  margin-top: 14px;
  font-size:1.5rem;
  font-weight:700;
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
  box-shadow: 0 10px 24px rgba(2,48,71,.18);
}

.btn:hover{ 
  transform: translateY(-2px); 
  box-shadow:0 14px 30px rgba(2,48,71,.22); 
}

/* ===================== CLIENTS / WORK ===================== */
#clients .container { 
  padding:100px 0px;
}

#clients h2{ 
  color: var(--lt-text); 
  text-align:center; 
  margin-bottom: 12px; 
  font-size:3rem; 
}

#clients p{ 
  color: var(--lt-text); 
  opacity:.9; 
  text-align:center; 
}

.cases{ 
  margin-top: 24px; 
}

.cs-link a{
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing:.03em;
  font-size:1.5rem;
  font-style: normal;
}

.cl {
  margin:30px 0;
}

.client-list {
  padding:0;
  margin:0;
  text-align: center;
}

.client-list li {
  list-style:none;
  display:inline-block;
  margin:0 30px 30px;
}

.client-list li img {
  height:80px;
}

.cases img {
  border-radius:15px;
  border:2px solid #fff;
  margin-bottom:15px;
}

/* ===================== ABOUT ===================== */
#about .container { 
  padding:100px 0px; 
}

#about h2{ 
  color: var(--dk-text); 
  margin-bottom: 14px; 
}

.headshot {
  display: flex;
  align-items: center;   /* vertical center */
  justify-content: center; /* horizontal center */
  text-align: center;
}

/* ===================== CONTACT ===================== */
#contact .container { 
  padding:100px 0px; 
}

#contact h2{ 
  color: var(--lt-text); 
}

#contact p{ 
  color: var(--lt-text); 
  opacity:.9; 
}

#contact .btn{ 
  background: var(--bg-med); 
  color: var(--dk-text); 
}

.contact-form {
  color:#fff;
  text-align: left;
}

.contact-form label {
  color:#fff !important;
  font-family: program, sans-serif !important;
}

.contact-form button.wpforms-submit {
  background-color:var(--accent) !important;
  font-family: program, sans-serif !important;
  color:var(--lt-text) !important;
}

.contact-form .wpforms-required-label {
  color:var(--accent) !important;
}

div.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
  background: transparent !important;
    border: none !important;
    box-sizing:content-box;
    text-align: center;
}


/* ===================== CASE STUDIES ===================== */
#post-content {
  margin-top: 150px; 
}

/* Case Study: media reveal in right column */
.work-template-default #post-content .col-md-8 img,
.work-template-default #post-content .col-md-8 iframe {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: none; /* avoid any default CSS transitions */
}


/* ===================== RESPONSIVE ===================== */
@media (max-width: 992px){

  .mobile-hide { 
    display:none; 
  }

  #main-header{ width: 100vw; }

  #nav-indicator {
    display: none;
  }

  #main-header h5 { 
    text-align: center;
  }

  #about .container,
  #clients .container,
  #solutions .container,
  #contact .container { 
    padding:30px 15px 50px;
  }

  .welcome-screen{
    height:50vh;
  }

  .home-banner-text h3 {
    font-size: 20px;
    line-height: 30px;
  }

  .icons { 
    height:20vh;
  }

  #main-header h1{ 
    font-size:35px; 
    line-height:35px; 
    text-align: center; 
  }

  #clients h2 { 
    padding: 0 50px;
  }

  .headshot img {
    margin-bottom:30px;
    width: 70vw !important;
  }

  /* === CLIENT LOGOS: slideshow stage on mobile === */
  #clients .cl {
    position: relative;
  }

  #clients .client-list {
    position: relative;
    width: 100%;       /* space for one logo */
    margin-bottom: 24px;
    min-height:120px !important;
  }

.client-list li img {
  height:auto;
}


  #clients .client-list li {
    /* JS will make these absolute + center them; keep margin reset here */
    margin: 0;
  }

   .about-grid {
    display: flex;
    flex-direction: column;
  }

  .about-grid > div:nth-child(2) { /* the headshot */
    order: -1;        /* move it to the top */
    margin-bottom: 30px;
  }
}

@media (max-width: 768px){
  .home-banner-text h3 {
    font-size: 22px;
    line-height: 28px;
  }
}