/* lex-lead-css */

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

/* 8.63.0. The practice-area questions, inside the form so the submit handler
   can see them, laid out on their own line so the strip still reads as a
   strip. The form is a flex row in the page stylesheet; it has to be allowed
   to wrap for a full-width child to sit under the fields rather than beside
   them. */
.lex-lead-strip .lex-lead-strip-form{flex-wrap:wrap}
.lex-lead-q{flex:0 0 100%;width:100%;margin:12px 0 0;border-top:1px solid rgba(255,255,255,.18);
  padding-top:12px}
.lex-lead-q > summary{cursor:pointer;font-size:13.5px;font-weight:600;list-style:none;
  display:flex;align-items:center;gap:9px;padding:5px 0;color:inherit;min-height:34px}
.lex-lead-q > summary::-webkit-details-marker{display:none}
/* The literal glyph, not a CSS escape: this block is a PHP heredoc, and
   heredocs interpret  as an OCTAL escape, so 'B8' left the server as
   chr(21) followed by "B8" and rendered as a mojibake box. */
.lex-lead-q > summary::before{content:'▸';display:inline-block;transition:transform .15s;font-size:11px;opacity:.75}
.lex-lead-q[open] > summary::before{transform:rotate(90deg)}
.lex-lead-q > summary span{font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;
  opacity:.7;border:1px solid currentColor;border-radius:3px;padding:1px 6px}
.lex-lead-q-why{margin:4px 0 12px;font-size:12.5px;line-height:1.55;opacity:.8;max-width:70ch}
/* The question fields render on the strip's dark panel, so they need a light
   surface of their own rather than inheriting a colour they were not designed
   against. */
