/*
Theme Name: xPeak
Description: Premium enterprise theme for xPeak — header, top bar, footer, forms and navigation only. Page content is built entirely in Elementor.
Version: 3.3.0
Author: xPeak
Text Domain: xpeak
*/

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');


/* ============================================================
   GLOBAL VARIABLES
   ============================================================ */

:root{
  --ink:black;
  --ink-soft:#1A1A1A;
  --graphite:#262626;

  --paper:#FFFFFF;
  --paper-2:#FAFAFA;

  --line:#E8E8E8;
  --line-dark:#333333;

  --text:#1A1A1A;
  --text-dim:#6B6B6B;

  --text-inv:#FFFFFF;
  --text-inv-dim:#B8B8B8;

  --accent:#E23B34;
  --accent-dark:black;
  --accent-soft:#FFE5E5;

  --red:#E23B34;
  --red-dark:#A81E22;

  --brand-black:#000000;

  --danger:#E5484D;
  --success:#12946B;

  --font-display:"Plus Jakarta Sans","Segoe UI",sans-serif;
  --font-body:"Plus Jakarta Sans","Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;

  --radius:10px;

  --shadow-lg:0 30px 70px -34px rgba(0,0,0,.28);
  --shadow-md:0 18px 40px -26px rgba(0,0,0,.28);

  --content-width:1140px;
}


/* ============================================================
   GLOBAL RESET
   ============================================================ */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  max-width:100%;
}

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

a{
  color:inherit;
  text-decoration:none;
}

h1,
h2,
h3,
h4{
  font-family:var(--font-display);
  margin:0 0 .5em;
  font-weight:800;
  letter-spacing:-.018em;
}

p{
  margin:0 0 1em;
}

ul{
  margin:0;
  padding:0;
}

.wrap{
  max-width:var(--content-width);
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
}

.mono{
  font-family:var(--font-mono);
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}


/* ============================================================
   EYEBROW
   ============================================================ */

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent-dark);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  font-weight:700;
}

.eyebrow::before{
  content:"";
  width:24px;
  height:2px;
  background:linear-gradient(
    90deg,
    var(--accent),
    var(--red)
  );
}

.bg-dark .eyebrow{
  color:var(--red);
}

.bg-dark .eyebrow::before{
  background:linear-gradient(
    90deg,
    var(--red),
    #FF8A82
  );
}


/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */

/* FIXED: removes unwanted space above header */
header.site{
  position:sticky;
  top:0;
  z-index:80;

  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);

  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(0,0,0,.02);

  margin-top:0 !important;
}

/* WordPress admin bar */
body.admin-bar header.site{
  top:10px;
}

/* Prevent WordPress admin bar from creating unwanted margin */
body.admin-bar{
  margin-top:0 !important;
}

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

  body.admin-bar header.site{
    top:4px;
  }

}


/* ============================================================
   NAV ROW
   ============================================================ */

