:root{
  --primary: #0c2f3e;
  --site-header: #1632476c;
  --tb-text: #2b2f33;
  --tb-subtext: #5a6168;
  --tb-accent: #00C2A8;     /* your teal */
}

.btn{
  max-width: 100% !important;
}


:root { --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* === Base / WP admin bar fixes === */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  margin-top: 0px !important;
  font-family: var(--font-sans);
  overflow-x: hidden !important;
}
body.no-scroll { overflow: hidden; }

body.admin-bar { margin-top: 0 !important; }
#wpadminbar { position: fixed; top: 0; }

/* === Hero / header background === */
.header-section{
  width: 100%;
  height: 420px;
  /* background-image: url('/wp-content/themes/Archive/assets/images/gray-blue-white-grainy-gradient-background-poster.png'); */
  background-image: url('/wp-content/themes/Archive/assets/images/slides/slide1.png');
  background-size: cover;
  background-position: 60% center;
  overflow: hidden !important;
}

/* Overlay gradient */
.header-section .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0) 100%);
  z-index: 1;
}

.header-section * {
  position: relative;
  z-index: 2;
}

.site-header {
  /* glossy black look */
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.85),
      rgba(15, 15, 15, 0.75)
  );
  backdrop-filter: saturate(160%) blur(6px);
  -webkit-backdrop-filter: saturate(160%) blur(6px); /* Safari */

  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* subtle reflection edge */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 
              inset 0 1px 2px rgba(255, 255, 255, 0.05); /* adds gloss shine */

  color: rgba(255, 255, 255, 0.92); /* ensure text pops */
}


/* === Header layout (brand | nav | actions) === */
.site-header .container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 20px;

  /* grid for perfect left/center/right alignment */
  display: grid;
  grid-template-columns: auto 1fr auto; /* brand | nav | actions */
  align-items: center;
  column-gap: 28px;
}


/* Brand */
.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: .2px;
}
.brand img{ height: 36px; width: auto; display: block; }





/* keep list horizontal + centered block */
.primary-nav{ justify-self:right; }
.primary-nav > ul{
  display:flex;
  gap:52px;
  margin:0;
  padding:0;
  list-style:none;
  align-items:center;
}




/* anchor for the underline */
.primary-nav li{ position: relative;}
.primary-nav a{
  display:inline-block;
  color:rgba(255,255,255,.95);
  text-decoration:none;
  font-weight:500;
  letter-spacing:.15px;
  padding:14px 0 18px;
  line-height:1;
}

/* remove any old border underline */
.primary-nav li.active{ border-bottom:0; }

/* base pseudo (hidden by default) */
.primary-nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom: 6px;
  transform:translateX(-50%);
  width:110px;                 /* bar length */
  height:2px;                  /* thickness */
  background:#00C2A8;
  border-radius:999px;
  opacity:0;                   /* start hidden */
  transition:opacity .15s ease;
}

.primary-nav a.short::after{
   width:80px;  
}

/* show on hover for non-active links (optional) */
.primary-nav a:hover::after{ opacity:.6; }

/* keep the active bar visible WITHOUT hover */
.primary-nav li.active > a::after{
  opacity:1;                   /* <-- key fix */
}




.primary-nav a:hover{ opacity: .85; }

/* Actions pinned right */
.actions{
  justify-self: end;
  display: flex;
  gap: 12px;
}

/* Buttons */
.btn-header{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn-outline{
  border: 2px solid rgba(255,255,255,.75);
  color: #fff;
  background: transparent !important;
  /* backdrop-filter: saturate(140%) blur(2px); */
}
.btn-outline:hover{ opacity: .92; transform: translateY(-1px); }

.btn-fill{
  background: #fff;
  color: #243b6b !important; 
  box-shadow: 0 1px 0 rgba(0,0,0,.15), 0 6px 18px rgba(0,0,0,.15);
}
.btn-fill:hover{ transform: translateY(-1px); }

/* Subtle bottom edge line like screenshot */
.site-header{ position: relative; }
.site-header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: rgba(255,255,255,.08);
}

/* === Mobile menu === */
.hamburger{ display:none; margin-left:auto; cursor:pointer; width:32px; height:28px; position:relative; }
.hamburger span{
  position:absolute; left:0; right:0; height:2px; background:#7897aa; border-radius:10px;
  transform-origin:center; transition: transform .2s ease, opacity .2s ease, top .2s ease;

}

.hamburger span:nth-child(1){ top:3px;}
.hamburger span:nth-child(2){ top:12px;}
.hamburger span:nth-child(3){ top:21px;}

.nav-toggle{
  position: absolute; inset: 0 0 auto auto; width:1px; height:1px; opacity:0; pointer-events:none;
}

