/* ===========================================================================
   The Nieves Law Firm — paid landing pages
   Design tokens lifted from thenieveslawfirm.com so the paid experience and
   the brand are the same thing. Values are the firm's, not approximations:
     #861819  primary red   (180 uses in the theme stylesheet)
     #2C2C2C  ink
     #F5F3F3  surface
     #FFC10A  accent
     Oswald 700, uppercase, 0.96px tracking  — headings
     Inter 300, 18px, 180% leading           — body
   =========================================================================== */

:root {
  --red: #861819;
  --red-dark: #6B1314;
  --red-tint: #FBF3F3;
  --ink: #2C2C2C;
  --ink-soft: #5A5A5A;
  --line: #E3DEDE;
  --surface: #F5F3F3;
  --white: #FFFFFF;
  --gold: #FFC10A;
  --green: #1B7F4B;

  --head: "Oswald", "Arial Narrow", sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --radius: 4px;
  --shadow: 0 2px 8px rgba(0, 0, 0, .06);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .14);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink);
  background: var(--white);
}

h1, h2, h3, .head {
  font-family: var(--head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .96px;
  line-height: 1.05;
  margin: 0 0 .5em;
  color: var(--ink);
}

h1 { font-size: clamp(30px, 5.2vw, 52px); }
h2 { font-size: clamp(25px, 3.6vw, 38px); }
h3 { font-size: clamp(19px, 2.2vw, 23px); letter-spacing: .6px; }

p { margin: 0 0 1.1em; }
a { color: var(--red); }
img, svg, video { max-width: 100%; height: auto; display: block; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section--tint { background: var(--surface); }
.section--ink { background: var(--ink); color: #F0EDED; }
.section--ink h2, .section--ink h3 { color: var(--white); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.hdr__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 12px 0;
}
.hdr__logo img { width: 190px; }
.hdr__right { display: flex; align-items: center; gap: 18px; }

.lang {
  font-family: var(--head); font-size: 13px; letter-spacing: .8px;
  text-transform: uppercase; text-decoration: none;
  color: var(--ink-soft); border: 1px solid var(--line);
  padding: 6px 11px; border-radius: var(--radius); white-space: nowrap;
}
.lang:hover { border-color: var(--red); color: var(--red); }

.hdr__tel {
  font-family: var(--head); font-size: 22px; letter-spacing: .5px;
  color: var(--red); text-decoration: none; white-space: nowrap;
}
.hdr__tel small {
  display: block; font-family: var(--body); font-size: 11px;
  font-weight: 400; letter-spacing: .4px; color: var(--ink-soft);
  text-transform: uppercase;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { background: var(--surface); padding: clamp(28px, 4vw, 52px) 0 clamp(40px, 5vw, 64px); }
.hero__grid {
  display: grid; gap: clamp(28px, 4vw, 52px);
  grid-template-columns: 1fr;
  align-items: start;
}

/* MOBILE ORDER: headline, then the FORM, then the video.
   The video is 16:9 — leaving it above the form meant someone on a phone had to
   scroll past it before they could type a phone number. On this audience, which
   is overwhelmingly mobile and often in a hurry, that is the most expensive
   scroll on the page. The video still earns its place; it just sits after the
   thing that produces leads. */
.hero__copy  { order: 1; }
.card        { order: 2; }
.hero__video { order: 3; }

/* DESKTOP: unchanged — copy and video stacked on the left, form on the right
   spanning both rows. */
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 1.08fr .92fr; }
  .hero__copy  { grid-column: 1; grid-row: 1; order: 0; }
  .hero__video { grid-column: 1; grid-row: 2; order: 0; }
  .card        { grid-column: 2; grid-row: 1 / span 2; order: 0; }
}

.eyebrow {
  font-family: var(--head); font-size: 13px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--red);
  margin: 0 0 12px;
}
.hero__lede { font-size: clamp(17px, 1.9vw, 20px); max-width: 34em; }

.ticks { list-style: none; margin: 0 0 26px; padding: 0; }
.ticks li {
  position: relative; padding-left: 30px; margin-bottom: 9px;
  font-size: 16.5px; line-height: 1.55;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 16px; height: 9px; border-left: 2.5px solid var(--red);
  border-bottom: 2.5px solid var(--red); transform: rotate(-45deg);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--head); font-weight: 700; font-size: 17px;
  letter-spacing: .9px; text-transform: uppercase; text-decoration: none;
  padding: 16px 30px; border: 0; border-radius: var(--radius);
  background: var(--red); color: var(--white); cursor: pointer;
  transition: background .15s ease, transform .06s ease;
  width: 100%;
}
.btn:hover { background: var(--red-dark); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: default; }
.btn--ghost {
  background: transparent; color: var(--white);
  border: 2px solid rgba(255, 255, 255, .55); width: auto;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); }

