/* ==========================================================
   Evexion.me — shared stylesheet
   Colors sampled directly from the Figma mockups.
   ========================================================== */

:root{
  --teal-deep:   #04676e;   /* dark cards / contact & footer bg / big headings */
  --teal-mid:    #7ab1af;   /* accent square / Get Quote btn / plus circle */
  --teal-pale:   #9bc7c1;   /* brands + services section background */
  --teal-alt:    #009AA0;   /* mostly for the h2 heading squares */
  --cream:       #eef2ee;   /* header background start */
  --ink:         #201d18;   /* card titles on light backgrounds */
  --peach:       #fcddb9;
  --mint:        #d1fee4;
  --orange-card: #facd93;
  --orange:      #e3a45d;   /* accent orange: buttons, links, borders */
  --orange-deep: #d4903f;
  --build-1:     #a49d78;
  --build-2:     #bfa06c;
  --build-3:     #d5a363;
}

*{ box-sizing:border-box; }

html{
  background: url('assets/full-page-bg.jpg') no-repeat top center;
  background-size: cover;
}

body{
  font-family:'Inter', sans-serif;
  color:#2c4442;
  background:transparent;
  overflow-x:hidden;
}

h1,h2,h3,h4,.display-font {
  font-family:'Bebas Neue', sans-serif;
  text-transform:uppercase;
  margin:0;
}

a { text-decoration:none; }

/* ---------- Header ---------- */
.site-header{
  background: url('assets/header-bg.png') no-repeat center center;
  background-size: 100% 100%;
  padding: 16px 0;
}
.brand { display:flex; align-items:center; gap:10px; }

.brand .logo-img{
  height: 110px;
  width: auto;
}
.brand-text{
  font-family:'Bebas Neue', sans-serif;
  font-weight:400;
  font-size:20px;
  color:var(--teal-deep);
  line-height:1;
  text-transform:none;
}
.brand-text span{
  font-family:'Inter', sans-serif;
  font-weight:400;
  font-size:11px;
  color:var(--teal-deep);
  opacity:.8;
  text-transform:lowercase;
}
.nav-links a{
  color:var(--teal-deep);
  font-family:'Bebas Neue', sans-serif;
  font-size:15px;
  font-weight:400;
  letter-spacing:.8px;
  margin-left:30px;
  text-transform:uppercase;
  transition:opacity .2s;
}
.nav-links a.current { color: var(--cream); }

.nav-links a:hover{ opacity:.6; }
.btn-quote{
  background: var(--teal-mid);
  color:#fff;
  border-radius:30px;
  padding:9px 24px;
  font-size:12.5px;
  font-weight:500;
  text-transform:uppercase;
  margin-left:30px;
  white-space:nowrap;
  display:inline-block;
}
.btn-quote:hover{ background:var(--teal-deep); color:#fff; }


.header-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.desktop-nav{
    display:flex;
    align-items:center;
}

.menu-toggle{
    display:none;
    width:46px;
    height:46px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    z-index:1002;
}

.menu-toggle span{
    display:block;
    width:28px;
    height:3px;
    margin:6px auto;
    background:var(--teal-deep);
    transition:.3s;
}



/* Hamburger Animation */

.menu-toggle.active span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
}


/* mobile menu */
.mobile-menu{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:#fff;
    display:flex;
    flex-direction:column;
    text-align:center;
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
    z-index:999;
}

.mobile-menu.active{
    max-height:500px;
}

.mobile-menu a{
    padding:18px;
    color:var(--teal-deep);
    font-family:'Bebas Neue';
    font-size:20px;
    border-bottom:1px solid #eee;

}

.mobile-btn{
    width:220px;
    margin:25px auto;

}

body.menu-open{
    overflow:hidden;
}


/* NAVIGATION DROPDOWN */


.nav-dropdown{
    position:relative;
    display:flex;
    align-items:center;
}

.dropdown-link{
    display:flex;
    align-items:center;
    gap:6px;
    color:inherit;
    text-decoration:none;
}

.nav-dropdown .dropdown-menu-custom a { margin-left: 0; }

/* Small Down Arrow */
.dropdown-link::after{
    content:"";
    width:6px;
    height:6px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    margin-top:-3px;
    transition:.3s;
}

.nav-dropdown:hover .dropdown-link::after{
    transform:rotate(225deg);
    margin-top:3px;
}

/* Dropdown */

.dropdown-menu-custom{

    position:absolute;

    top:calc(100% + 16px);
    left:50%;

    transform:translateX(-50%) translateY(10px);

    min-width:220px;

    background:#ffffff;

    border-radius:14px;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

    opacity:0;
    visibility:hidden;

    transition:all .3s ease;

    overflow:hidden;

    z-index:999;

}

