/* =========================
   Norris Legal Group — Landing Page Styles
   ========================= */

/* ---------- Theme Tokens ---------- */
:root{
  --ink:#111317;
  --muted:#5f6b76;
  --bg:#f7f9fb;
  --brand:#e74c3c;
  --brand-ink:#ffffff;
  --dark:#101216;
  --card:#ffffff;
  --line:#e7ecf2;
  --shadow:0 10px 30px rgba(0,0,0,.12);
  --radius:16px;
  --radius-sm:12px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
.container{width:min(1120px,92vw); margin-inline:auto}
a{color:#0b5bd3}
a:hover{filter:brightness(0.95)}
.sep{opacity:.5}

/* ---------- Top Sticky Call Bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:#14161a; color:#fff; padding:10px 0;
  border-bottom:1px solid #000;
}
.topbar__wrap{
  display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap;
}
.topbar__tel{color:#fff;text-decoration:none;font-weight:800}
.topbar__tel:hover{text-decoration:underline}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:999px; padding:13px 22px; font-weight:800; cursor:pointer;
  border:0; text-decoration:none; transition:transform .05s ease, filter .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--dark{background:var(--dark); color:#fff}
.btn--dark:hover{filter:brightness(1.02)}
.btn--accent{background:var(--brand); color:var(--brand-ink); box-shadow:var(--shadow)}
.btn--accent:hover{filter:brightness(1.07)}
.btn--ghost{background:#fff; color:#111; border:1px solid #d7dee6}
.btn--light{background:#fff; color:#0b0d0f; border:1px solid #cfd8e1}
.btn--white{background:#fff; color:#0b0d0f; border:1px solid #e4e9ef}

/* ---------- HERO ---------- */
.hero{
  background: linear-gradient(180deg, #fff 0%, #f3f6f9 100%);
  padding:38px 0 32px;
  border-bottom:1px solid var(--line);
}
.hero__grid{
  display:grid; gap:28px; align-items:start;
  grid-template-columns: 1.05fr .95fr;
}
.eyebrow{
  margin:0 0 6px; color:var(--brand); font-weight:800; letter-spacing:.2px;
}
.hero__title{
  font-size: clamp(28px,4.2vw,46px); margin:0 0 10px; line-height:1.12;
  letter-spacing:-0.015em;
}
.hero__sub{color:#3b4852; margin:0 0 12px; max-width:60ch}

/* --- Media: video centered; checks underneath --- */
.hero__media{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin:10px 0 8px;
}
.hero__face{
  width:340px;          /* larger square media */
  max-width:100%;
  margin:0 auto;
}
.hero__video{
  width:100%;
  aspect-ratio:1/1;     /* square */
  object-fit:cover;     /* fill without distortion */
  border-radius:12px;
  border:6px solid #e6ebf2;
  box-shadow:var(--shadow);
  display:block;
}

/* Trust list (base) */
.trust-list{
  list-style:none; padding:0; margin:0;
  color:#40505d; font-weight:600;
}
.trust-list li{position:relative; padding-left:24px}
.trust-list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:#12a06a; font-weight:900;
}

/* Trust list placed BELOW media: center perfectly */
.trust-list--below{
  width:100%;
  max-width:420px;
  margin:2px auto 0;
  padding:0;
  text-align:center;
}
.trust-list--below li{
  display:inline-flex;               /* shrink to content so we can center a line */
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  padding-left:0;                    /* cancel base indent */
  margin:0 10px;                     /* small horizontal spacing between items */
}
.trust-list--below li::before{
  position:static;                   /* inline checkmark */
  content:"✓";
  color:#12a06a;
  font-weight:900;
}

/* CTA buttons under bullets — centered */
.hero__ctaRow{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;
  justify-content:center;
}

/* ---------- Form Card ---------- */
.formcard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:20px 18px;
}
.formcard__title{margin:0 0 6px; font-size: clamp(20px,2.6vw,26px)}
.formcard__sub{margin:0 0 12px; color:#526270}

.u-form{margin-top:8px}
.u-hidden{display:none}
.u-grid{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.u-grid.u-grid--mini{grid-template-columns: 1fr 1fr}
.u-field{display:flex; flex-direction:column; gap:6px}
.u-field--full{grid-column:1 / -1}
.u-field label{font-weight:700; color:#2a343d}
.u-field input,
.u-field textarea{
  appearance:none; border:1px solid #cbd5df; border-radius:10px; padding:12px 12px; font:inherit; outline:none; background:#fff;
}
.u-field input:focus,
.u-field textarea:focus{border-color:#0b5bd3; box-shadow:0 0 0 3px rgba(11,91,211,.12)}
.u-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
.u-disclaimer{color:#6e7a86; font-size:.9rem; margin:10px 0 0}
.hero__badges{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:14px}
.rating, .badge{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; text-align:center}
.rating__stars{color:#ffc107; font-size:1.3rem; letter-spacing:2px}
.rating__text{font-weight:800; margin-top:4px}
.badge img{max-height:72px; margin:0 auto 6px}
.badge__caption{font-size:.9rem; color:#6a7682}

/* ---------- Sections ---------- */
.section-title{font-size: clamp(24px,4vw,34px); text-align:center; margin:0 0 20px; letter-spacing:-0.01em}

/* Urgency */
.urgency{padding:34px 0}
.alert{
  display:inline-block; background:var(--brand); color:#fff; font-weight:900;
  padding:10px 14px; border-radius:10px; margin:0 0 16px;
}
.alert--inline{margin:10px 0 14px}
.urgency__grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.urgency__card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}

/* Why */
.why{padding:48px 0}
.why__list{max-width:740px; margin:0 auto 10px; padding:0 14px; list-style:none}
.why__list li{margin:10px 0; color:#44515c; position:relative; padding-left:26px; font-weight:600}
.why__list li::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--brand); position:absolute; left:6px; top:10px}

/* Stats */
.stats{background:var(--bg); padding:40px 0}
.stats__grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:16px}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; text-align:center; box-shadow: var(--shadow)}
.stat__num{color:var(--brand); font-size:1.8rem; font-weight:900}
.stat__label{color:var(--muted)}
.stats__image{display:flex; justify-content:center; margin-top:18px}
.stats__image img{max-width:820px; border-radius:10px; box-shadow: var(--shadow)}

/* Cases */
.cases{padding:48px 0}
.cases__grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:16px}
.case{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.case__result{color:var(--brand)}
.cases__disclaimer{color:#6e7a86; font-size:.92rem; margin:12px auto 0; text-align:center; max-width:800px}

/* Steps */
.steps{padding:48px 0}
.steps__grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; text-align:center; box-shadow: var(--shadow)}
.step__num{width:42px; height:42px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; margin:0 auto 10px}

/* Testimonials */
.testimonials{background:#fff; padding:48px 0}
.testimonials__list{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.tcard{background:#f7f8fa; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow: var(--shadow); margin:0}
.tcard p{margin:0 0 10px}
.tcard footer{color:var(--muted); font-weight:700}

/* FAQ */
.faq{padding:48px 0}
.faq__item{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); margin:12px 0}

/* Final CTA */
.finalcta{background:#121418; color:#fff; padding:48px 0; border-top:1px solid #0b0d10}
.section-title--invert{color:#fff}
.finalcta__sub{max-width:720px; margin:0 0 10px}
.finalcta__wrap{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start}
.addr h3{margin:0 0 8px}
.addr__tel{display:inline-block; color:#fff; font-weight:900; text-decoration:none}
.addr__tel:hover{text-decoration:underline}
.addr__avail{color:#cfd8df; margin:6px 0 0}

/* Footer */
.foot{background:#121418; color:#e9eef3; padding:28px 0}
.foot__wrap{display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center}
.foot__tel{display:inline-block; color:#fff; font-weight:900; text-decoration:none; font-size:1.1rem}
.foot__tel:hover{text-decoration:underline}
.foot__disclaimer{font-size:.9rem; color:#cfd8df; margin:12px 0 0}
.link{text-decoration:underline}

/* Mobile sticky Call/Text bar */
.mobile-stickynav{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; /* only on small screens */
  background:#0f1115; border-top:1px solid #000;
}
.mobile-stickynav__btn{
  display:inline-block; width:50%; text-align:center; padding:14px 8px;
  color:#fff; text-decoration:none; font-weight:900;
}
.mobile-stickynav__btn:first-child{border-right:1px solid rgba(255,255,255,.12)}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .hero__grid{grid-template-columns: 1fr}
  .hero__face{width:300px}
}
@media (max-width: 980px){
  .urgency__grid{grid-template-columns: 1fr}
  .stats__grid{grid-template-columns: repeat(2,1fr)}
  .cases__grid{grid-template-columns: 1fr}
  .steps__grid{grid-template-columns: 1fr}
  .testimonials__list{grid-template-columns: 1fr}
  .finalcta__wrap{grid-template-columns: 1fr}
  .foot__wrap{grid-template-columns: 1fr; text-align:center}
}
@media (max-width: 640px){
  .mobile-stickynav{display:flex}
  body{padding-bottom:60px} /* make room for sticky bar */
  html, body { overflow-x: hidden; }

  .container { width: 100vw; padding-inline: 16px; }
  .hero { overflow: hidden; }
  .hero__grid { grid-template-columns: 1fr; gap: 16px; }

  /* Video + bullets stack cleanly and stay centered */
  .hero__face{ width: min(75vw, 280px); }
  .trust-list--below{ max-width: min(85vw, 420px); }
  
  /* make form fields single-column on phones */
  .formcard { width: 100%; }
  .u-grid, .u-grid.u-grid--mini { grid-template-columns: 1fr; }
}