.lex-lead-q .lex-intake-q{background:#fff;color:#1F2430;border-radius:6px;padding:16px 18px}
@media(max-width:700px){.lex-lead-q .lex-intake-q{padding:14px}}

/* The same block inside the contact-section form, which is a WHITE card. The
   rules above were written for the strip's dark panel: a white inner surface
   on a white card is an invisible boundary, and a white-on-white border makes
   the disclosure look like stray text. Light surface, ordinary borders. */
.lex-ci-form .lex-lead-q{border-top:1px solid #e6e1d6;margin-top:18px;padding-top:14px;
  flex:none;width:auto}
.lex-ci-form .lex-lead-q > summary{color:#3A4358;font-size:13px}
.lex-ci-form .lex-lead-q-why{color:#55607A;opacity:1}
.lex-ci-form .lex-lead-q .lex-intake-q{background:#FAFAF8;border:1px solid #e6e1d6}

/* The strip on a phone.
   Measured at 390px on the immigration and LTB hubs: .lex-lead-row is a flex
   row holding a 280px heading and a 280px form with no wrap, so it rendered
   560px wide, ran 294px past the right edge, and gave the whole page a
   horizontal scrollbar. Every element below it then measured as overflowing
   too, 298 of them on immigration, because the document itself was wider than
   the screen. Below 700px the two stack and the form takes the full width. */
@media(max-width:700px){
  .lex-lead-strip .lex-lead-row{flex-direction:column!important;flex-wrap:wrap!important;
    align-items:stretch!important;gap:14px!important;min-width:0!important;max-width:100%!important}
  .lex-lead-strip .lex-lead-strip-text{min-width:0!important;max-width:100%!important;width:auto!important}
  .lex-lead-strip .lex-lead-strip-form{min-width:0!important;width:100%!important;max-width:100%!important;
    flex-direction:column!important;flex-wrap:wrap!important;gap:10px!important}
  .lex-lead-strip .lex-lead-strip-form input,
  .lex-lead-strip .lex-lead-strip-form button{width:100%!important;min-width:0!important;
    max-width:100%!important;box-sizing:border-box!important}
  .lex-lead-strip .lex-lead-note{max-width:100%!important}
}
.lex-lead-strip .wrap{padding-top:26px;padding-bottom:26px}
.lex-lead-strip-form button{background:var(--gold,#E8B84B);color:var(--navy4,#090F20);
  border:0;border-radius:6px;font-family:var(--sans,sans-serif);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:12px 26px;cursor:pointer;
  transition:background .2s,transform .2s;white-space:nowrap}
.lex-lead-note{font-size:11px;line-height:1.7;color:rgba(240,236,228,.72);margin:12px 0 0;max-width:640px}
.lex-light .lex-lead-note,.sec-lt .lex-lead-note{color:var(--tb,#2C3154)}
.lex-lead-strip-form button[disabled]{opacity:.75;cursor:default;transform:none}

/* Input colours, set on BOTH sides of the pair.

   The page stylesheets ask for background:rgba(255,255,255,.05) with cream
   text, which reads correctly on navy. Something else on the page renders
   these inputs solid white instead, and cream-on-white placeholder text at
   40% alpha is effectively invisible: roughly 1.1:1.

   Rather than chase whatever wins that particular cascade, this fixes the
   background AND the text AND the placeholder together. Once all three are
   asserted the pairing cannot drift, whichever surface the strip lands on.

   White ground, navy text        16.63:1
   White ground, #4A5268 hint      7.78:1

   Both clear 4.5:1 with room to spare. The placeholder is deliberately not
   the only label: every field carries a visually hidden <label> as well, so
   the form is usable when placeholders are ignored by a screen reader. */
.lex-lead-strip .lex-lead-strip-form input,
.lex-lead-strip .lex-lead-strip-form input[type="text"],
.lex-lead-strip .lex-lead-strip-form input[type="email"],
.lex-lead-strip .lex-lead-strip-form input[type="tel"]{
  background:#FFFFFF!important;
  color:#0F1E38!important;
  border:1px solid rgba(15,30,56,.22)!important;
  -webkit-text-fill-color:#0F1E38!important;
  opacity:1!important;
  font-size:14px!important;
}
.lex-lead-strip .lex-lead-strip-form input::placeholder{
  color:#4A5268!important; opacity:1!important; -webkit-text-fill-color:#4A5268!important;
}
.lex-lead-strip .lex-lead-strip-form input::-webkit-input-placeholder{
  color:#4A5268!important; -webkit-text-fill-color:#4A5268!important;
}
.lex-lead-strip .lex-lead-strip-form input:-ms-input-placeholder{ color:#4A5268!important; }
.lex-lead-strip .lex-lead-strip-form input:focus{
  outline:2px solid #E8B84B!important; outline-offset:1px;
  border-color:#0F1E38!important; box-shadow:none!important;
}
/* Autofill repaints the field in the browser's own colours. */
.lex-lead-strip .lex-lead-strip-form input:-webkit-autofill{
  -webkit-text-fill-color:#0F1E38!important;
  box-shadow:0 0 0 1000px #FFFFFF inset!important;
}
/* The gold button already sits at 10.35:1 with navy text; assert it so a
   parent section rule cannot repaint the label. */
.lex-lead-strip .lex-lead-strip-form button{
  background:#E8B84B!important; color:#090F20!important; opacity:1!important;
}
/* The heading, on whichever surface the strip lands. */
.lex-lead-strip .lex-lead-strip-text{ color:#E8B84B!important; }
.lex-light .lex-lead-strip .lex-lead-strip-text,
.sec-lt .lex-lead-strip .lex-lead-strip-text,
.sec-alt .lex-lead-strip .lex-lead-strip-text{ color:#7E6429!important; }
.lex-lead-ok{font-family:var(--sans,sans-serif);font-size:13px;line-height:1.7;
  color:var(--gold,#E8B84B);margin:10px 0 0}

.lex-lead-urgent{margin-top:10px;padding:11px 14px;border-left:3px solid #C0473A;background:rgba(192,71,58,.10);font-size:13.5px;line-height:1.6;color:#F3E4E1}
.lex-lead-urgent a{color:#FFD9D4;text-decoration:underline}
.lex-lead-urgent strong{color:#FFB4A9}

/* lex-touch-css */

/* Touch devices only. A mouse is pointer:fine and is not affected by anything
   in this block, so desktop rendering is byte for byte unchanged. */
@media (pointer: coarse) {

  /* Buttons and standalone links. min-height rather than height, so a control
     that is already comfortable keeps its own size. */
  button,
  input[type="submit"],
  input[type="button"],
  .hero-cta, .lex-if-btn, .lex-sa-opt, .lex-lp-btn, .lex-consent-btn,
  .lex-rel-list a, .lex-areanav-g a, .lex-toc-list a, .faq-row {
    min-height: 44px;
  }

  /* Centre the label inside the taller box rather than leaving it at the top. */
  .hero-cta, .lex-if-btn, .lex-lp-btn, .lex-consent-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .lex-sa-opt, .lex-rel-list a, .lex-areanav-g a, .lex-toc-list a {
    display: flex;
    align-items: center;
  }

  /* Form controls. 16px is not a style choice: iOS Safari zooms the page in
     when a focused input has a font size below 16px, which is disorienting and
     leaves the visitor zoomed in on a form they cannot see the rest of. */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], select, textarea {
    min-height: 44px;
    font-size: 16px;
  }
  textarea { min-height: 88px; }

  /* Checkboxes and radios are drawn by the platform and ignore min-height, so
     they are scaled instead. */
  input[type="checkbox"], input[type="radio"] {
    min-width: 22px;
    min-height: 22px;
  }

  /* Adjacent controls need space between them or a thumb hits both. */
  .lex-consent-actions, .lex-lp-actions, .lex-sa-acts { gap: 12px; }

  /* Deliberately excluded: links inside a sentence. Forcing 44px on those would
     break the line spacing of every paragraph, and WCAG 2.5.8 exempts a target
     that sits inline within a block of text for that reason. */
  p > a, li > a:not([class]), .lex-ib-a { min-height: 0; display: inline; }
}

/* lex-nav-scope-css */

/* The bare nav rule pins every nav to the top of the viewport at 80px.
   Correct for the site header, wrong for everything else. These three are
   returned to normal flow. #nav and #nav-mobile are deliberately not listed. */
nav:not(#nav):not(#nav-mobile):not(.lex-keep-fixed):not([style*="position:fixed"]):not([style*="position: fixed"]){
  position:static!important;
  top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  height:auto!important;min-height:0!important;
  display:block!important;
  align-items:normal!important;
  z-index:auto!important;
}
/* The header rule also paints a navy background and a gold underline on them.
   .lex-toc already sets its own cream background at a higher specificity, so
   only the borders and the breadcrumb backgrounds need correcting. */
nav.pg-hero-bc,
nav.lex-areanav-jump,
nav.rev:not([id]){background:transparent!important;border-bottom:0!important}
/* The jump bar is a row of pills inside the section, not a bar across the
   viewport. Returned to flow it needs to wrap rather than sit on one line. */
nav.lex-areanav-jump{display:flex!important;flex-wrap:wrap!important;gap:7px!important;margin:0 0 18px!important}

/* Two pages carry a sticky sub navigation written with an inline
   position:fixed;top:0;z-index:9992, which is the site header's own position
   and z-index. Being later in the document it painted over the header, so the
   logo and menu were unreachable on those pages too. This is a separate fault
   from the bare nav rule: it is hard coded in the page markup, so the allow
   list above deliberately leaves it fixed and it is corrected here instead.
   It stays sticky, which is the intent, but sits below the 80px header rather
   than on top of it, and drops beneath it in the stacking order. */
nav.pg-inline-nav,
nav.emp-inline-nav{top:80px!important;z-index:9990!important}
@media(max-width:768px){nav.pg-inline-nav,nav.emp-inline-nav{top:64px!important}}
nav.lex-toc{border-bottom:1px solid rgba(232,184,75,.25)!important}

/* With the element back in flow the list can size itself again. Restated here
   because the original declaration is easily lost behind the header rule. */
nav.lex-toc .lex-toc-list{display:grid!important}
@media print{nav.lex-toc{position:static!important}}