.nav-row{
  width:100%;
  max-width:var(--content-width);

  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;

  /* Reduced vertical padding */
  padding:10px 20px;

  gap:28px;

  min-height:60px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

/* Normal desktop logo size */
.brand img{
  height:52px;
  width:auto;
  max-width:240px;
  object-fit:contain;
  display:block;
}

nav.primary{
  display:flex;
  align-items:right;
  gap:2px;
  min-width:0;
  padding-left: 300px;
}

nav.primary > .nlink{
  font-size:14.5px;
  font-weight:700;

  padding:10px 16px;

  border-radius:6px;

  color:var(--text);

  position:relative;
  cursor:pointer;

  transition:.15s;
}

nav.primary > .nlink:hover,
nav.primary > .nlink.active{
  color:var(--accent-dark);
  background:var(--accent-soft);
}

.nav-cta{
  font-family:var(--font-display);

  font-weight:800;
  font-size:13.5px;
  letter-spacing:.01em;

  background:var(--accent);
  color:#fff;

  padding:11px 24px;

  border-radius:6px;

  border:1px solid var(--accent);

  white-space:nowrap;

  transition:all .18s;
}

.nav-cta:hover{
  background:var(--accent-dark);
  border-color:var(--accent-dark);

  box-shadow:
    0 10px 22px -10px
    rgba(226,59,52,.45);
}

.nav-right{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.burger{
  display:none;

  background:none;
  border:1px solid var(--line);

  border-radius:6px;

  width:42px;
  height:42px;

  align-items:center;
  justify-content:center;

  cursor:pointer;
  flex:none;
}

.burger span,
.burger span::before,
.burger span::after{
  content:"";
  display:block;

  width:18px;
  height:2px;

  background:var(--text);

  position:relative;

  transition:.2s;
}

.burger span::before{
  position:absolute;
  top:-6px;
}

.burger span::after{
  position:absolute;
  top:6px;
}


/* ============================================================
   MEGA MENU
   ============================================================ */

.has-mega{
  position:relative;
}

.mega{
  position:absolute;

  top:100%;
  left:50%;

  transform:translateX(-50%);

  width:min(760px,90vw);

  background:#fff;
  color:var(--text);

  border-radius:12px;

  box-shadow:
    0 30px 70px -24px
    rgba(0,0,0,.32);

  padding:8px 10px 18px;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 6px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  translate:0 8px;

  transition:.18s ease;

  border:1px solid var(--line);
  border-top:3px solid var(--accent);

  z-index:90;
}

.has-mega:hover .mega,
.has-mega:focus-within .mega{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  translate:0 0;
}

.mega-col{
  padding:16px 16px 0;
}

.mega-item{
  display:block;
  padding:12px 10px;
  border-radius:8px;
}

.mega-item:hover{
  background:var(--paper-2);
}

.mega-item .mi-t{
  font-family:var(--font-display);
  font-weight:800;
  font-size:14.5px;
  color:var(--text);

  display:flex;
  align-items:center;
  gap:9px;
}

.mega-item .mi-t svg{
  color:var(--accent);
  width:16px;
  height:16px;
  flex:none;
}

.mega-item .mi-d{
  font-size:12.5px;
  color:var(--text-dim);
  margin-top:3px;
  padding-left:0;
}

.mega-sub{
  padding-left:25px;
  margin-top:2px;
}

.mega-sub a{
  display:block;
  font-size:12.5px;
  font-family:var(--font-mono);
  color:var(--text-dim);
  padding:6px 0;
}

.mega-sub a:hover{
  color:var(--accent-dark);
}

.mega-small{
  width:min(240px,90vw);
  display:block;
  padding:14px 10px;
}

.mega-small .mega-item{
  padding:11px 14px;
}

.mega-small .mi-t{
  font-size:13.5px;
  font-weight:700;
}


/* ============================================================
   GENERIC SECTIONS
   ============================================================ */

section:not(.elementor-section){
  padding:84px 0;
}

.section-tight{
  padding:54px 0;
}

.sec-head{
  max-width:680px;
  margin-bottom:46px;
}

.sec-head h2{
  font-size:clamp(25px,2.8vw,40px);
}

.sec-head p{
  color:var(--text-dim);
  font-size:16.5px;
}

.sec-head.center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.bg-dark{
  background:var(--ink);
  color:var(--text-inv);
}

.bg-dark .text-dim{
  color:var(--text-inv-dim);
}

.bg-alt{
  background:var(--paper-2);
}


/* ============================================================
   GENERIC GRIDS
   ============================================================ */

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
}

.tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--accent-soft);
  color:var(--accent-dark);
  padding:5px 10px;
  border-radius:20px;
  font-weight:700;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;

  padding:14px 26px;

  border-radius:7px;
  font-weight:800;
  font-size:14.5px;

  transition:.18s;

  cursor:pointer;
  border:1px solid transparent;

  font-family:var(--font-display);
}

.btn svg{
  width:15px;
  height:15px;
  flex:none;
}

.btn-accent{
  background:
    linear-gradient(
      135deg,
      var(--red) 0%,
      var(--ink) 100%
    );

  color:#fff;

  box-shadow:
    0 14px 30px -12px
    rgba(226,59,52,.55);
}

.btn-accent:hover{
  filter:brightness(1.06);

  box-shadow:
    0 16px 36px -12px
    rgba(226,59,52,.7);

  transform:translateY(-1px);
}

.btn-ghost{
  border:1px solid rgba(255,255,255,.28);
  color:var(--text-inv);
  background:rgba(255,255,255,.04);
}

.btn-ghost:hover{
  border-color:#fff;
  background:rgba(255,255,255,.1);
}

