/* ── JASS GLOBAL LEGAL CONSULTANCY — Global Stylesheet ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=Jost:wght@300;400;500;600&display=swap');

/* WF Visual Sans — variable font via Webflow CDN */
@font-face {
  font-family: 'WF Visual Sans';
  src: url('https://dhygzobemt712.cloudfront.net/Fonts/VF/WFVisualSansVF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy:       #080d1a;
  --navy-mid:   #0d1528;
  --navy-light: #131e38;
  --navy-card:  #0f1a30;
  --gold:       #c9a84c;
  --gold-light: #e2c06a;
  --gold-pale:  #f0dca8;
  --cream:      #f7f2e8;
  --text-light: #e6e5df;
  --text-muted: #afafaf;
  --white:      #ffffff;
  --border:     rgba(201,168,76,0.22);
  --border-lt:  rgba(255,255,255,0.06);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:18px; }

body {
  background: var(--navy);
  color: var(--text-light);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  min-height: 100vh;
  font-size: 1rem; /* 18px */
  line-height: 1.5;
}

/* grain */
body::after {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9998; opacity:.5;
}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { font-family:'Cormorant Garamond',serif; font-weight:500; line-height:1; color:var(--white); }
h1 {
  font-family: 'WF Visual Sans', 'Cormorant Garamond', serif;
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}
h2 { font-size:clamp(1.9rem,3.2vw,3rem); }
h3 { font-size:clamp(1.2rem,1.8vw,1.65rem); }
h4 { font-size:1rem; }
p  { line-height:1.5; color:var(--text-light); font-size:1rem; }
a  { color:var(--gold); text-decoration:none; transition:color .3s; }
a:hover { color:var(--gold-light); }

/* ── LAYOUT ── */
.container   { max-width:1200px; margin:0 auto; padding:0 2rem; }
.container-sm{ max-width:860px;  margin:0 auto; padding:0 2rem; }
.section     { padding:6rem 0; }
.section-sm  { padding:4rem 0; }

/* ── LABELS / DIVIDERS ── */
.label {
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1rem;
}
.label::before { content:''; width:24px; height:1px; background:var(--gold); flex-shrink:0; }

.divider { width:52px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); margin:1.4rem 0; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Jost',sans-serif; font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.82rem 2rem; border:1px solid var(--gold); color:var(--gold);
  background:transparent; cursor:pointer; transition:all .35s ease;
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn::before {
  content:''; position:absolute; inset:0; background:var(--gold);
  transform:translateX(-101%); transition:transform .35s ease; z-index:0;
}
.btn span { position:relative; z-index:1; }
.btn:hover { color:var(--navy); }
.btn:hover::before { transform:translateX(0); }
.btn-solid { background:var(--gold); color:var(--navy); }
.btn-solid::before { background:var(--gold-light); }
.btn-solid:hover { color:var(--navy); }
.btn-sm { padding:.6rem 1.4rem; font-size:.67rem; }

/* ── NAVBAR ── */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.3rem 0; transition:all .4s ease; border-bottom:1px solid transparent;
}
#navbar.scrolled {
  background:rgba(8,13,26,.96); backdrop-filter:blur(20px);
  border-color:var(--border); padding:.85rem 0;
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
/* Navbar brand logo */
.nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.nav-brand img {
  height: 50px;       
  width: auto;
  display: block;
}
#navbar.scrolled .nav-brand img {
  height: 38px;
  transition: height 0.4s ease;
}
/* .nav-brand { display:flex; flex-direction:column; gap:.12rem; flex-shrink:0; }
.nav-brand-name { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:600; color:var(--white); letter-spacing:.05em; }
.nav-brand-sub  { font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:400; } */