/* Small Top Arrow */

.dropdown-menu-custom::before{

    content:"";

    position:absolute;

    top:-7px;
    left:50%;

    width:14px;
    height:14px;

    background:#fff;

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

}

.dropdown-menu-custom a{

    display:block;

    padding:14px 22px;

    color:#0b6974;

    font-size:15px;

    font-weight:500;

    text-decoration:none;

    transition:.25s;

    background:#fff;

}

.dropdown-menu-custom a:hover{

    background:#0b6974;

    color:#fff;

}

.nav-dropdown:hover .dropdown-menu-custom{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

/*==================================================
MOBILE DROPDOWN
==================================================*/

.mobile-services{

    display:flex;

    flex-direction:column;

    gap:10px;

    width:100%;

    margin-top:5px;

}

.mobile-services span{

    color:#0b6974;

    font-weight:700;

    text-transform:uppercase;

    font-size:14px;

    padding:8px 0;

}

.mobile-services a{

    padding-left:18px !important;

    font-size:15px;

    color:#555;

    text-decoration:none;

    transition:.3s;

}

.mobile-services a:hover{

    color:#0b6974;

    padding-left:24px !important;

}






/* ---------- HERO ---------- */

.hero{
    position:relative;
    min-height:630px;
    display:flex;
    align-items:flex-end;
    padding:20px;
    overflow:hidden;
}

.hero-video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.25);
    z-index:2;
}

.hero-content{
    position:relative;
    z-index:3;
    padding:50px 0 60px;
}

.hero-content h1{
    color:#fff;
    font-weight:700;
    font-size:clamp(2.5rem,6.4vw,98px);
    line-height:1.05;
}


/* brands and services */

.teal-section{
  background: transparent;
  padding: 70px 0 110px;
  position:relative;
}

.brands-heading {
  color:var(--teal-deep);
  font-weight: 700;
  font-size: clamp(2.5rem, 6.4vw, 98px);
  line-height: 1.15;
}

.brands-heading::before {
  content: "";
  display: inline-block;
  width: 90px;
  height: 90px;
  margin-right: 20px;
  margin-bottom: -10px;
  background-color: var(--teal-alt);
  flex-shrink: 0; 
}

.brands-copy {
  margin-left: -150px;
  padding-top: 180px;
}

.brands-copy p{
  color:#555050;
  font-size: 24px;
  line-height:1.5;
}

/*******/

.services-heading{
  color:var(--teal-deep);
  font-weight:700;
  font-size: clamp(2.5rem, 6.4vw, 98px);
  line-height: 1.15;
}

.service-card{
  height:100%;
  padding:22px 20px 20px;
  display:flex;
  flex-direction:column;
  min-height:320px;
}
.service-card h3{
  width: 80%;
  font-size: 40px;
  font-weight: 500;
  line-height:1.1;
  margin-bottom:16px;
  text-transform:uppercase;
}
.service-card p{
  font-size: 14px;
  color: #000;
  line-height:1.4;
  padding-top: 12px;
  border-top: 1px solid rgba(32,29,24,.2);
  margin:0;
  margin-top:auto;

  opacity:0;
  max-height:0;
  overflow:hidden;
  padding-top:0;
  border-top-color:transparent;
  transform:translateY(15px);

  transition:all .35s ease;
}

.service-card:hover p{
    opacity:1;
    max-height:150px;
    padding-top:12px;
    border-top-color:rgba(32,29,24,.2);
    transform:translateY(0);
}

.service-card a.more-link{
  color:var(--orange-deep);
  font-weight:500;
  text-decoration:underline;
}


/* Keep white divider on dark cards */
.bg-teal:hover p{
    border-top-color:rgba(255,255,255,.3);
}


/* ---------- LET'S BUILD IT ---------- */
.build-section{
  background: linear-gradient(165deg, var(--build-1) 0%, var(--build-2) 55%, var(--build-3) 100%);
  background-image: url("assets/built-it-bg.png");
  background-position: top center;
  background-size: cover ;
  padding: 60px 0 70px;
}
.build-title{
  text-align:center;
  color:var(--teal-deep);
  font-weight:600;
  font-size: 50px;
  letter-spacing:2px;
  margin: 26px 0;
}
.plus-circle{
  width: 80px;
  height: 80px;
  border:2px solid var(--teal-deep);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto;
  color:var(--teal-deep);
  font-size: 40px;
  background:rgba(255,255,255,.2);
}