.btn-outline{
  border:1px solid var(--line);
  color:var(--text);
  background:#fff;
}

.btn-outline:hover{
  border-color:var(--accent);
  color:var(--accent-dark);
  background:var(--accent-soft);
}

.divider-trace{
  height:1px;
  background:var(--line);
}


/* ============================================================
   FORMS
   ============================================================ */

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:16px;
}

.field.full{
  grid-column:1/-1;
}

.field label{
  font-family:var(--font-body);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-dim);
}

.field input,
.field select,
.field textarea{
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 14px;

  font-family:var(--font-body);
  font-size:14.5px;

  background:#fff;
  color:var(--text);
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent);
  outline:none;

  box-shadow:
    0 0 0 3px
    var(--accent-soft);
}

.field textarea{
  resize:vertical;
  min-height:110px;
}

.dyn-form-card,
.xpeak-form{
  margin-bottom:28px;

  background:#fff;

  border:1px solid var(--line);
  border-radius:16px;

  padding:30px;
}

.dyn-form-card h2,
.dyn-form-card .xpeak-form-title,
.xpeak-form-title{
  font-family:var(--font-body);
  font-size:20px;
  margin-bottom:22px;
}

.dyn-form-status,
.xpeak-form-status{
  font-family:var(--font-body);
  font-size:12.5px;
  margin-top:14px;
  display:none;
}

.dyn-form-status.ok,
.xpeak-form-status.ok{
  color:var(--success);
  display:block;
}

.dyn-form-status.err,
.xpeak-form-status.err{
  color:var(--danger);
  display:block;
}

.xpeak-form-empty{
  color:var(--text-dim);
  font-family:var(--font-body);
  font-size:13.5px;
}

.xpeak-field{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:16px;
}

.xpeak-field label{
  font-family:var(--font-body);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-dim);
}

.xpeak-field input[type="text"],
.xpeak-field input[type="email"],
.xpeak-field input[type="tel"],
.xpeak-field input[type="number"],
.xpeak-field input[type="date"],
.xpeak-field select,
.xpeak-field textarea,
.xpeak-field input[type="file"]{
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 14px;

  font-family:var(--font-body);
  font-size:14.5px;

  background:#fff;
  color:var(--text);
}

.xpeak-field textarea{
  resize:vertical;
  min-height:110px;
}

.xpeak-radio-group,
.xpeak-checkbox-opt{
  display:flex;
  flex-direction:column;
  gap:6px;

  font-family:var(--font-body);
  font-size:14px;
}

.xpeak-radio-opt{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
}

.xpeak-forms-list{
  display:flex;
  flex-direction:column;
  gap:28px;
}


/* ============================================================
   ARTICLE
   ============================================================ */

.entry-content{
  font-size:16.5px;
  color:var(--text);
}

.entry-content h2{
  font-size:26px;
  margin-top:1.4em;
}

.entry-content h3{
  font-size:20px;
  margin-top:1.2em;
}

.entry-content img{
  border-radius:var(--radius);
  margin:20px 0;
}

.entry-content a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}

.comments-area{
  margin-top:48px;
  padding-top:36px;
  border-top:1px solid var(--line);
}

.comment-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.comment-list li{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
  background:#fff;
}

.footer-col{
  color:var(--text-inv-dim);
}


/* ============================================================
   FOOTER
   ============================================================ */

footer.site-footer{
  background:var(--ink);
  color:var(--text-inv-dim);

  padding:68px 0 28px;

  position:relative;
}

footer.site-footer::before{
  content:"";

  position:absolute;

  top:0;
  left:0;
  right:0;

  height:3px;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--red)
    );
}

.foot-grid{
  width:100%;
  max-width:var(--content-width);

  margin:0 auto;

  display:grid;

  grid-template-columns:
    1.6fr
    1fr
    1fr
    1.2fr;

  gap:40px;

  padding-left:20px;
  padding-right:20px;

  padding-bottom:42px;

  border-bottom:1px solid var(--line-dark);
}

.foot-brand img{
  height:60px;
  margin-bottom:18px;
}

.foot-brand p{
  font-size:14px;
  max-width:32ch;
  color:var(--text-inv-dim);
}

.foot-col h4{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-inv);
  margin-bottom:16px;
}