.nav-links { display:flex; gap:2.2rem; list-style:none; align-items:center; }
.nav-links a {
  font-size:.72rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-light); transition:color .3s; position:relative; padding-bottom:2px;
}
.nav-links a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--gold); transition:width .3s; }
.nav-links a:hover,
.nav-links a.active { color:var(--white); }
.nav-links a:hover::after,
.nav-links a.active::after { width:100%; }
.nav-links .has-drop { position:relative; }
.nav-links .has-drop > a::after { display:none; }
.nav-links .has-drop:hover .dropdown { opacity:1; pointer-events:auto; transform:translateY(0); }
/* invisible bridge fills the gap between nav link and dropdown so hover is unbroken */
.nav-links .has-drop::after {
  content:''; position:absolute; top:100%; left:-1.5rem; right:-1.5rem;
  height:1.2rem; background:transparent;
}
.dropdown {
  position:absolute; top:calc(100% + 0.6rem); left:-1.5rem;
  background:var(--navy-mid); border:1px solid var(--border); min-width:240px;
  padding:.5rem 0; opacity:0; pointer-events:none;
  transform:translateY(-6px); transition:all .25s ease;
  z-index:200;
}
.dropdown a {
  display:block; padding:.7rem 1.4rem; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted);
  transition:all .22s;
}
.dropdown a:hover { color:var(--gold); background:rgba(201,168,76,.05); padding-left:1.8rem; }
.nav-cta { margin-left:.5rem; flex-shrink:0; }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span { width:24px; height:1px; background:var(--gold); display:block; transition:all .3s; }

/* ── MOBILE MENU ── */
.mobile-nav {
  display:none; position:fixed; inset:0; background:var(--navy); z-index:999;
  flex-direction:column; align-items:center; justify-content:center; gap:1.8rem;
}
.mobile-nav.open { display:flex; }
.mobile-nav a { font-family:'Cormorant Garamond',serif; font-size:2rem; color:var(--white); letter-spacing:.04em; transition:color .3s; }
.mobile-nav a:hover { color:var(--gold); }
.mobile-close { position:absolute; top:1.5rem; right:2rem; background:none; border:none; color:var(--gold); font-size:2rem; cursor:pointer; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  padding:9rem 0 5rem; position:relative; overflow:hidden;
  border-bottom:1px solid var(--border-lt);
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 80% 50%, rgba(201,168,76,.05) 0%, transparent 60%);
}
.page-hero-line {
  position:absolute; top:-10%; right:5%; width:50%; height:120%;
  border:1px solid rgba(201,168,76,.06); border-radius:50%;
  transform:rotate(-12deg); pointer-events:none;
}
.page-hero .breadcrumb {
  display:flex; gap:.6rem; align-items:center; margin-bottom:1.5rem;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);
}
.page-hero .breadcrumb a { color:var(--text-muted); }
.page-hero .breadcrumb a:hover { color:var(--gold); }
.page-hero .breadcrumb span { color:var(--gold); }

/* ── CARDS ── */
.card {
  background:var(--navy-card); border:1px solid var(--border-lt);
  padding:2.2rem; position:relative; transition:border-color .3s, transform .3s;
}
.card:hover { border-color:var(--border); transform:translateY(-3px); }
.card-corner::before {
  content:''; position:absolute; top:-1px; left:-1px;
  width:40px; height:40px; border-top:1.5px solid var(--gold); border-left:1.5px solid var(--gold);
}
.card-corner::after {
  content:''; position:absolute; bottom:-1px; right:-1px;
  width:40px; height:40px; border-bottom:1.5px solid var(--gold); border-right:1.5px solid var(--gold);
}
.card-glow {
  position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0); transition:transform .4s ease;
}
.card:hover .card-glow { transform:scaleX(1); }

/* ── TAGS ── */
.tag {
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.22rem .6rem; border:1px solid rgba(201,168,76,.25); color:var(--gold);
}

/* ── SECTION HEADER ── */
.section-header { max-width:620px; margin-bottom:3.5rem; }
.section-header.center { max-width:700px; margin-left:auto; margin-right:auto; text-align:center; }
.section-header.center .divider { margin-left:auto; margin-right:auto; }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── STAT STRIP ── */
.stat-strip {
  background:var(--navy-mid); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:2.2rem 0;
}
.stat-strip .inner { display:grid; grid-template-columns:repeat(4,1fr); }
.stat-item { text-align:center; padding:1rem; border-right:1px solid var(--border-lt); }
.stat-item:last-child { border-right:none; }
.stat-num { font-family:'Cormorant Garamond',serif; font-size:2.6rem; font-weight:300; color:var(--gold); display:block; line-height:1; }
.stat-label { font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); margin-top:.3rem; display:block; }

