/* =========================
   MERIDIAN GROUP — HYPER CRISP LAW FIRM
   Ultra white • ink black • subtle navy • clean type rhythm
   ========================= */

:root{
  --bg:#ffffff;
  --text:#0a0d12;      /* ink-black */
  --muted:#3f4652;
  --muted2:#6d7687;

  --line: rgba(10,13,18,.10);
  --line2: rgba(10,13,18,.16);

  --navy:#0b1f3b;      /* subtle */
  --navySoft: rgba(11,31,59,.06);

  --max: 1140px;
}

/* Reset */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.78;
  letter-spacing: .02px;

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  font-weight: 400;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Topbar */
.topbar{
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 0;
  gap: 16px;
}
.topbar-left{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted2);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .10px;
}
.topbar-right{ display:flex; gap: 16px; }
.toplink{
  color: var(--muted2);
  font-weight: 500;
  font-size: .92rem;
}
.toplink:hover{ color: var(--text); }

.dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--navy);
  box-shadow: 0 0 0 4px var(--navySoft);
}

/* Header */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 16px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 260px;
}
.brand-logo{
  width: 130px;
  height: 130px;
  object-fit: contain;
}
.brand-name{
  font-weight: 650;
  letter-spacing: .18px;
}
.brand-tag{
  color: var(--muted2);
  font-weight: 400;
  font-size: .90rem;
}

/* Nav */
.nav{
  display:flex;
  align-items:center;
  gap: 18px;
}
.nav a{
  color: var(--muted2);
  font-weight: 500;
  font-size: .95rem;
  padding: 10px 6px;
}
.nav a:hover{ color: var(--text); }

.menuBtn{
  display:none;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 500;
  cursor: pointer;
}
.mobileNav{
  display:none;
  padding: 10px 0 14px;
}
.mobileNav a{
  display:block;
  padding: 12px 6px;
  color: var(--muted2);
  font-weight: 500;
  border-top: 1px solid var(--line);
}
.mobileNav a:hover{ color: var(--text); }

/* Buttons (crisper + smaller) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: transparent;
  font-weight: 600;
  font-size: .94rem;
  letter-spacing: .06px;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.btn:hover{
  background: rgba(10,13,18,.03);
  border-color: rgba(10,13,18,.24);
  transform: translateY(-1px);
}
.btn-primary{
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.btn-primary:hover{
  background: #071629;
  border-color: #071629;
}
.btn-ghost{ background: transparent; }
.btn-block{ width:100%; }

/* Typography — cleaner headings (less “dramatic”) */
h1, h2, h3{
  margin:0;
  color: var(--text);
}

/* “Presidential” headline without looking ornate */
h1{
  font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Garamond, Georgia, serif;
  font-weight: 560;
  font-size: clamp(2.15rem, 3.4vw, 3.05rem);
  line-height: 1.10;
  letter-spacing: -0.75px;
  max-width: 26ch;
}

h2{
  font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Garamond, Georgia, serif;
  font-weight: 560;
  font-size: 1.62rem;
  line-height: 1.18;
  letter-spacing: -0.45px;
}

h3{
  font-weight: 620;
  font-size: 1.08rem;
  line-height: 1.25;
  letter-spacing: -0.12px;
}

/* Eyebrow */
.eyebrow{
  display:inline-block;
  color: var(--muted2);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .28px;
  text-transform: uppercase;
}

/* Lead */
.lead{
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1.04rem;
  font-weight: 400;
  max-width: 80ch;
}

.accent{ color: var(--navy); }

/* Layout rhythm */
.hero{ padding: 84px 0 44px; }
.section{ padding: 84px 0; }

/* Hero layout */
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items:start;
}
.hero-ctas{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 0;
}
.hero-trust{
  margin-top: 36px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
}
.hero-trust > div{
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.trust-title{ font-weight: 620; }
.trust-sub{
  margin-top: 8px;
  color: var(--muted2);
  font-weight: 400;
  font-size: .98rem;
}

/* Section heads */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
}
.section-head p{
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 400;
  max-width: 84ch;
}