.foot-col a{
  display:block;
  font-size:14px;
  padding:6px 0;
  color:var(--text-inv-dim);
  transition:.15s;
}

.foot-col a:hover{
  color:var(--red);
}

.foot-bottom{
  width:100%;
  max-width:var(--content-width);

  margin:0 auto;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding-top:26px;
  padding-left:20px;
  padding-right:20px;

  font-size:12.5px;

  flex-wrap:wrap;
  gap:12px;

  color:var(--text-inv-dim);
}

.social{
  display:flex;
  gap:10px;
}

.social a{
  width:36px;
  height:36px;

  border:1px solid var(--line-dark);
  border-radius:8px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--text-inv-dim);
  transition:.15s;
}

.social a svg{
  width:16px;
  height:16px;
}

.social a:hover{
  border-color:var(--red);
  color:var(--red);
}


/* ============================================================
   TABLET
   ============================================================ */

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

  .grid-3,
  .grid-4{
    grid-template-columns:1fr 1fr;
  }

  .foot-grid{
    grid-template-columns:1fr 1fr;
    row-gap:34px;
  }

  nav.primary > .nlink{
    padding-left:10px;
    padding-right:10px;
    font-size:13px;
  }

  .nav-row{
    gap:15px;
  }

  .nav-cta{
    padding-left:16px;
    padding-right:16px;
  }

}


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

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

  /* HEADER */

  .topbar{
    position:static;
  }

  header.site{
    top:0 !important;
  }

  nav.primary{
    display:none;
  }

  .burger{
    display:flex;
  }

  .topbar .t-row{
    gap:14px;
  }

  .topbar .wrap{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;

    padding-top:10px;
    padding-bottom:10px;

    padding-left:20px;
    padding-right:20px;
  }

  .t-right{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }


  /* NAV */

  .nav-row{
    width:100%;

    padding:4px 18px;

    gap:15px;

    min-height:56px;
  }

  .brand img{
    height:40px !important;
    max-width:170px !important;
  }


  /* GRID */

  .grid-2,
  .grid-3,
  .grid-4,
  .form-grid{
    grid-template-columns:1fr;
  }


  /* FOOTER */

  .foot-grid{
    grid-template-columns:1fr;

    padding-left:20px;
    padding-right:20px;

    gap:30px;
  }

  .foot-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    text-align:left;

    padding-left:20px;
    padding-right:20px;
  }


  /* SECTIONS */

  section:not(.elementor-section){
    padding:58px 0;
  }


  /* FORMS */

  .field input,
  .field select,
  .field textarea,

  .xpeak-field input,
  .xpeak-field select,
  .xpeak-field textarea{
    font-size:16px;
  }


  /* TABLES */

  table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }


  /* TOUCH TARGETS */

  a,
  button,
  .btn,
  .nlink{
    min-height:40px;
  }

}


/* ============================================================
   MOBILE DRAWER
   ============================================================ */

.mnav{
  position:fixed;

  inset:0;

  background:var(--ink);

  z-index:100;

  transform:translateX(100%);

  transition:.25s;

  overflow-y:auto;

  display:block;
}

.mnav.open{
  transform:translateX(0);
}

.mnav .mnav-top{
  display:flex;

  justify-content:space-between;
  align-items:center;

  padding:18px 22px;

  border-bottom:1px solid var(--line-dark);
}

.mnav a{
  color:var(--text-inv);
}

.mnav-close{
  background:none;
  border:1px solid var(--line-dark);

  width:38px;
  height:38px;

  border-radius:8px;

  color:var(--text-inv);

  font-size:18px;
}

.mnav-body{
  padding:10px 22px 40px;
}

.mnav-link{
  display:block;

  padding:16px 0;

  font-family:var(--font-display);
  font-size:19px;

  border-bottom:1px solid var(--line-dark);
}

.mnav-group summary{
  padding:16px 0;

  font-family:var(--font-display);
  font-size:19px;

  border-bottom:1px solid var(--line-dark);

  cursor:pointer;
  list-style:none;
}

.mnav-group summary::-webkit-details-marker{
  display:none;
}

.mnav-sub{
  padding:6px 0 14px 12px;
}

.mnav-sub a{
  display:block;

  padding:9px 0;

  font-size:14.5px;

  color:var(--text-inv-dim);

  font-family:var(--font-mono);
}