.plus-circle:hover { opacity: .7; }


.frame-img{ padding:10px; text-align: center; }


/* ---------- CONTACT + FOOTER (shared dark teal block) ---------- */
.deep-teal-block{
  background: var(--teal-deep);
  color:#eef4f2;
}
.contact-section{ padding: 60px 0 40px; }

.contact-heading{
  color:#fff;
  font-weight:700;
  font-size: clamp(1.9rem, 4.5vw, 75px);
  line-height:1.2;
}
.contact-heading .accent{ color: var(--orange); }

.contact-copy{
  font-size:26px;

  line-height:1.4;
  color:#cfe3df;
  margin-top:18px;
}
.contact-section label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#cfe3df;
  margin-bottom:5px;
  display:block;
}
.contact-section .form-control{
  background:#fff;
  border:none;
  border-radius:6px;
  font-size:13px;
  padding:10px 12px;
  margin-bottom:16px;
}
.btn-request{
  background:var(--orange);
  color:#fff;
  border:none;
  border-radius:30px;
  padding:12px 30px;
  font-size:14px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.btn-request:hover{ background:var(--orange-deep); color:#fff; }

/* ---------- FOOTER ---------- */
.site-footer{ padding: 50px 0 0; }

.footer-logo{
  height: 82px;
  max-width: 150px;
  background:#eef4f2;
  border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  padding:10px;
  margin-bottom:16px;
}

.footer-logo img{ width:100%; height:100%; object-fit:contain; }

.footer-blurb{
  font-size: 18px;
  font-weight:300;
  line-height:1.7;
  color:#bfd8d4;
  max-width:230px;
}
.footer-col{
  border-left:1px solid rgba(255,255,255,.2);
  padding-left:24px;
}
.footer-col h6 {
  font-family:'Bebas Neue', sans-serif;
  color:#fff;
  font-weight:400;
  font-size: 20px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:18px;
}
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{
  font-size: 14px;
  color:#cfe3df;
  margin-bottom:10px;
  padding-left:14px;
  position:relative;
}
.footer-col li::before{
  content:'';
  position:absolute; left:0; top:7px;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--orange);
}
.footer-col.contact-col p{
  font-size: 15px;
  text-transform:uppercase;
  color:#9fc3bd;
  margin:0 0 2px;
}
.footer-col.contact-col a, .footer-col.contact-col span{
  display:block;
  font-size: 14px;
  color: #fff;
  font-weight:500;
  margin-bottom:16px;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  margin-top:40px;
  padding:18px 0;
  text-align:center;
  font-size:11px;
  letter-spacing:.5px;
  color:#9fc3bd;
}

/**** ABOUT ****/

.about-page{
    padding:120px 0 90px;
}

.about-text {
  font-size: 22px;
}

.about-banner {
  width: 100%;
  max-width: 450px;
}

.about-divider{
    margin:70px 0;
    border-color:#fff;
}

.stats-row{
    margin-bottom:90px;
}

.stat-item .number{
    font-family:'Bebas Neue',sans-serif;
    font-size: 96px;
    color:#0d6973;
    line-height:1;
}

.stat-item .number b{
    font-family:'Inter',sans-serif;
    font-size: 32px;
}

.stat-item .label{
    margin-top:15px;
    text-transform:uppercase;
    font-size: 20px;
    font-weight: 600;
    color:#0d6973;
    letter-spacing:.5px;
}

/****/

.why-section{
    margin-top:40px;
}

.why-card{
    background:#f6d5ac;
    padding: 20px 30px;
    height:100%;
}

.why-card h3{
    font-family:'Bebas Neue',sans-serif;
    color:#0d6973;
    font-size: 40px;
    margin:12px 0 18px;
}

.why-card p{
    font-size: 16px;
    line-height: 1.5;
}

/** contact page **/

.contact-page{
  padding: 70px 0 80px;
}

.contact-intro{
  max-width: 1000px;
  margin:0 auto 70px;
}

.contact-title{
  font-family:'Bebas Neue',sans-serif;
  font-size: clamp(2.5rem,6.4vw,98px);
  line-height:.9;
  color:#0b6974;
  margin-bottom:35px;
}

.contact-title span{
  color:#ffffff;
}

.contact-subtitle{
  max-width:720px;
  margin:0 auto;
  font-size:26px;
  line-height:1.45;
  color:#595959;
}

.contact-card {
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(10px);
  border-radius:35px;
  padding:50px 45px;
  box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.contact-card .row {
  margin-bottom:20px;
}

.contact-card label{
  display:block;
  margin-bottom:10px;
  color:#0b6974;
  font-size:18px;
  font-weight:600;
}

.contact-card .form-control{
  height:58px;
  border:none;
  border-radius:10px;
  box-shadow:0 5px 8px rgba(0,0,0,.12);
  font-size:16px;
}

.contact-card textarea.form-control{
  height:110px;
  resize:none;
  padding-top:18px;

}

.contact-btn{
  background:#0b6974;
  color:#fff;
  border:none;
  border-radius:60px;
  padding:18px 55px;
  font-size:22px;
  font-family:'Bebas Neue',sans-serif;
  letter-spacing:.6px;
  transition:.3s;
}

.contact-btn:hover {
  background:#095962;
}

/********/

.page-banner{
  position:relative;
  height:340px;
  overflow:hidden;

}

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

.banner-overlay{
  position:absolute;
  inset:0;
  background:rgba(18,98,104,.45);
}

.banner-content{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:100%;
  text-align:center;
  z-index:2;
}

.banner-content h1{
  color:#fff;
  font-family:'Bebas Neue',sans-serif;
  font-size: clamp(2.5rem,6.4vw,85px);
  line-height:1;
  margin:0;
  letter-spacing:1px;
}


.interior-page{
  padding:90px 0;
}

.service-item{
  text-align:center;
  margin-bottom:45px;
}

.service-item img {
  width: 250px;
  height: 250px;
  object-fit:cover;
  border-radius: 45px;
  padding: 10px;
  border: 4px solid #eda85d;
  margin:0 auto 25px;
  transition:.35s;

}

.service-item:hover img{
  transform:translateY(-6px);
}

.service-item h3{
  color:#0b6974;
  font-family:'Bebas Neue',sans-serif;
  font-size: 46px;
  margin-bottom:15px;
}

.service-item p{
  max-width:340px;
  margin:auto;
  font-size: 20px;
  line-height:1.4;
}

/*********/

.exhibition-page{
  padding:90px 0;
}

.exhibition-row{
  margin-bottom:90px;
}

.exhibition-row:last-child{
  margin-bottom:0;
}

.exhibition-img{
  width: 100%;
  max-width: 590px;
  aspect-ratio:1;
  object-fit:cover;
  border:4px solid #eba760;
  padding: 15px;
  margin-bottom: 20px;
  border-radius:30px;
  transition:.35s;
}

.exhibition-img:hover{
  transform:translateY(-6px);
}

.exhibition-row h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:42px;
  color:#0b6974;
  margin-bottom:15px;
}

.exhibition-row ul{
  margin:0 0 20px 20px;
  padding:0;
}




/*****/

.txt-white { color: #fff; }
.txt-deepteal { color:var(--teal-deep) !important; }

.bg-peach{ background:var(--peach); color:var(--ink); }
.bg-mint{  background:var(--mint);  color:var(--ink); }
.bg-orange-card{ background:var(--orange-card); color:var(--ink); }
.bg-teal{  background:var(--teal-deep); color:#eef4f2; }
.bg-teal h3{ color:#fff; }
.bg-teal p{ border-top-color: rgba(255,255,255,.3); color:#fff; }
.bg-peach h3, .bg-mint h3, .bg-orange-card h3{ color:var(--ink); }
.bg-peach p, .bg-mint p, .bg-orange-card p{ color: #000; }




/* MEDIA QUERY */


@media (max-width:991px){

  .hero { min-height:320px; padding:20px; }

  .hero-video { object-position:center center; }

  .hero-content { padding-bottom:20px; }

  .hero-content h1 { font-size:58px; }

  .brands-heading::before { width: 60px;  height: 60px; }

  .brands-copy { margin-left: 0; padding-top: 20px; }

  .brands-copy p { font-size: 20px; }

    
  .service-card{ 
    padding: 16px; 
    min-height: 280px;
  }

  .service-card h3{  
    width: 100%;
    font-size: 28px;
    margin-bottom: 12px;
  }

  .service-card p{
    opacity:1;
    max-height:150px;
    overflow:hidden;
    padding-top:12px;
    border-top-color:rgba(32,29,24,.2);
    transform:translateY(0);    
  }

  .frame-img{ padding: 1px; }
  .frame-img img{ max-width: 100%;}

  .footer-blurb{ max-width:100%; }

  .footer-col { padding-left: 15px; border: 0; }


  .about-text { font-size: 16px; }


  .stat-item { margin-bottom: 50px; }
  .stat-item .number { font-size: 40px; }
  .stat-item .number b { font-size: 24px; }
  .stat-item .label { font-size: 16px; }

  .why-card { padding: 20px; }
  .why-card h3 { font-size: 30px; }

  .contact-subtitle{
    max-width: 100%;
    font-size: 20px;
    line-height:1.4;
  }

  .contact-card {
    border-radius: 30px;
    padding: 30px 20px;
  }

  .contact-card .form-control { 
    margin-bottom: 16px;
  }

  .service-item img { width: 200px; height: 200px; } 
  
  .service-item h3 { font-size: 36px; }


  .exhibition-row h2 { font-size:36px; }

  .exhibition-row li { margin-bottom:5px; font-size: 18px; }
  
  .exhibition-row p { font-size: 18px; }

  .desktop-nav { display:none; }

  .menu-toggle { display:block; }

  .brand .logo-img { height:70px; }

  .site-header{
      position:sticky;
      top:0;
      z-index:1000;
  }

    .dropdown-link::after{
        display:none;
    }

    .dropdown-menu-custom{
        display:none;
    }

}




.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.evx-frame{border-radius:var(--border-radius-lg);overflow:hidden;border:0.5px solid var(--color-border-tertiary);}
.evx-chrome{background:var(--color-background-secondary);padding:10px 14px;display:flex;align-items:center;gap:8px;}
.evx-dot{width:8px;height:8px;border-radius:50%;background:var(--color-text-tertiary);}
.evx-url{margin-left:8px;font-size:12px;color:var(--color-text-tertiary);background:var(--color-background-primary);border-radius:var(--border-radius-md);padding:3px 12px;}
.evx-hero{background:linear-gradient(135deg,#6CA4A6 0%,#87B9B6 100%);position:relative;overflow:hidden;padding:48px 28px 40px;text-align:center;}
.evx-bg-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.evx-top{display:flex;align-items:center;position:relative;z-index:1;margin-bottom:36px;}
.evx-logo{font-family:'Bebas Neue',sans-serif;color:#F5F5F5;font-size:20px;letter-spacing:1px;}
.evx-body{position:relative;z-index:1;}
.evx-eyebrow{font-size:12px;letter-spacing:2px;color:#FF6B2B;font-weight:500;text-transform:uppercase;margin:0 0 14px;}
.evx-headline{font-family:'Bebas Neue',sans-serif;font-size:46px;line-height:1.1;color:#F5F5F5;margin:0 0 16px;text-transform:uppercase;letter-spacing:0.5px;}
.evx-headline em{font-style:normal;color:#FF6B2B;}
.evx-sub{font-size:16px;line-height:1.6;color:#B7B7B7;max-width:460px;margin:0 auto 8px;}
.evx-visual{margin:32px auto 8px;max-width:680px;}
.evx-scene{perspective:1000px;height:400px;width:100%;display:flex;align-items:center;justify-content:center;cursor:grab;}
.evx-scene.dragging{cursor:grabbing;}
.evx-stage{position:relative;width:1px;height:1px;transform-style:preserve-3d;}
.evx-panel{position:absolute;top:50%;left:50%;width:128px;height:164px;margin:-82px 0 0 -64px;border-radius:6px;background-size:cover;background-position:center;border:0.5px solid rgba(255,255,255,0.07);backface-visibility:hidden;user-select:none;}
.evx-hint{font-size:12px;color:#7A7A7A;margin:14px 0 28px;}
.evx-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:18px;}
.evx-cta-primary{background:#FF6B2B;color:#1C1C1C;border:none;font-size:14px;font-weight:500;padding:14px 26px;border-radius:4px;display:flex;align-items:center;gap:8px;cursor:pointer;letter-spacing:0.3px;}
.evx-cta-secondary{background:transparent;color:#F5F5F5;border:1px solid rgba(245,245,245,0.35);font-size:14px;font-weight:500;padding:14px 26px;border-radius:4px;cursor:pointer;}
.evx-tag{display:flex;align-items:center;gap:8px;font-size:12px;color:#8A8A8A;letter-spacing:0.3px;text-transform:uppercase;justify-content:center;margin-bottom:32px;}
.evx-tag i{font-size:14px;color:#FF6B2B;}
.evx-scroll{display:flex;flex-direction:column;align-items:center;gap:4px;color:#6B6B6B;font-size:11px;letter-spacing:1px;text-transform:uppercase;}
.evx-scroll i{font-size:16px;animation:evxBounce 1.8s ease-in-out infinite;}
@keyframes evxBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}
@media (max-width:560px){
.evx-hero{padding:32px 18px 32px;}
.evx-headline{font-size:32px;}
.evx-scene{height:280px;}
.evx-panel{width:96px;height:124px;margin:-62px 0 0 -48px;}
}