/* __LL-DESK-INTAKE-V2__  2026-09-17
   Desktop-only intake for the blog-post template on landllawgroup.com.

   V2 REPLACES MY INVENTED DESIGN. Reggie: "the form is wrong ... where did you get that template it
   does not match - show samples to pull from site", then: "use either a or b whichever one takes up
   the most vertical space ... can we put this on the left hand side".

   So this is PATTERN B - `.ll-hero-form-v2` - the site's own hero form, already on 318 pages.
   Measured at rail widths before choosing: B = 927px tall at 232px wide, A (.lhr-card) = 526px. B wins.
   The rules below are COPIED FROM THE SERVER, from the sheet that styles /assault-lawyer-dallas/.
   The block carries BOTH classes (`ll-desk-intake ll-hero-form-v2`) so these selectors match verbatim
   and the look can never drift from the rest of the site again.

   DELIBERATELY NOT COPIED: the source sheet's `:root{...}`, `html{...}` and `body{...}` rules. Those
   would re-theme the whole blog page. Every rule kept here uses literal colours, so nothing depends on
   variables the blog template does not define.

   LAYOUT
     <1024px  not in the layout at all (display:none) - mobile is untouched, by construction
     1024-1279  in flow under the headline, max-width 580px, exactly as on the other 318 pages
     >=1280px  BOTH RAILS locked on; article column narrows 880 -> 720 to make room

   ROLLBACK: restore the previous CSS from its backup and re-point the <link>.
*/

.ll-desk-intake{display:none}

@media (min-width:1024px){
  .ll-desk-intake{display:block}
}

/* ---------------------------------------------------------------------------
   PATTERN B, copied from the live site (sheet that styles .ll-hero-form-v2)
   --------------------------------------------------------------------------- */
@keyframes hfpulse{0%,100%{box-shadow:0 0 0 3px rgba(1,105,111,.18)}50%{box-shadow:0 0 0 6px rgba(1,105,111,.05)}}

.ll-hero-form-v2,.ll-hero-form-v2 *{text-align:left}