.mnav-cta{
  margin-top:22px;
}


/* ============================================================
   LOGO
   ============================================================ */

/* FIXED: 78px was making header too tall */
.brand img,
.site-logo-img,
.custom-logo,
.custom-logo-link img{
  height:52px !important;
  width:auto !important;

  max-width:240px !important;

  object-fit:contain !important;
  display:block;
}

@media (max-width:767px){

  .brand img,
  .site-logo-img,
  .custom-logo,
  .custom-logo-link img{
    height:40px !important;
    max-width:170px !important;
  }

}


/* ============================================================
   ELEMENTOR RESPONSIVE FOUNDATION
   ============================================================ */

.elementor,
.elementor-page{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow-x:hidden;
}

.elementor *,
.elementor *::before,
.elementor *::after{
  box-sizing:border-box;
}

.elementor .e-con,
.elementor .e-con-inner{
  box-sizing:border-box;
  max-width:100%;
}

.elementor img{
  max-width:100%;
  height:auto;
}

.elementor iframe,
.elementor video{
  max-width:100%;
}

.elementor-widget{
  max-width:100%;
  min-width:0;
}

.elementor-widget-container{
  max-width:100%;
  min-width:0;
}


/* ============================================================
   TEXT
   ============================================================ */

.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor p,
.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6{
  max-width:100%;
  overflow-wrap:break-word;
  word-wrap:break-word;
}


/* ============================================================
   FLEX SAFETY
   ============================================================ */

.elementor .e-con > .e-con,
.elementor .e-con > .elementor-element{
  min-width:0;
  max-width:100%;
}


/* ============================================================
   ELEMENTOR TABLET
   ============================================================ */

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

  .elementor .e-con{
    max-width:100%;
    box-sizing:border-box;
  }

  .elementor .e-con-inner{
    max-width:100%;
    width:100%;
    box-sizing:border-box;
  }

  .elementor .e-con.e-con-full{
    width:100%;
    max-width:100%;
  }

  .elementor img{
    max-width:100%;
    height:auto;
  }

  .elementor-widget-image img{
    max-width:100%;
    height:auto;
    object-fit:contain;
  }

  .elementor .elementor-button{
    max-width:100%;
    box-sizing:border-box;
  }

  .elementor h1,
  .elementor h2,
  .elementor h3,
  .elementor h4,
  .elementor h5,
  .elementor h6{
    max-width:100%;
  }

  .elementor input,
  .elementor select,
  .elementor textarea{
    max-width:100%;
    box-sizing:border-box;
  }

  .elementor table{
    max-width:100%;
  }

}