.mobile-drawer{
  display:none;
  background: linear-gradient(135deg, #0a3a55 0%, #163247 100%);
  border-top: 1px solid rgba(255,255,255,.12);
}
.mobile-drawer nav{
  display:flex; flex-direction:column; gap:18px; padding:14px 20px 22px;
}
.mobile-drawer a{ color:#fff; text-decoration:none; font-weight:600; }
.mobile-actions{ display:flex; gap: 10px;}


/* show when JS toggles .is-open on the header */
.site-header.is-open .mobile-drawer { display: block; }


/* === Responsive === */
@media (max-width: 960px){
  .site-header .container{
    display:flex;             /* simpler on mobile */
    align-items:center;
    gap: 12px;
  }

  .primary-nav, .actions{ display:none; }
  .hamburger{ display:block; margin-left:auto; }

  .nav-toggle:checked + .hamburger span:nth-child(1){ top:12px; transform: rotate(45deg); }
  .nav-toggle:checked + .hamburger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked + .hamburger span:nth-child(3){ top:12px; transform: rotate(-45deg); }

  .nav-toggle:checked ~ .mobile-drawer{ display:block; }
}

/* === Prevent first-child margin collapse (just in case) === */
.header-section { overflow: auto; }  /* or display: flow-root; */

body{
  overflow-x: hidden !important;
}



/* ===== Footer (Modern / Included) ===== */
/* 
New Footer 
! This is the new footer
*/

:root{
  --tb-navy:#003C50;        /* brand navy */
  --tb-teal:#00C2A8;        /* electric teal */
  --tb-aqua:#7FE7DC;        /* light aqua */
  --tb-ink:rgba(255,255,255,.92);
  --tb-ink-dim:rgba(255,255,255,.78);
  --tb-hair:rgba(255,255,255,.10);
  --tb-glass:rgba(255,255,255,.06);
  --tb-radius:16px;
}

.tb-footer{
  background: #0e3a45;                 /* dark teal bar */
  color: rgba(255,255,255,.92);
  position: relative;
}

/* Soft gradient background that feels “part of the page” */
.tb-footer__bg{
  position:absolute; inset:0;
  background: #0e3a45;    
  pointer-events:none;
}

/* Glass card with rounded top corners that sits inside */
.tb-footer__shell{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:28px 24px 16px;
}

.tb-footer__shell::before{
  content:"";
  position:absolute; left:12px; right:12px; top:-22px; height:44px;
  background:linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,0));
  filter:blur(8px); opacity:.5; border-radius:24px;
}

.tb-footer__grid{
  position:relative;
  /* border:1px solid var(--tb-hair); */
  /* background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); */
  /* backdrop-filter:saturate(120%) blur(6px); */
  /* -webkit-backdrop-filter:saturate(120%) blur(6px); */
  border-radius:24px 24px var(--tb-radius) var(--tb-radius);
  padding:22px clamp(16px, 3vw, 28px);
  display:grid;
  grid-template-columns: 1.3fr .9fr .8fr;
  gap:28px;
  /* box-shadow: 0 8px 28px rgba(0,0,0,.25) inset, 0 10px 24px rgba(0,0,0,.18); */
}

.tb-footer__logo{ height:28px; width:auto; display:block; }
.tb-footer__logo-row{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.tb-footer__year{ font-size:14px; color:var(--tb-ink-dim); }

.tb-footer__mission{
  margin:0;
  font-size:15px;
  line-height:1.6;
}

/* Section headings */
.tb-footer__contact h3,
.tb-footer__links h3{
  margin:0 0 10px;
  font-size:14px;
  letter-spacing:.3px;
  color:var(--tb-aqua);
  font-weight:700;
  text-transform:uppercase;
}

/* Email pill */
.tb-footer__pill{
  display:inline-flex; gap:10px; align-items:center;
  padding:10px 12px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid var(--tb-hair);
  color:var(--tb-ink);
  text-decoration:none;
  font-weight:600;
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.tb-footer__pill:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.25); }
.tb-footer__pill:focus-visible{ outline:2px solid var(--tb-aqua); outline-offset:2px; }
.tb-footer__pill svg{
  width:18px; height:18px; fill:var(--tb-aqua);
}

/* Links */
.tb-footer__links ul{
  margin:0; padding:0; list-style:none;
  display:grid; gap:10px;
}
.tb-footer__links a{
  color:var(--tb-ink);
  text-decoration:none;
  position:relative;
  display:inline-block;
  padding:4px 0;
}

.tb-footer__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0%;
  background:linear-gradient(90deg, var(--tb-teal), var(--tb-aqua));
  transition:width .18s ease;
}
.tb-footer__links a:hover::after{ width:100%; }