.link{
  color: var(--muted2);
  font-weight: 600;
  padding: 10px 0;
}
.link:hover{ color: var(--text); }

/* Grids */
.grid2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px;
}
.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.grid2 > article,
.grid3 > article{
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Lists */
.bullets{
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 400;
}
.bullets li{ margin: 8px 0; }

/* Callout (minimal divider) */
.callout{
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.callout-title{ font-weight: 620; }
.callout-sub{ color: var(--muted2); font-weight: 400; }

/* Neutralize any card styles (for other pages) */
.panel, .card, .brandcard, .trust-card{
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.form label{ display:block; margin: 12px 0; }
.form span{
  display:block;
  font-weight: 600;
  color: var(--muted2);
  margin-bottom: 6px;
  font-size: .92rem;
}
input, textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  outline: none;
  font-weight: 400;
}
input:focus, textarea:focus{
  border-color: rgba(11,31,59,.28);
  box-shadow: 0 0 0 4px rgba(11,31,59,.07);
}
textarea{ min-height: 140px; resize: vertical; }
.formNote{ margin: 10px 0 0; color: var(--muted2); font-weight: 400; }

.info{
  display:grid;
  gap: 12px;
  margin: 18px 0;
}
.info div{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.info b{ font-weight: 620; }
.info span{ color: var(--muted); font-weight: 400; }

.mini{
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.mini-title{ font-weight: 620; margin-bottom: 8px; }

.footer{
  border-top: 1px solid var(--line);
  padding: 34px 0 18px;
}
.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
}
.footer-left{
  display:flex;
  align-items:center;
  gap: 12px;
}
.footer-logo{
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.footer-name{ font-weight: 650; }
.footer-sub{
  color: var(--muted2);
  font-weight: 400;
  font-size: .92rem;
}
.footer-right{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
}
.footer-right a{
  color: var(--muted2);
  font-weight: 500;
  padding: 10px 0;
}
.footer-right a:hover{ color: var(--text); }

.footer-bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
  color: var(--muted2);
  font-weight: 400;
}

.muted{ color: var(--muted); }

/* Responsive */
@media (max-width: 980px){
  .hero{ padding: 72px 0 34px; }
  .section{ padding: 72px 0; }
  .hero-grid{ grid-template-columns: 1fr; gap: 32px; }
  .hero-trust{ grid-template-columns: 1fr; }
  .grid2{ grid-template-columns: 1fr; gap: 32px; }
  .grid3{ grid-template-columns: 1fr; gap: 32px; }
  .contact-grid{ grid-template-columns: 1fr; gap: 32px; }
  .nav{ display:none; }
  .menuBtn{ display:inline-flex; }
  .mobileNav{ display:block; }
}
/* =========================
   NAV — CLEAN TEXT + ACTIVE BAR
   ========================= */

.header-inner{
  align-items: center; /* prevents one item sitting higher */
}

.nav{
  display:flex;
  align-items:center;
  gap: 22px;
}

.nav-link{
  position: relative;
  display:inline-block;
  padding: 10px 0;
  color: var(--muted2);
  font-weight: 500;
  font-size: .95rem;
  line-height: 1;
  letter-spacing: .08px;
}

.nav-link:hover{
  color: var(--text);
}

/* subtle bar (hover) */
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;         /* places the bar slightly below text */
  height:2px;
  background: transparent;
  border-radius: 2px;
  transform: scaleX(.55);
  transform-origin: center;
  transition: background .14s ease, transform .14s ease;
}

.nav-link:hover::after{
  background: rgba(10,13,18,.10);
  transform: scaleX(1);
}

/* active page bar */
.nav-link.is-active{
  color: var(--text);
}

.nav-link.is-active::after{
  background: rgba(11,31,59,.35); /* subtle navy */
  transform: scaleX(1);
}

/* Make Contact look like text (not a blue button) but slightly more “important” */
.nav-cta{
  color: var(--text);
  font-weight: 600;
}

.nav-cta::after{
  background: rgba(10,13,18,.12);
}

/* ensure your old button styles don't affect header links */
.nav .btn{ 
  border: none;
  background: transparent;
  padding: 10px 0;
}
/* =========================
   BRAND / LOGO — BIGGER + CLEAN ALIGNMENT
   ========================= */

.brand{
  display:flex;
  align-items:flex-start;   /* aligns logo with top of text block */
  gap: 14px;
  min-width: 280px;
}

.brand-logo{
  width: 140px;              /* bigger logo */
  height: 140px;
  object-fit: contain;
  margin-top: 2px;          /* micro alignment tweak */
}

.brand-text{
  display:flex;
  flex-direction: column;
  gap: 2px;
}

.brand-name{
  font-weight: 650;
  letter-spacing: .22px;
  line-height: 1.05;
  font-size: 1.02rem;       /* slightly larger name */
}

.brand-tag{
  line-height: 1.2;
  font-size: .90rem;
  color: var(--muted2);
}
/* Optical alignment: nudge logo right slightly */
.brand-logo{
  width: 140px;
  height: 140px;
  object-fit: contain;

  /* optical inset so it doesn’t look too far left */
  padding-left: 10px;   /* try 3–6px */
}
.footer-bottom a.muted{
  color: var(--muted2);
}
.footer-bottom a.muted:hover{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Footer brand block: ensure both lines share the exact same right edge */
.footer-brand-right{
  text-align: right;
  align-items: flex-end;   /* forces the child lines to align to the same right edge */
}

/* Tighten and standardise line rhythm */
.footer-brand-right .footer-name{
  line-height: 1.05;
  margin: 0;
}

.footer-brand-right .footer-sub{
  line-height: 1.15;
  margin: 2px 0 0;         /* slight controlled gap */
}
/* =========================
   FOOTER — THINNER + BRAND TEXT LOWER
   ========================= */

/* Make footer thinner */
.footer{
  padding: 18px 0 12px;          /* thinner overall */
}

/* Keep the split row, but align content lower */
.footer-split{
  align-items: flex-end;          /* pushes items down within the row */
  padding-bottom: 2px;            /* keeps it close to the bottom edge */
}

/* Your logo size */
.footer-logo{
  width: 85px;
  height: 85px;
  object-fit: contain;
}

/* Push the right-side brand block down slightly more */
.footer-brand-right{
  align-items: flex-end;
  text-align: right;
  padding-bottom: 6px;            /* makes it sit lower/closer to the padding */
}

/* Tighten the two-line rhythm */
.footer-brand-right .footer-name{
  line-height: 1.02;
  margin: 0;
}
.footer-brand-right .footer-sub{
  line-height: 1.10;
  margin: 2px 0 0;
}

/* Make the bottom row tighter too */
.footer-bottom{
  margin-top: 10px;
  padding-top: 10px;
}

/* Mobile: keep it clean */
@media (max-width: 680px){
  .footer{
    padding: 16px 0 12px;
  }
  .footer-split{
    align-items: flex-start;
  }
  .footer-brand-right{
    padding-bottom: 0;
    text-align: left;
    align-items: flex-start;
  }
}
/* =========================
   LEGAL PAGES — MAX TIGHT
   ========================= */

body.legal .hero{ padding: 20px 0 10px; }
body.legal .section{ padding: 14px 0; }

body.legal .section-head{
  margin-bottom: 6px;
  padding-bottom: 6px;
}

body.legal h1{ margin-bottom: 4px; }
body.legal .lead{ margin-top: 6px; }

body.legal h2{ margin: 0; }
body.legal p.muted{ margin: 6px 0; }

body.legal .bullets{ margin: 6px 0 0; }
body.legal .bullets li{ margin: 5px 0; }

body.legal .callout{ margin-top: 10px; padding-top: 8px; }
.footer-legal-links{
  display:inline-flex;
  gap: 10px;              /* reduce if you want even closer */
  align-items:center;
}
/* Group page section marks */
.section-mark{
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin: 0 0 14px;
}
/* Reduce space between Group and Next step (only where applied) */
.section-tight-top{
  padding-top: 28px;
}
/* Button text alignment fix */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;          /* removes baseline weirdness */
  padding: 12px 16px;      /* keeps it even */
  white-space: nowrap;
}

/* If you want absolute consistency across all buttons */
.btn{
  min-height: 44px;        /* consistent vertical centering */
}
/* Subtle world map background (hero only) */
.hero{
  position: relative;
  overflow: hidden;
}

/* Ensure hero content sits above */
.hero .wrap{
  position: relative;
  z-index: 1;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-60px -40px;

  background-image: url("../img/world-dots.webp");
  background-repeat: no-repeat;
  background-size: 1100px auto;
  background-position: 75% 60%;

  opacity: .05;
  pointer-events:none;
  z-index: 0;

  /* remove blur for performance */
  filter: none;

  /* optional: keep or remove mask. mask can also add cost */
  mask-image: radial-gradient(circle at 70% 55%,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.45) 55%,
    rgba(0,0,0,0) 78%
  );
}
/* =========================
   Mobile smoothing pack
   Paste at END of stylesheet
   ========================= */

/* Ensure the HTML 'hidden' attribute works everywhere */
[hidden]{ display:none !important; }

/* Prevent horizontal scroll from wide items */
html, body{ max-width:100%; overflow-x:hidden; }

/* Make media always scale */
img, svg, video{ max-width:100%; height:auto; }

/* Make long words/URLs wrap */
p, li, a{ overflow-wrap:anywhere; }

/* RESPONSIVE BREAKPOINTS */

/* Tablets and down */
@media (max-width: 980px){
  /* Layout */
  .wrap{ padding: 0 16px; }

  /* Header/nav */
  .header-inner{
    gap: 10px;
    align-items: center;
  }
  .brand{
    min-width: 0;
    gap: 10px;
  }
  .brand-logo{
    width: 54px;   /* slightly larger on mobile for balance */
    height: 54px;
  }
  .nav{ display:none !important; }
  .menuBtn{ display:inline-flex !important; }

  /* Mobile nav panel */
  .mobileNav{
    display:block !important;
    padding: 10px 0 14px;
  }
  .mobileNav a{
    display:block;
    padding: 12px 0;
  }

  /* Hero & sections */
  .hero{ padding: 68px 0 28px; }
  h1{ font-size: clamp(1.9rem, 6vw, 2.5rem); line-height: 1.12; }
  .lead{ font-size: 1rem; }

  /* Grids collapse */
  .hero-grid,
  .grid2,
  .grid3,
  .contact-grid{
    grid-template-columns: 1fr !important;
  }

  /* Spacing rhythm */
  .section{ padding: 54px 0; }
  .section-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Buttons */
  .hero-ctas{
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
  }
  .btn{ width: 100%; }
  .btn-ghost{ width: 100%; }

  /* Footer */
  .footer-inner{
    flex-direction: column;
    gap: 14px;
  }
  .footer-right{
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
  }
  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Phones */
@media (max-width: 520px){
  .wrap{ padding: 0 14px; }

  .brand-logo{
    width: 50px;
    height: 50px;
  }

  .hero{ padding: 62px 0 22px; }
  .section{ padding: 46px 0; }

  h2{ font-size: 1.35rem; }
  h3{ font-size: 1.05rem; }

  /* Keep forms comfortable */
  input, textarea{
    font-size: 16px; /* prevents iOS zoom on focus */
  }
}