/* ============================================================
   ELEMENTOR MOBILE
   ============================================================ */

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

  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  .elementor,
  .elementor-page{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .elementor .e-con,
  .elementor .e-con-inner{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  .elementor .e-con{
    min-width:0;
    box-sizing:border-box;
  }

  .elementor .e-con > .e-con,
  .elementor .e-con > .elementor-element{
    min-width:0;
    max-width:100%;
  }


  /* IMAGES */

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

  .elementor-widget-image{
    max-width:100%;
  }

  .elementor-widget-image img{
    max-width:100%;
    height:auto;
    object-fit:contain;
  }


  /* BACKGROUND */

  .elementor .e-con{
    background-repeat:no-repeat;
  }


  /* TEXT */

  .elementor h1,
  .elementor h2,
  .elementor h3,
  .elementor h4,
  .elementor h5,
  .elementor h6,
  .elementor p{
    max-width:100%;
    overflow-wrap:break-word;
    word-break:normal;
  }


  /* BUTTONS */

  .elementor .elementor-button{
    max-width:100%;
    box-sizing:border-box;
    white-space:normal;
  }

  .elementor .elementor-button-wrapper{
    max-width:100%;
  }


  /* FORMS */

  .elementor input,
  .elementor textarea,
  .elementor select{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }


  /* VIDEO */

  .elementor iframe,
  .elementor video{
    max-width:100%;
    width:100%;
  }


  /* TABLE */

  .elementor table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }


  /* SPACING */

  .elementor .e-con{
    scroll-margin-top:80px;
  }


  /* WIDGETS */

  .elementor-widget-heading,
  .elementor-widget-text-editor,
  .elementor-widget-button,
  .elementor-widget-image,
  .elementor-widget-icon,
  .elementor-widget-icon-list,
  .elementor-widget-divider,
  .elementor-widget-form{
    max-width:100%;
    min-width:0;
  }


  /* ICON LIST */

  .elementor-icon-list-items,
  .elementor-icon-list-item{
    max-width:100%;
  }

  .elementor-icon-list-text{
    overflow-wrap:break-word;
  }


  /* HEADINGS */

  .elementor h1{
    font-size:clamp(28px,8vw,48px);
    line-height:1.12;
  }

  .elementor h2{
    font-size:clamp(24px,6.5vw,40px);
    line-height:1.18;
  }

  .elementor h3{
    font-size:clamp(21px,5.5vw,32px);
    line-height:1.22;
  }


  /* PARAGRAPH */

  .elementor .elementor-widget-text-editor{
    font-size:15px;
    line-height:1.6;
  }


  /* FULL WIDTH */

  .elementor .e-con.e-con-full{
    max-width:100%;
  }


  /* ELEMENT SAFETY */

  .elementor-element{
    max-width:100%;
  }


  /* SVG */

  .elementor svg{
    max-width:100%;
  }


  /* BACKGROUND IMAGE */

  .elementor .e-con[style*="background-image"]{
    background-repeat:no-repeat;
  }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

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

  .elementor .e-con,
  .elementor .e-con-inner{
    max-width:100%;
    box-sizing:border-box;
  }

  .elementor h1{
    font-size:clamp(26px,9vw,38px);
  }

  .elementor h2{
    font-size:clamp(23px,8vw,34px);
  }

  .elementor h3{
    font-size:clamp(20px,7vw,29px);
  }

  .elementor .elementor-widget-text-editor{
    font-size:15px;
  }

  .elementor .elementor-button{
    max-width:100%;
    white-space:normal;
  }

}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

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

  .elementor h1{
    font-size:26px;
  }

  .elementor h2{
    font-size:23px;
  }

  .elementor h3{
    font-size:20px;
  }

  .elementor .elementor-widget-text-editor{
    font-size:14px;
  }

}


/* ============================================================
   MOTION
   ============================================================ */

@media (prefers-reduced-motion:no-preference){

  .reveal{
    opacity:0;

    transform:translateY(26px);

    transition:
      opacity .7s cubic-bezier(.16,1,.3,1),
      transform .7s cubic-bezier(.16,1,.3,1);
  }

  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  .btn,
  .card,
  .mega-item,
  .nav-cta{
    transition:
      transform .25s cubic-bezier(.16,1,.3,1),
      box-shadow .25s ease,
      border-color .25s ease,
      background .2s ease,
      filter .2s ease,
      color .2s ease;
  }

  .btn-accent:hover{
    transform:translateY(-2px);
  }

}

@media (prefers-reduced-motion:reduce){

  .reveal{
    opacity:1;
    transform:none;
  }

}


/* ============================================================
   MOBILE / TABLET HAMBURGER MENU
   ============================================================ */

.mnav{
  position:fixed;
  inset:0;

  width:100%;
  height:100dvh;

  background:#ffffff;
  color:var(--text);

  z-index:99999;

  transform:translateX(100%);
  visibility:hidden;
  opacity:0;

  transition:
    transform .28s ease,
    opacity .2s ease,
    visibility .28s ease;

  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.mnav.open{
  transform:translateX(0);
  visibility:visible;
  opacity:1;
}


/* ============================================================
   MOBILE MENU TOP / LOGO
   ============================================================ */

.mnav-top{
  min-height:76px;
  padding:12px 22px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  background:#ffffff;
  border-bottom:1px solid var(--line);

  position:sticky;
  top:0;
  z-index:5;
}

.mnav-logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  min-width:0;
}

.mnav-logo-img{
  display:block;

  width:auto;
  height:48px;
  max-width:190px;

  object-fit:contain;
}

.mnav-logo-text{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:800;
  color:var(--accent);
}


/* ============================================================
   CLOSE BUTTON
   ============================================================ */

.mnav-close{
  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  background:#ffffff;
  border:1px solid var(--line);
  border-radius:7px;

  color:var(--text);

  font-size:19px;
  line-height:1;

  cursor:pointer;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.mnav-close:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}


/* ============================================================
   MENU BODY
   ============================================================ */