/* ── Form card ───────────────────────────────────────────────────────────── */
.card {
  background: var(--white); border-radius: 6px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.card__top {
  background: var(--red); color: var(--white);
  padding: 18px 24px; text-align: center;
}
.card__top h2 { color: var(--white); font-size: 23px; margin: 0 0 2px; }
.card__top p {
  margin: 0; font-size: 13.5px; line-height: 1.5;
  color: rgba(255, 255, 255, .92);
}
/* A star rating at the point of decision does more than a badge row further up
   the page. Badges reassure someone already reading; this is for the person
   deciding whether to hand over their telephone number. */
.card__rating {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0 0 4px !important; font-size: 14.5px !important;
  color: #fff !important;
}
.card__rating .stars { color: var(--gold); font-size: 14px; letter-spacing: 1px; }
.card__rating strong { font-family: var(--head); font-size: 17px; letter-spacing: .4px; }
.card__body { padding: 24px; }

.field { margin-bottom: 15px; }
.field label {
  display: block; font-family: var(--head); font-size: 13px; font-weight: 700;
  letter-spacing: .7px; text-transform: uppercase; margin-bottom: 6px;
}
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; font-family: var(--body);
  font-size: 16.5px; font-weight: 300; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--white); transition: border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(134, 24, 25, .1);
}
.field textarea { min-height: 84px; resize: vertical; line-height: 1.6; }
.field--err input, .field--err select { border-color: var(--red); background: var(--red-tint); }
.field__err { display: none; font-size: 13.5px; color: var(--red); margin-top: 5px; line-height: 1.4; }
.field--err .field__err { display: block; }

.row2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 420px) { .row2 { grid-template-columns: 1fr; } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.card__note {
  font-size: 12.5px; line-height: 1.55; color: var(--ink-soft);
  text-align: center; margin: 13px 0 0;
}
.card__or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px; color: var(--ink-soft); font-size: 13px;
  font-family: var(--head); letter-spacing: 1px; text-transform: uppercase;
}
.card__or::before, .card__or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.card__tel {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--head); font-size: 25px; letter-spacing: .5px;
  color: var(--red); text-decoration: none; padding: 11px;
  border: 2px solid var(--red); border-radius: var(--radius);
}
.card__tel:hover { background: var(--red-tint); }

/* Success state — replaces the form in place, never a redirect, so the
   conversion fires and the visitor keeps their context. */
.done { display: none; padding: 34px 24px; text-align: center; }
.done h3 { color: var(--green); }
.is-done .card__body > form,
.is-done .card__body > .card__or,
.is-done .card__body > .card__tel,
.is-done .card__body > .card__note { display: none; }
.is-done .done { display: block; }