.ll-hero-form-v2{
  position:relative;
  margin:1.75rem auto 1.75rem 0;
  padding:2rem 1.6rem 1.6rem;
  background:#fffafa;
  border-radius:14px;
  box-shadow:0 10px 40px rgba(20,51,80,.10),0 2px 8px rgba(192,16,127,.06);
  border:1px solid rgba(255,196,108,.35);
  overflow:hidden;
  max-width:580px;
}
.ll-hero-form-v2::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#ffc46c 0%,#e8a449 30%,#c0107f 70%,#01696f 100%);
}
.ll-hero-form-v2::after{
  content:"";position:absolute;left:0;top:4px;bottom:0;width:4px;
  background:linear-gradient(180deg,#c0107f 0%,rgba(192,16,127,0) 100%);opacity:.7;
}
.ll-hero-form-v2 .hf-pill{
  display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .75rem;
  background:rgba(1,105,111,.08);color:#01696f;font-size:.66rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;border-radius:99px;margin-bottom:1rem;
  border:1px solid rgba(1,105,111,.18);
}
.ll-hero-form-v2 .hf-pill::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#01696f;display:inline-block;
  box-shadow:0 0 0 3px rgba(1,105,111,.18);animation:hfpulse 2.4s ease-in-out infinite;
}
.ll-hero-form-v2 h3.hf-title{
  font-family:"Playfair Display",Georgia,serif;font-size:1.65rem;font-weight:800;color:#143350;
  line-height:1.15;margin:0 0 .55rem;letter-spacing:-.01em;
}
.ll-hero-form-v2 h3.hf-title em{
  font-style:italic;font-weight:800;color:#c0107f;
  background:linear-gradient(180deg,transparent 60%,rgba(255,196,108,.32) 60%,rgba(255,196,108,.32) 92%,transparent 92%);
}
.ll-hero-form-v2 .hf-sub{font-size:.92rem;color:#3a3a3a;line-height:1.55;margin:0 0 1.4rem;max-width:48ch}
.ll-hero-form-v2 .hf-sub strong{color:#143350;font-weight:600}
.ll-hero-form-v2 .hf-field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.95rem}
.ll-hero-form-v2 .hf-label{
  font-family:"Outfit",system-ui,sans-serif;font-size:.74rem;font-weight:700;color:#143350;
  letter-spacing:.14em;text-transform:uppercase;
}
.ll-hero-form-v2 input,.ll-hero-form-v2 textarea{
  font-family:inherit;font-size:1rem;padding:.85rem 1rem;border:1.5px solid rgba(20,51,80,.14);
  border-radius:8px;background:#fff;color:#1a1a1a;width:100%;box-sizing:border-box;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.ll-hero-form-v2 input::placeholder,.ll-hero-form-v2 textarea::placeholder{color:#595959;font-style:italic;opacity:.85}
.ll-hero-form-v2 input:focus,.ll-hero-form-v2 textarea:focus{outline:none;border-color:#c0107f;box-shadow:0 0 0 3px rgba(192,16,127,.12);background:#fff}
.ll-hero-form-v2 input:hover,.ll-hero-form-v2 textarea:hover{border-color:rgba(192,16,127,.4)}
.ll-hero-form-v2 textarea{min-height:90px;resize:vertical;line-height:1.5}
.ll-hero-form-v2 .hf-submit{
  margin-top:.75rem;padding:1.1rem 1rem;
  background:linear-gradient(135deg,#c0107f 0%,#eb19a3 60%,#c0107f 100%);background-size:200% 100%;
  color:#fff;border:none;border-radius:10px;font-size:.85rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;font-family:"Outfit",sans-serif;width:100%;
  white-space:nowrap;text-align:center;
  box-shadow:0 8px 24px rgba(192,16,127,.32),inset 0 1px 0 rgba(255,255,255,.18);
  transition:background-position .4s ease,transform .15s ease,box-shadow .2s ease;
}
@media(min-width:480px){.ll-hero-form-v2 .hf-submit{font-size:.95rem;letter-spacing:.16em}}
.ll-hero-form-v2 .hf-submit:hover{background-position:100% 0;box-shadow:0 12px 32px rgba(192,16,127,.42),inset 0 1px 0 rgba(255,255,255,.24);transform:translateY(-1px)}
.ll-hero-form-v2 .hf-submit:active{transform:translateY(0)}
.ll-hero-form-v2 .hf-submit:focus-visible{outline:2px solid #01696f;outline-offset:2px}
.ll-hero-form-v2 .hf-trust{
  display:flex;align-items:flex-start;gap:.55rem;margin-top:1rem;padding-top:1rem;
  border-top:1px dashed rgba(20,51,80,.14);font-size:.72rem;color:#6a6a6a;line-height:1.5;
}
.ll-hero-form-v2 .hf-trust svg{flex-shrink:0;margin-top:1px;color:#01696f}
@media(min-width:480px){.ll-hero-form-v2{padding:2.4rem 2rem 1.8rem}}

/* the AJAX handler injects this; keep it readable inside the card */
.ll-hero-form-v2 .ll-form-error{margin:.6rem 0 0;font-size:.8rem;font-weight:700;color:#b0243d}

/* ---------------------------------------------------------------------------
   >=1440px : FIXED LEFT RAIL, using the full viewport height
   Rail width tracks the real gutter:  (100vw - 880px)/2 - 44px, capped at 340px.
   Right edge is pinned 24px off the article's left edge (which is 50% - 440px), so the
   gap is constant at every width. `max(12px, ...)` keeps it off the window edge.
   `top/bottom` (not max-height) makes the rail as tall as the window allows - Reggie asked
   for the most vertical space - and the card is compacted so it fits a 900px window.
   `position:fixed` needs no positioned ancestor, so the article is untouched: verified that
   no ancestor of article.bp-wrap has a transform/filter/contain.
   --------------------------------------------------------------------------- */
/* =====================================================================================
   RAILS LOCKED AT 1280px.  Reggie 2026-09-17: "lets lock the rails, what do we have to lose
   to accomplish this whats the minium lost features sections".

   ANSWER, MEASURED: nothing structural. Three pages probed at 806 / 720 / 640px article width
   (one with a YouTube embed, a table and a card grid): ZERO elements overflowed and zero gained a
   horizontal scrollbar. The article is fully fluid, so no feature and no section is lost.

   The only cost is reading width and page height:
     article 880 -> content 816px, page 11,653px   (~106 chars/line - ABOVE the comfortable range)
     article 720 -> content 656px, page 12,381px   (~85 chars/line - inside 45-90 best practice)
   So narrowing the column to fit both rails at 1280 IMPROVES the measure rather than harming it.
   Page gets ~6% taller; that is the whole trade.

   ARITHMETIC: 720 article + 2x(229 rail + 24 gap) = 1,226 + edge margins, so 1280 clears it.
   At 1266 usable: gutter (1266-720)/2 = 273, rail min(300, 273-44) = 229, margins 20px each side.
   At 1920: rail caps at 300px with 269px margins.
   ===================================================================================== */
@media (min-width:1280px){
  /* element+class beats the per-page inline `.bp-wrap{max-width:880px}` without !important */
  article.bp-wrap{max-width:720px}
}

@media (min-width:1280px){

  .ll-desk-intake{
    --railw:min(300px,calc((100vw - 720px)/2 - 44px));
    position:fixed;
    /* top:96px was WRONG - it ran straight through the header. Measured at 1440px, header.hdr
       occupies 58->134px and STAYS THERE at every scroll position, so the rail must start below
       134. 150px gives 16px of air. The announce bar's text starts at x=370, well right of the
       rail's 13->249 band, so it is never covered. (Reggie 2026-09-17: "please move it down its
       blocking the header".) */
    top:150px;
    bottom:16px;
    width:var(--railw);
    left:max(12px,calc(50% - 360px - 24px - var(--railw)));   /* 360 = half the new 720px column */
    max-width:none;
    margin:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:2147482850;          /* above Intaker's call pill (2147482800) */

    /* NO VISIBLE SCROLLBAR (Reggie 2026-09-17: "can we take the scroll bar off the form").
       Measured: at 1440x900 there is none (scrollbarPx 0). At 1440x700 - an ordinary laptop - a
       10px bar appeared AND stole 10px of field width (clientW 225 vs 235). Scrolling is KEPT
       (wheel, trackpad, keyboard) so the submit button is always reachable on a short window;
       only the bar's chrome is hidden, and the 10px goes back to the fields. */
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .ll-desk-intake::-webkit-scrollbar{width:0;height:0;display:none}

  /* compaction so the 927px card fits a 900px window without scrolling
     (Reggie: "i do not mind the picture being cut off or made smaller if we need to
     manipulate the templates") */
  .ll-desk-intake.ll-hero-form-v2{padding:1.1rem 1.1rem 1rem}
  /* The pill carries "Available 24/7 - (972) xxx-xxxx". In the 236px rail that WRAPPED to three
     lines and broke the phone number mid-digits ("(972) 433-" / "5417") - visible on inspection,
     measured at 188x42 against a 16.32px line-height. Keep it on ONE line: nowrap, and tighten the
     size and tracking enough that the longest form still fits inside 202px of inner width. */
  .ll-desk-intake .hf-pill{
    font-size:.55rem;
    letter-spacing:.04em;
    margin-bottom:.7rem;
    padding:.24rem .55rem;
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
  }
  .ll-desk-intake h3.hf-title{font-size:1.3rem;line-height:1.12;margin-bottom:.4rem}
  .ll-desk-intake .hf-sub{font-size:.8rem;line-height:1.42;margin-bottom:.7rem;max-width:none}
  .ll-desk-intake .hf-field{margin-bottom:.45rem;gap:.2rem}
  .ll-desk-intake .hf-label{font-size:.68rem;letter-spacing:.1em}
  .ll-desk-intake input,
  .ll-desk-intake textarea{font-size:.88rem;padding:.6rem .7rem}
  .ll-desk-intake textarea{min-height:50px}
  .ll-desk-intake .hf-submit{margin-top:.5rem;padding:.8rem .7rem;font-size:.76rem;letter-spacing:.08em;white-space:normal}
  .ll-desk-intake .hf-trust{margin-top:.55rem;padding-top:.55rem;font-size:.62rem;line-height:1.38}

  /* Reggie's ruling: desktop visitors cannot dial, so the rail takes the gutter from
     Intaker's click-to-call pill. Desktop only - mobile keeps it. */
  #icw--call--content{display:none!important}
}

/* =====================================================================================
   RIGHT RAIL - two offer boxes.  Reggie 2026-09-17: "how about the right rail is there two
   elegant and modern info boxes that match the sites theme on the oter side. i want people to
   be able to clearly see two more offers on desktop."

   Same chrome as the left card on purpose (gradient top bar, peach hairline border, teal pill),
   so the two rails read as siblings rather than a new design.

   COPY AND LINKS ARE THE SITE'S OWN, not invented:
     box 1 -> /payment-plans/  h2 "10% Fee Discount - Students, Veterans, Active Military &
              First Responders" and "Flat-fee services"
     box 2 -> /calculators/    meta "30 free Texas criminal defense calculators. Bond, DWI, BAC,
              statute of limitations, drug penalty groups..."

   GEOMETRY, measured at 1440px: the article is 273->1153, so the right gutter is 1153->1426 = 287px.
   The chat widget sits fixed at x=1093->1406, y=760->880 when collapsed, so the rail is bounded
   at bottom:180px to stay clear of it. z-index 90 is BELOW the header (100) and far below the chat
   (2147482900), so this rail can never cover either - it starts below the header anyway.
   When Intaker's greeting auto-expands it grows to roughly y=220->880 and will overlay these boxes
   until it is dismissed; that is the chat winning on purpose.
   ===================================================================================== */

.ll-desk-offers{display:none}

@media (min-width:1280px){
  .ll-desk-offers{
    --railw:min(300px,calc((100vw - 720px)/2 - 44px));
    display:flex;
    flex-direction:column;
    gap:14px;
    position:fixed;
    top:150px;
    bottom:180px;
    width:var(--railw);
    /* pinned 24px off the article's RIGHT edge, which is 50% + 440px.
       At 1426px: left 1177, width 229, right edge 1406 - inside the viewport with 20px to spare. */
    left:calc(50% + 360px + 24px);   /* 360 = half the new 720px column */
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:90;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .ll-desk-offers::-webkit-scrollbar{width:0;height:0;display:none}

  .ll-desk-offers .ldo-box{
    position:relative;
    background:#fffafa;
    border:1px solid rgba(255,196,108,.35);
    border-radius:14px;
    padding:18px 17px 16px;
    overflow:hidden;
    box-shadow:0 10px 40px rgba(20,51,80,.10),0 2px 8px rgba(192,16,127,.06);
  }
  .ll-desk-offers .ldo-box::before{
    content:"";position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,#ffc46c 0%,#e8a449 30%,#c0107f 70%,#01696f 100%);
  }
  .ll-desk-offers .ldo-k{
    display:inline-flex;align-items:center;gap:.4rem;margin:0 0 9px;
    padding:.26rem .6rem;background:rgba(1,105,111,.08);color:#01696f;
    font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    border-radius:99px;border:1px solid rgba(1,105,111,.18);
  }
  .ll-desk-offers .ldo-h{
    font-family:"Playfair Display",Georgia,serif;font-size:1.16rem;font-weight:800;color:#143350;
    line-height:1.14;margin:0 0 6px;letter-spacing:-.01em;
  }
  .ll-desk-offers .ldo-h em{
    font-style:italic;color:#c0107f;
    background:linear-gradient(180deg,transparent 60%,rgba(255,196,108,.32) 60%,rgba(255,196,108,.32) 92%,transparent 92%);
  }
  .ll-desk-offers .ldo-p{font-size:.8rem;line-height:1.5;color:#3a3a3a;margin:0 0 12px}
  .ll-desk-offers .ldo-a{
    display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:#143350;text-decoration:none;border-bottom:2px solid #ffc46c;padding-bottom:2px;
    transition:border-color .16s,color .16s;
  }
  .ll-desk-offers .ldo-a:hover{color:#c0107f;border-bottom-color:#c0107f}
  .ll-desk-offers .ldo-a:focus-visible{outline:2px solid #01696f;outline-offset:3px}
}

@media (prefers-reduced-motion:reduce){
  .ll-hero-form-v2 .hf-pill::before{animation:none}
  .ll-hero-form-v2 input,
  .ll-hero-form-v2 textarea,
  .ll-hero-form-v2 .hf-submit{transition:none}
}