.mnav-body{
  padding:12px 22px 40px;
}

.mnav-menu,
.mnav-menu ul{
  list-style:none;
  margin:0;
  padding:0;
}


/* ============================================================
   MAIN MENU ITEMS
   ============================================================ */

.mnav-menu > li{
  position:relative;
  border-bottom:1px solid var(--line);
}

.mnav-menu > li > a{
  display:flex;
  align-items:center;

  min-height:58px;
  padding:14px 45px 14px 4px;

  color:var(--text);
  text-decoration:none;

  font-family:var(--font-display);
  font-size:16px;
  font-weight:750;

  transition:
    color .18s ease,
    background .18s ease;
}

.mnav-menu > li > a:hover{
  color:var(--accent);
}


/* ============================================================
   SUBMENU
   ============================================================ */

.mnav-menu .sub-menu{
  display:none;

  margin:0 0 12px;
  padding:6px 0 8px 16px;

  background:#fafafa;
  border-left:2px solid var(--accent);
}

.mnav-menu .sub-menu.is-open{
  display:block;
}

.mnav-menu .sub-menu li{
  position:relative;
}

.mnav-menu .sub-menu li > a{
  display:block;

  padding:10px 12px;

  color:var(--text-dim);
  text-decoration:none;

  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;

  line-height:1.45;

  transition:
    color .18s ease,
    background .18s ease;
}

.mnav-menu .sub-menu li > a:hover{
  color:var(--accent);
  background:var(--accent-soft);
}


/* ============================================================
   THIRD LEVEL
   ============================================================ */

.mnav-menu .sub-menu .sub-menu{
  margin:3px 0 7px 10px;
  padding:4px 0 4px 14px;

  background:transparent;
  border-left:1px solid #dddddd;
}

.mnav-menu .sub-menu .sub-menu li > a{
  padding:8px 10px;

  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:500;

  color:var(--text-dim);
}

.mnav-menu .sub-menu .sub-menu li > a:hover{
  color:var(--accent);
  background:transparent;
}


/* ============================================================
   DROPDOWN TOGGLE BUTTON
   ============================================================ */

.mnav-toggle{
  position:absolute;

  right:2px;
  top:8px;

  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:6px;

  background:transparent;
  color:var(--text);

  cursor:pointer;

  font-size:22px;
  line-height:1;

  transition:
    background .18s ease,
    color .18s ease,
    transform .2s ease;
}

.mnav-toggle:hover{
  background:var(--accent-soft);
  color:var(--accent);
}

.mnav-toggle::before{
  content:"";

  width:8px;
  height:8px;

  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;

  transform:rotate(45deg);

  transition:transform .2s ease;
}

.mnav-toggle.is-open::before{
  transform:rotate(225deg);
}


/* ============================================================
   REQUEST DEMO
   ============================================================ */

.mnav-cta{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  min-height:50px;

  margin-top:24px;
  padding:13px 20px;

  background:var(--accent);

  border:1px solid var(--accent);
  border-radius:7px;

  color:#ffffff !important;
  text-decoration:none;

  font-family:var(--font-display);
  font-size:14px;
  font-weight:800;

  transition:
    background .18s ease,
    transform .18s ease;
}

.mnav-cta:hover{
  background:var(--accent-dark);
  color:#ffffff !important;
}


/* ============================================================
   TABLET MOBILE MENU
   ============================================================ */

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

  .mnav-top{
    padding-left:30px;
    padding-right:30px;
  }

  .mnav-body{
    max-width:700px;
    margin:0 auto;

    padding-left:30px;
    padding-right:30px;
  }

  .mnav-menu > li > a{
    font-size:17px;
  }

  .mnav-menu .sub-menu li > a{
    font-size:14.5px;
  }

}


/* ============================================================
   MOBILE MENU
   ============================================================ */

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

  .mnav-top{
    min-height:68px;
    padding:10px 18px;
  }

  .mnav-logo-img{
    height:40px;
    max-width:170px;
  }

  .mnav-body{
    padding:8px 18px 30px;
  }

  .mnav-menu > li > a{
    min-height:54px;
    font-size:15.5px;
  }

  .mnav-menu .sub-menu{
    padding-left:12px;
  }

  .mnav-menu .sub-menu li > a{
    font-size:13.5px;
  }

}