/* Bottom bar */
.tb-footer__bar{
  display:flex; justify-content:center; align-items:center;
  gap:12px; margin-top:14px;
  padding:10px 12px;
  border-top:1px solid var(--tb-hair);
  color:var(--tb-ink-dim);
  font-size:13.5px;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .tb-footer__grid{
    grid-template-columns: 1.1fr 1fr;
  }
}

@media (max-width: 720px){
  .tb-footer__shell{ padding:22px 16px 10px; }
  .tb-footer__grid{
    grid-template-columns: 1fr;
    gap:18px;
    border-radius:20px;
  }
  .tb-footer__logo{ height:26px; }
  .tb-footer__mission{ font-size:14.5px; }
  .tb-footer__bar{
    padding:12px 8px calc(12px + env(safe-area-inset-bottom));
    text-align:center;
  }
}


/* Footer design */
/* ! ########################### */

/* Footer design */
/* ! ########################### */
.site-footer{
  background: #0e3a45;                 /* dark teal bar */
  color: rgba(255,255,255,.92);
  position: relative;
}
.site-footer::before{                   /* faint top hairline */
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background: rgba(255,255,255,.10);
}

.site-footer .container{
  max-width: 1200px;
  margin: 0 auto;

  /* Key: fixed bar height + vertical centering */
  min-height: 84px;                     /* adjust 72–96px to taste */
  padding: 0 24px;                      /* no vertical padding */
  display: flex;
  align-items: center;                  /* center content vertically */
  justify-content: space-between;
  gap: 24px;
}

.footer-left p{ margin:0; font-size: 15px; }
.footer-left .brand{ font-weight: 800; }

.footer-right{
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.footer-right a{
  color: rgba(255,255,255,.88);
  text-decoration: none;
  font-weight: 500;
  transition: opacity .15s ease;
}
.footer-right a:hover{ opacity: .85; }
.footer-right a:focus-visible{
  outline: 2px solid rgba(255,255,255,.65);
  outline-offset: 2px;
}

/* Mobile */
/* Mobile polish */
@media (max-width: 720px){
  .site-footer .container{
    min-height: unset;                          /* let content set the height */
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: center;                        /* center everything */
    text-align: center;
    gap: 12px;
  }

  .footer-left p{
    font-size: 14px;
    line-height: 1.4;
  }

  /* Use a grid so the email sits on its own line,
     with the other links arranged neatly below */
  .footer-right{
    display: grid;
    grid-template-columns: repeat(3, auto);     /* Privacy | Terms | About */
    justify-content: center;
    align-items: center;
    gap: 14px 18px;
  }

  /* Email spans the full width on its own row */
  .footer-right a[href^="mailto:"]{
    grid-column: 1 / -1;
    font-weight: 600;
    overflow-wrap: anywhere;                    /* wrap long addresses */
  }

  .footer-right a{
    font-size: 14px;
    padding: 4px 0;                             /* comfy tap target */
  }
}

/* Extra-small phones */
@media (max-width: 420px){
  .footer-right{ grid-template-columns: repeat(2, auto); }
  .footer-right a[href^="mailto:"]{ grid-column: 1 / -1; }
}






/* 

Ready to trade without barriers
! #####################################
*/


/* 
Ready to trade without barriers
*/

:root{
  --teal: #00C2A8;
  --teal-2: #01b59c;
  --navy-1:#2e7c90;   /* top-left light */
  --navy-2:#0f4e5f;   /* mid */
  --navy-3:#0a2f39;   /* bottom-right dark */
}

/* === CTA BAND === */
.cta-band{
  position: relative;
  padding: 72px 16px 84px;
  color: #fff;
  overflow: hidden;
  background-image: url('/wp-content/themes/Archive/assets/images/gray-blue-white-grainy-gradient-background-poster.png');
}

.cta-wrap{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.cta-title{
  margin: 0 0 16px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-size: clamp(20px, 4.6vw, 25px);
}

.cta-sub{
  margin: 0 auto 28px;
  max-width: 68ch;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.75;
  color: rgba(255,255,255,.92);
}

.cta-actions{
  display: inline-flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
  text-decoration: none;
  transition: transform .05s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
}

.btn-primary{
  background: var(--teal);
  color: #ffffff;
}
.btn-primary:hover{ background: var(--teal-2); transform: translateY(-1px); }

.btn-ghost{
  background: #ffffff;
  color: #0b3a45;
}
.btn-ghost:hover{ background: #f3f6f7; transform: translateY(-1px); }

/* Mobile stack */
@media (max-width: 640px){
  .cta-band{ padding: 56px 14px 64px; }
  .cta-actions{ gap: 12px; }
  .btn{ width: 100%; }
}