/* ── DISCLAIMER POPUP ── */
#disclaimer-popup {
  position:fixed; inset:0; background:rgba(4,7,15,.94); backdrop-filter:blur(12px);
  z-index:10000; display:flex; align-items:center; justify-content:center; padding:2rem;
}
.popup-box {
  background:var(--navy-light); border:1px solid var(--border);
  max-width:560px; width:100%; padding:3rem; position:relative;
}
.popup-box::before {
  content:''; position:absolute; top:-1px; left:-1px;
  width:50px; height:50px; border-top:2px solid var(--gold); border-left:2px solid var(--gold);
}
.popup-box h3 { margin-bottom:1rem; }
.popup-box p  { font-size:.9rem; line-height:1.85; color:var(--text-muted); margin-bottom:1.5rem; }

/* ── FOOTER ── */
footer {
  background:var(--navy-mid); border-top:1px solid var(--border); padding:4rem 0 0;
}
.footer-grid {
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1.2fr; gap:2.5rem;
  padding-bottom:3rem; border-bottom:1px solid var(--border-lt);
}
.footer-brand p { font-size:.88rem; line-height:1.85; color:var(--text-muted); margin-top:1rem; max-width:280px; }
/* Footer brand logo */
.footer-brand-logo img {
  height: 75px;
  width: auto;
  display: block;
  margin-bottom: 0.8rem;
}
.footer-col h4 {
  font-family:'Jost',sans-serif; font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1.4rem;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.65rem; }
.footer-col ul li a { font-size:.85rem; color:var(--text-muted); transition:color .3s; }
.footer-col ul li a:hover { color:var(--gold-light); }
.footer-col .contact-item { display:flex; gap:.8rem; align-items:flex-start; margin-bottom:.9rem; }
.footer-col .contact-item .ci-icon { color:var(--gold); font-size:.9rem; margin-top:.1rem; flex-shrink:0; width:16px; }
.footer-col .contact-item p { font-size:.84rem; line-height:1.65; color:var(--text-muted); }
.footer-col .contact-item a { font-size:.84rem; color:var(--text-muted); }
.footer-col .contact-item a:hover { color:var(--gold); }
.footer-disclaimer {
  background:rgba(0,0,0,.25); border:1px solid rgba(201,168,76,.1);
  padding:1.4rem 1.8rem; margin-top:2rem; font-size:.78rem; line-height:1.8; color:var(--text-muted);
}
.footer-disclaimer strong { color:var(--gold); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; }
.footer-bottom {
  padding:1.3rem 0; display:flex; justify-content:space-between; align-items:center;
}
.footer-bottom p { font-size:.76rem; color:var(--text-muted); }
.footer-socials { display:flex; gap:.6rem; margin-top:1.2rem; }
.footer-socials a {
  width:34px; height:34px; border:1px solid var(--border-lt); display:flex;
  align-items:center; justify-content:center; font-size:.78rem; color:var(--text-muted);
  transition:all .3s;
}
.footer-socials a:hover { color:var(--gold); border-color:var(--gold); }

/* ── FORM ELEMENTS ── */
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-group label { font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-muted); }
.form-group input,
.form-group select,
.form-group textarea {
  background:var(--navy-light); border:1px solid var(--border-lt); color:var(--white);
  font-family:'Jost',sans-serif; font-size:.92rem; padding:.82rem 1rem;
  outline:none; transition:border-color .3s; width:100%; font-weight:300;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--text-muted); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--gold); }
.form-group select option { background:var(--navy-mid); }
.form-group textarea { resize:vertical; min-height:110px; }
.form-note {
  font-size:.76rem; color:var(--text-muted); line-height:1.7;
  padding:.7rem 1rem; border:1px solid var(--border-lt); background:rgba(0,0,0,.2);
}

/* ── PRACTICE LIST ITEMS ── */
.practice-list { list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-top:1rem; }
.practice-list li { display:flex; gap:.85rem; align-items:flex-start; font-size:.92rem; line-height:1.7; }
.practice-list li::before { content:'◆'; color:var(--gold); font-size:.55rem; margin-top:.48rem; flex-shrink:0; }

/* ── RESPONSIVE ── */
@media (max-width:1050px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .stat-strip .inner { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:780px) {
  .nav-links, .nav-cta { display:none; }
  .hamburger { display:flex; }
  .footer-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .section { padding:4rem 0; }
  .container { padding:0 1.2rem; }
}