/* ── Video ───────────────────────────────────────────────────────────────── */
.vsl { position: relative; border-radius: 6px; overflow: hidden; background: #000; }
.vsl video { width: 100%; display: block; }
.vsl__play {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(0, 0, 0, .3);
  border: 0; cursor: pointer; width: 100%;
}
.vsl__play span {
  width: 74px; height: 74px; border-radius: 50%; background: var(--red);
  display: grid; place-items: center; box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
}
.vsl__play span::after {
  content: ""; border-left: 20px solid #fff; border-top: 12px solid transparent;
  border-bottom: 12px solid transparent; margin-left: 5px;
}
.is-playing .vsl__play { display: none; }

/* ── Trust strips ────────────────────────────────────────────────────────── */
.strip { border-block: 1px solid var(--line); background: var(--white); padding: 20px 0; }
.strip__in {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(20px, 4vw, 52px); flex-wrap: wrap;
}
/* Media logos are greyscaled deliberately — they are context, not the message.
   Awards are NOT: the colour, the year and the wording are the credibility. */
/* 30px, not 34px: Dr. Phil, Court TV, Nancy Grace and Super Lawyers only exist
   as ~45px-tall rasters, so anything above 30px CSS upscales them on a 2x
   screen and they go soft. ABC News and Avvo are vector and would take any
   size, but a row of logos has to sit on one line. */
.strip img { height: 30px; width: auto; opacity: .72; filter: grayscale(1); }

/* Ratings are vector, so they can run larger and keep their colour — an Avvo
   10.0 or a BBB seal reads as a credential, and greyscaling it throws that
   away. The media row above stays grey on purpose: it is context, not a claim. */
.strip--ratings { border-top: 0; }
.strip--ratings img {
  height: clamp(34px, 4vw, 44px); opacity: 1; filter: none;
}
@media (max-width: 620px) {
  .strip--ratings img { height: 30px; }
}

.awards { border-block: 1px solid var(--line); background: var(--white); padding: 30px 0; }
.awards__in {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(22px, 4vw, 46px); flex-wrap: wrap;
}
/* Capped at 58px because the source art tops out around 122-166px tall — the
   best available anywhere in the firm's files. At 58px CSS that is 116px on a
   2x screen, so nothing is upscaled and they stay crisp. Going bigger makes
   them soft, which reads as cheap and undoes the credibility they exist for.
   If the firm can supply the original badge files from the awarding bodies,
   raise this. */
.awards__in img {
  height: clamp(46px, 5vw, 58px); width: auto;
  /* the SVG badge is vector and can go larger, but they must line up */
  filter: none; opacity: 1;          /* full colour — this is the point */
  image-rendering: -webkit-optimize-contrast;
}

/* On a phone, clamp() bottoms out at its floor — so six 46px badges wrapped to
   three rows and pushed the form off the screen. These are reassurance, not the
   reason anyone is on the page, so they shrink to fit two rows and stay out of
   the way of the thing that produces leads. */
/* THE HEADER WAS FORCING THE WHOLE PAGE WIDER THAN THE PHONE.
   A 190px logo, the language pill and a nowrap telephone number add up to more
   than a 390px viewport can hold. Because the header set the document width,
   every section below inherited it — the form card, the body copy and the logo
   rows were all being clipped at the right edge. The badges looked oversized;
   they were simply the most visible casualty. */
/* Header on a phone: the number stays — it is the single most-used control on
   a criminal-defence page — but the logo and the language pill give up room so
   all three fit on one line without wrapping. */
@media (max-width: 620px) {
  .hdr__logo img { width: 138px; }
  .hdr__right { gap: 10px; }
  .hdr__tel { font-size: 18px; }
  .hdr__tel small { display: none; }
  .lang { padding: 6px 9px; font-size: 11px; letter-spacing: .4px; }
}
@media (max-width: 400px) {
  .hdr__logo img { width: 112px; }
  .hdr__tel { font-size: 16px; }
}

/* Belt and braces: nothing in a logo row may exceed its share of the line. */
.strip__in img, .awards__in img { max-width: 44%; object-fit: contain; }

@media (max-width: 760px) {
  .awards { padding: 20px 0; }
  .awards__in { gap: 16px 20px; }
  .awards__in img { height: 38px; }
  .awards__lbl { margin-bottom: 12px; font-size: 11px; }
}
@media (max-width: 430px) {
  .awards__in { gap: 12px 16px; }
  .awards__in img { height: 32px; }
}
.awards__lbl {
  width: 100%; text-align: center; font-family: var(--head); font-size: 12px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 18px;
}
.strip__lbl {
  width: 100%; text-align: center; font-family: var(--head); font-size: 12px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 4px;
}
.badges { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.badges img { height: 42px; width: auto; }

/* ── Content blocks ──────────────────────────────────────────────────────── */
.grid3 { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }

.step__n {
  font-family: var(--head); font-size: 46px; font-weight: 700;
  color: var(--red); line-height: 1; margin-bottom: 8px;
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.chips li {
  border: 1px solid var(--line); background: var(--white);
  border-radius: 40px; padding: 8px 17px; font-size: 15.5px;
}

.quote {
  background: var(--white); border-left: 4px solid var(--red);
  padding: 22px 24px; box-shadow: var(--shadow); border-radius: var(--radius);
}
.quote p { font-size: 16.5px; line-height: 1.7; }
.quote cite { font-style: normal; font-weight: 600; font-size: 15px; }
.stars { color: var(--gold); letter-spacing: 2px; font-size: 17px; }

/* Reviews are attributed to Google and linked to the profile, so a sceptical
   reader can check them. That verifiability is what makes a testimonial worth
   more than the paragraph it occupies. */
.rating {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 28px; font-size: 17px;
}
.rating img { height: 26px; width: auto; }
.rating a { font-family: var(--head); font-size: 14px; letter-spacing: .6px;
            text-transform: uppercase; text-decoration: none; }
.rating a:hover { text-decoration: underline; }

.quote cite { display: block; margin-top: 4px; }
.quote__src {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft);
}
.quote__src img { height: 18px; width: auto; opacity: .85; }

.faq { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary {
  font-family: var(--head); font-size: 19px; letter-spacing: .5px;
  text-transform: uppercase; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-size: 27px; line-height: 1; }
.faq[open] summary::after { content: "–"; }
.faq p { margin: 12px 0 0; font-size: 16.5px; }

/* ── Footer + the disclaimer that keeps the firm compliant ───────────────── */
.ftr { background: var(--ink); color: #B9B4B4; padding: 40px 0 92px; font-size: 14px; line-height: 1.7; }
.ftr a { color: #E8E3E3; }
.ftr__legal { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 22px; padding-top: 18px; font-size: 12.5px; color: #948F8F; }

/* Mobile call bar. Criminal-defence traffic is overwhelmingly mobile and
   most of it wants to talk to somebody now, not fill anything in. */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ink); box-shadow: 0 -2px 14px rgba(0, 0, 0, .28);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 8px; font-family: var(--head); font-size: 16px;
  letter-spacing: .8px; text-transform: uppercase; text-decoration: none;
  color: var(--white);
}
.callbar a:first-child { background: var(--red); }
@media (min-width: 940px) { .callbar { display: none; } .ftr { padding-bottom: 40px; } }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}