/*
 * Java & Jebreil site polish (2026-11). Loaded last in <head> on every page.
 * Refines focus, states, motion, targets, contrast, alignment and spacing inside the existing
 * design: copy, brand colors, Inter type, square buttons and the approved desktop scroll effects
 * stay. Motion follows Material 3 durations (150 to 400 ms) with standard easing for state
 * changes and emphasized-decelerate easing for entrances; every effect has a reduced-motion
 * equivalent. The last sections style what jjlaw-polish.js restores where Elementor's own
 * handlers did not start (header dropdown, mobile menu button, testimonial carousel) and the
 * entrance motion it adds.
 */
:root {
  --jj-navy: var(--e-global-color-primary, #112d4e);
  --jj-blue: #5177a5; /* secondary #557DAC deepened just enough for 4.6:1 with white text */
  --jj-nav-current: #daebff; /* menu hover/current color, 4.6:1 on the translucent header */
  --jj-error: #b42318; /* the contact form's own error red */
  --jj-ease: cubic-bezier(0.2, 0, 0, 1); /* M3 standard */
  --jj-ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1); /* M3 emphasized decelerate: entering */
  --jj-ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15); /* M3 emphasized accelerate: leaving */
  --jj-fast: 150ms;
  --jj-medium: 250ms;
  --jj-long: 400ms;
  /* Motion language (2026-11-08), adapted from the operator's reference motion system:
     long emphasized entrances (1400 ms on the M3 emphasized curve above, which covers half the
     distance in the first fifth of the time and 80 % by two fifths), 180 ms sequence steps, and the
     glide curve for small responses. jjlaw-polish.js reads the timing properties, so CSS and script
     agree. */
  --jj-ease-glide: cubic-bezier(0.16, 1, 0.3, 1);
  --jj-ease-fade: cubic-bezier(0, 0, 0.2, 1); /* decelerate: lazily loaded images */
  --jj-step: 180ms; /* sequence step for the header, the hero, headline lines and groups */
  --jj-entrance: 1050ms; /* hero copy */
  --jj-entrance-long: 1400ms; /* hero headline and the article photo */
  --jj-header-enter: 900ms;
  --jj-hero-delay: 120ms; /* the headline starts once the header has begun */
  --jj-reveal-rise: 30px;
  --jj-reveal-rise-row: 20px; /* list rows, and the fourth and later blocks of a group */
  --jj-reveal-rise-card: 26px;
  --jj-reveal-rise-media: 24px;
  --jj-reveal-move: 1400ms;
  --jj-reveal-fade: 1400ms;
  --jj-reveal-step: 180ms;
  --jj-reveal-horizon: 900ms; /* a block queued further out than this fades in without travel */
  --jj-image-settle: 1400ms;
  --jj-image-arrive: 700ms;
  --jj-disclose-open: 300ms;
  --jj-disclose-close: 300ms;
  --jj-carousel-page: 620ms;
  --jj-depth-scroll: 8px; /* photo bands drift at most this far with the scroll */
  /* Darkening-only grain for filled buttons: black specks at most about 8 % alpha, so labels
     never lose contrast. */
  --jj-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
}

/* Scrollbar visibility never moves the layout. */
html {
  scrollbar-gutter: stable both-edges;
  scroll-behavior: smooth; /* in-page links glide; reduced motion jumps (below) */
}
@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  }
}

/* Pinned elements stay where they sit in the page when they pin. Elementor's sticky script
   gives a pinned box the left offset it measured, and with classic scrollbars the gutter above
   counts that offset twice: the header and the home and About attorney panels jumped 15 px to
   the right as they pinned. With no offset a fixed box keeps its in-flow position. */
.elementor-sticky.elementor-sticky--active:not(.elementor-sticky__spacer) {
  inset-inline-start: auto !important;
}

/* One visible focus ring for keyboard users: navy ring with a white halo, legible on light and
   dark sections. The shape of the focused control stays as designed (square buttons). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible {
  outline: 2px solid var(--jj-navy) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px #fff !important;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link: hidden until focused, then a clear chip over the header. */
.skip-link.screen-reader-text:focus {
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 100000 !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  padding: 12px 16px !important;
  background: #fff !important;
  color: var(--jj-navy) !important;
  font: 600 16px/1.2 Inter, system-ui, sans-serif !important;
  text-decoration: underline !important;
  box-shadow: 0 2px 8px rgba(17, 45, 78, 0.3) !important;
}

/* Calm, consistent state changes on links and controls. */
a,
.elementor-button,
.elementor-icon-list-item a,
.elementor-nav-menu a,
input,
select,
textarea,
button {
  transition:
    color var(--jj-fast) var(--jj-ease),
    background-color var(--jj-fast) var(--jj-ease),
    border-color var(--jj-fast) var(--jj-ease),
    box-shadow var(--jj-fast) var(--jj-ease),
    opacity var(--jj-fast) var(--jj-ease),
    text-decoration-color var(--jj-fast) var(--jj-ease);
}

/* Button states. Filled and outlined buttons darken on hover by the site's own 20 % black layer
   (.color1/.color2 already do this; the form submit and mobile-menu phone buttons get the same),
   and darken a further 12 % while pressed, so white labels keep their contrast. Inset shadows
   paint between the background and the label and leave the ::before/::after arrows that some
   buttons draw alone. Text-style buttons (the "Explore ..." card links and the arrow links)
   underline their label instead. Shapes stay square. */
/* Filled buttons (2026-11-07): a fine darkening grain and a soft bottom shade give the flat fills
   texture, a 1 px top highlight and a navy depth shadow lift them off the page, and hover rises
   1 px while press settles back. Every layer darkens or sits outside the label, so the white
   labels keep at least the 4.6:1 they had. The state tint and the depth are separate custom
   properties so hover and press change one without losing the other. */
.elementor-button.elementor-size-sm {
  --jj-btn-tint: inset 0 0 0 0 transparent; /* inset, so hover and press ease */
  --jj-btn-depth: 0 1px 1px rgba(17, 45, 78, 0.14), 0 8px 18px -12px rgba(17, 45, 78, 0.55);
  background-image: var(--jj-grain), linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.1) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--jj-btn-tint), var(--jj-btn-depth) !important;
  transition:
    color var(--jj-fast) var(--jj-ease),
    background-color var(--jj-fast) var(--jj-ease),
    border-color var(--jj-fast) var(--jj-ease),
    box-shadow var(--jj-medium) var(--jj-ease),
    transform var(--jj-medium) var(--jj-ease),
    text-decoration-color var(--jj-fast) var(--jj-ease);
}
.elementor-button.elementor-size-sm:hover {
  --jj-btn-tint: inset 0 0 0 100vmax rgba(0, 0, 0, 0.2);
  --jj-btn-depth: 0 2px 3px rgba(17, 45, 78, 0.16), 0 14px 24px -14px rgba(17, 45, 78, 0.6);
}
.color1 .elementor-button.elementor-size-sm:hover,
.color2 .elementor-button.elementor-size-sm:hover {
  --jj-btn-tint: inset 0 0 0 0 transparent; /* inset, so hover and press ease */
}
.elementor-button.elementor-size-sm:active {
  --jj-btn-tint: inset 0 0 0 100vmax rgba(0, 0, 0, 0.12);
  --jj-btn-depth: 0 1px 1px rgba(17, 45, 78, 0.18), 0 4px 10px -8px rgba(17, 45, 78, 0.5);
}
@media (hover: hover) {
  .elementor-button.elementor-size-sm:hover {
    transform: translate3d(0, -1px, 0);
  }
}
.elementor-button.elementor-size-sm:active {
  transform: none;
}
/* The keyboard focus halo stays visible over the button shadows. */
.elementor-button.elementor-size-sm:focus-visible,
.elementor .elementor-element:is(.elementor-element-c7e5f1d, .elementor-element-d77c639) .elementor-button:focus-visible {
  box-shadow: 0 0 0 4px #fff, var(--jj-btn-depth) !important;
}
/* Outlined buttons on dark ground (the Home hero and the footer) become liquid glass: a navy tint
   over a blurred, slightly saturated backdrop, the white hairline they had and a top highlight.
   Without backdrop-filter the tint is opaque enough to carry the white label on its own. */
.elementor .elementor-element.elementor-element-c7e5f1d .elementor-button,
.elementor .elementor-element.elementor-element-d77c639 .elementor-button {
  --jj-btn-depth: 0 10px 26px -16px rgba(0, 0, 0, 0.55);
  background-color: rgba(17, 45, 78, 0.3);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 38%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), var(--jj-btn-tint), var(--jj-btn-depth) !important;
}
/* The glass buttons darken on hover and further on press, over the blur and the fallback alike. */
.elementor .elementor-element:is(.elementor-element-c7e5f1d, .elementor-element-d77c639) .elementor-button:hover {
  --jj-btn-tint: inset 0 0 0 100vmax rgba(0, 0, 0, 0.2);
}
.elementor .elementor-element:is(.elementor-element-c7e5f1d, .elementor-element-d77c639) .elementor-button:active {
  --jj-btn-tint: inset 0 0 0 100vmax rgba(0, 0, 0, 0.28);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .elementor .elementor-element.elementor-element-c7e5f1d .elementor-button,
  .elementor .elementor-element.elementor-element-d77c639 .elementor-button {
    background-color: rgba(17, 45, 78, 0.72);
  }
}
/* The header glass gains a little saturation and a hairline edge; an opaque header stands in
   where backdrop-filter is unavailable. */
.header {
  -webkit-backdrop-filter: blur(30px) saturate(160%) !important;
  backdrop-filter: blur(30px) saturate(160%) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header {
    background-color: rgb(59, 68, 79) !important;
  }
}
.elementor-cta .elementor-cta__button.elementor-button:hover,
.elementor-cta .elementor-cta__button.elementor-button:focus-visible,
.elementor-button.elementor-size-md:hover .elementor-button-text,
.elementor-button.elementor-size-md:focus-visible .elementor-button-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Links: text links inside articles are underlined, so they do not depend on color alone
   (WCAG 1.4.1); footer and card title links underline on hover and keyboard focus. */
.elementor-location-single .elementor-widget-text-editor :is(p, li) a:not(.elementor-button) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.elementor-location-single .elementor-widget-text-editor :is(p, li) a:not(.elementor-button):hover {
  text-decoration-thickness: 2px;
}
.elementor-location-footer .elementor-icon-list-item > a:hover .elementor-icon-list-text,
.elementor-location-footer .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text,
.e-loop-item .elementor-heading-title a:hover,
.e-loop-item .elementor-heading-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Contact form fields: a navy underline while focused, and the form's error red once a field
   the visitor has left is invalid. These outrank the page's own !important field colors. */
.elementor-widget-form .elementor-field-group .elementor-field-textual:focus {
  border-bottom-color: var(--jj-navy) !important;
}
.elementor-widget-form .elementor-field-group .elementor-field-textual:user-invalid {
  border-bottom-color: var(--jj-error) !important;
  box-shadow: inset 0 -1px 0 var(--jj-error);
}

/* Contrast (WCAG 2.2 AA, 4.5:1 for text), each with the smallest color change that passes. */
/* Buttons and header dropdown links filled with the secondary blue: white text was 4.3:1. */
.elementor-button,
.elementor-nav-menu--dropdown {
  --e-global-color-secondary: var(--jj-blue);
}
.elementor-15 .elementor-element.elementor-element-20cb2c4 .elementor-button:hover,
.elementor-15 .elementor-element.elementor-element-20cb2c4 .elementor-button:focus {
  background-color: var(--jj-blue);
}
/* Hovered and current header menu items: #ACCCF2 was 3.4:1 on the translucent header. */
.elementor-15 .elementor-element.elementor-element-a30694c .elementor-nav-menu--main .elementor-item:hover,
.elementor-15 .elementor-element.elementor-element-a30694c .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-15 .elementor-element.elementor-element-a30694c .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-15 .elementor-element.elementor-element-a30694c .elementor-nav-menu--main .elementor-item:focus {
  color: var(--jj-nav-current);
  fill: var(--jj-nav-current);
}
.elementor-15 .elementor-element.elementor-element-c7ca09b {
  --e-global-color-text: var(--jj-nav-current);
}
/* The current, hovered and focused items in both menus also carry an underline, so the cue does
   not rest on colour alone: #DAEBFF sits close to the white of the other items. In the desktop
   menu the underline is a 2 px bar under the text that draws from the left over 300 ms, as the reference
   menu underline does. The tablet and phone menu items span the whole row, so they keep the text
   underline, which stays under the words. */
.elementor-15 .elementor-element.elementor-element-c7ca09b .elementor-nav-menu--main .elementor-item {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: transparent;
}
.elementor-15 .elementor-element.elementor-element-c7ca09b .elementor-nav-menu--main .elementor-item:is(:hover, :focus-visible, .elementor-item-active, .highlighted) {
  text-decoration-color: currentColor;
}
.elementor-15 .elementor-element.elementor-element-a30694c .elementor-nav-menu--main .elementor-item {
  text-decoration-line: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-origin: content-box;
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition:
    color var(--jj-fast) var(--jj-ease),
    background-size 300ms var(--jj-ease);
}
.elementor-15 .elementor-element.elementor-element-a30694c .elementor-nav-menu--main .elementor-item:is(:hover, :focus-visible, .elementor-item-active, .highlighted) {
  background-size: 100% 2px;
}
/* Article category label: #676C72 on #EAEAEA was 4.4:1. */
.elementor-2649 .elementor-element.elementor-element-35a7a87 .elementor-heading-title {
  color: #64696f;
}
/* The /contact/ and /about/ page titles are h1 elements (they were h3). On desktop the kit
   sizes headings by tag, so keep the h3 size and line height the kit gave these titles;
   tablet and phone sizes come from the widgets themselves and are unchanged. */
.elementor-kit-8 .elementor-element-9bdd3f2 h1.elementor-heading-title,
.elementor-kit-8 .elementor-element-8158275 h1.elementor-heading-title {
  font-size: 40px;
  line-height: 50px;
}

/* Target sizes (WCAG 2.5.8): at least 24 px everywhere, 44 px on touch screens for the header
   menu, the footer link lists and the small "Explore ..." links. Padding with an equal negative
   margin enlarges the hit area without moving anything. */
.elementor-location-footer .elementor-icon-list-item > a {
  padding-block: 4px;
  margin-block: -4px;
}
.elementor-widget-call-to-action .elementor-cta .elementor-cta__button-wrapper .elementor-cta__button.elementor-button {
  --jj-cta-pad: 4.5px;
  padding-block: var(--jj-cta-pad);
  margin-block: calc(-1 * var(--jj-cta-pad));
}
/* The long arrow after the practice-area "Contact us" links is placed with top: -3px from the
   link's padding edge; move it by the added padding so it stays beside the text. */
.employmentlegalities .elementor-cta__button::after {
  margin-top: var(--jj-cta-pad, 0px);
}
.elementor-widget-post-info .elementor-icon-list-item a {
  padding-block: 2px;
  margin-block: -2px;
}
.elementor-icon-box-icon a.elementor-icon {
  padding: 4px;
  margin: -4px;
}
.elementor-icon-box-title a {
  padding-block: 2px;
}
@media (pointer: coarse) {
  /* Footer lists put 19 px between 22 px links: grow each row by 3 px to fit 44 px targets. */
  .elementor-location-footer .elementor-icon-list-item > a {
    padding-block: 11px;
    margin-block: -9.5px;
  }
  .elementor-location-footer .elementor-icon-list-item:only-child > a {
    padding-block: 14px;
    margin-block: -14px;
  }
  .elementor-widget-call-to-action .elementor-cta .elementor-cta__button-wrapper .elementor-cta__button.elementor-button {
    --jj-cta-pad: 14.5px;
  }
  .elementor-15 .elementor-element.elementor-element-a30694c .elementor-nav-menu--main .elementor-item {
    padding-block: 10px;
    margin-block: -10px;
  }
  /* The mobile menu button is a 24 px icon: a transparent 44 px touch area around it. */
  .mobile-menu-icon #nav-icon4::after {
    content: "";
    position: absolute;
    inset: -10px;
  }
}

/* Headings wrap evenly; paragraphs avoid single-word last lines. */
.elementor-heading-title,
h1,
h2,
h3 {
  text-wrap: balance;
}
.elementor-widget-text-editor p,
.entry-content p {
  text-wrap: pretty;
}

/* The rotated decorative lines in the home template are placed for desktop; on tablets they
   sat past the page edge and made the page scroll sideways. About keeps its own, which stay
   on screen. */
@media (max-width: 1024px) {
  .elementor-72 .elementor-element.elementor-element-4d8fd86,
  .elementor-72 .elementor-element.elementor-element-f0b665c,
  .elementor-72 .elementor-element.elementor-element-3730cc7,
  .elementor-72 .elementor-element.elementor-element-423aab1 {
    display: none;
  }
}

/* Layout ---------------------------------------------------------------------------------- */

/* Images keep their proportions. A content image whose box Elementor fixes in both dimensions is
   cropped to fill it instead of stretched (the Home attorney portraits were 0.47 wide-to-tall
   against their 0.70 at tablet widths; About already crops them). The rule has no specificity, so
   any object-fit a widget sets still wins, and an image whose box matches it is unchanged. The
   header logo fits its box whole instead of being squeezed 2 % taller. */
:where([data-elementor-type="wp-page"], [data-elementor-type="wp-post"], [data-elementor-type="single-post"]) .elementor-widget-image img {
  object-fit: cover;
}
.elementor-15 .elementor-element.elementor-element-936a870 img {
  object-fit: contain;
  object-position: left center;
}

/* Post cards stay inside their grid column. When a card's image fails to load, Chromium sizes the
   broken image from its width attribute and the card widened its column to 1006 px, so phones
   scrolled sideways (/blog/ and the article related posts). A loaded image already fits, so the
   rendered layout is unchanged. */
.elementor-loop-container > .e-loop-item {
  min-width: 0;
}

/* Side margins. Between 768 and 1340 px the 1254 px content width left text and cards 0 to
   15 px from the window edge; every top-level section now keeps at least 24 px. Phones keep
   their 15 px margins. Full-width bands and their backgrounds still run edge to edge. */
@media (min-width: 768px) and (max-width: 1340px) {
  :is([data-elementor-type="header"], [data-elementor-type="footer"], [data-elementor-type="wp-page"],
    [data-elementor-type="wp-post"], [data-elementor-type="single-post"]) > .e-con-boxed {
    padding-inline-start: max(24px, var(--padding-inline-start, 0px)) !important;
    padding-inline-end: max(24px, var(--padding-inline-end, 0px)) !important;
  }
}

/* Author archive: the 56 px author name ran past the window edge on phones (77 px of sideways
   scrolling at 320 px). It scales with the window below 600 px and moves under the avatar
   when the two do not fit on one line. */
body.author .page-header .page-title {
  flex-wrap: wrap;
  row-gap: 12px;
}
@media (max-width: 599px) {
  body.author .page-header .page-title {
    font-size: clamp(32px, 10vw, 56px);
  }
}

/* The footer button keeps its label on one line where the side margins narrow its column. */
[data-elementor-type="footer"] .elementor-button {
  white-space: nowrap;
}

/* One left edge. On tablets and desktops the hero copy of Home, Contact and About and the
   footer copyright sat 10 px (27 px on About) inside the edge the logo, the section headings
   and the footer columns share. */
@media (min-width: 768px) {
  .elementor-72 .elementor-element.elementor-element-c769f14,
  .elementor-1633 .elementor-element.elementor-element-f542445,
  .elementor-943 .elementor-element.elementor-element-695a34c,
  .elementor-96 .elementor-element.elementor-element-d28cd0e {
    --padding-left: 0px;
    --padding-right: 0px;
  }
  .elementor-943 .elementor-element.elementor-element-695a34c > .e-con-inner {
    max-width: none;
  }
}

/* Tablet heroes: the headline and intro ran across the photo, white on light background. The
   copy now keeps to the left 62 % over a navy scrim (the brand primary) that clears before the
   faces. Portrait tablets set the headline and intro in the sizes phones use, so the hero keeps
   its height and the photo keeps its crop. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-72 .elementor-element.elementor-element-091e581,
  .elementor-1633 .elementor-element.elementor-element-f9b96aa,
  .elementor-943 .elementor-element.elementor-element-653b2e5 {
    isolation: isolate;
  }
  .elementor-72 .elementor-element.elementor-element-091e581::before,
  .elementor-1633 .elementor-element.elementor-element-f9b96aa::before,
  .elementor-943 .elementor-element.elementor-element-653b2e5::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 1;
    mix-blend-mode: normal;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.82) 38%,
      rgba(17, 45, 78, 0.45) 56%, rgba(17, 45, 78, 0) 70%);
  }
  .elementor-72 .elementor-element.elementor-element-fd2d5c7,
  .elementor-72 .elementor-element.elementor-element-51515de,
  .elementor-1633 .elementor-element.elementor-element-9bdd3f2,
  .elementor-1633 .elementor-element.elementor-element-c598415,
  .elementor-943 .elementor-element.elementor-element-8158275 {
    max-width: 62% !important;
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  .elementor-72 .elementor-element.elementor-element-fd2d5c7 .elementor-heading-title,
  .elementor-1633 .elementor-element.elementor-element-9bdd3f2 .elementor-heading-title,
  .elementor-943 .elementor-element.elementor-element-8158275 .elementor-heading-title {
    font-size: 32px;
    line-height: 42px;
  }
  .elementor-72 .elementor-element.elementor-element-51515de .elementor-heading-title,
  .elementor-1633 .elementor-element.elementor-element-c598415 .elementor-heading-title {
    font-size: 16px;
  }
}

/* Card rows: every practice card fills its row and keeps its "Explore legal aid" link on the
   bottom edge (two cards were 2 px short, so their links and edges sat higher). */
.lawservices .elementor-widget-call-to-action.elementor-cta--skin-classic {
  flex-grow: 1;
}
.lawservices .elementor-widget-call-to-action.elementor-cta--skin-classic > .elementor-widget-container,
.lawservices .elementor-widget-call-to-action.elementor-cta--skin-classic .elementor-cta {
  height: 100%;
}
.lawservices .elementor-cta--skin-classic .elementor-cta__content {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.lawservices .elementor-cta--skin-classic .elementor-cta__button-wrapper {
  margin-top: auto;
}

/* Phones: the six practice cards on Home stack 30 px apart; the gap between the two rows
   was 15 px. */
@media (max-width: 767px) {
  .elementor-72 .elementor-element.elementor-element-f7cc406 {
    --row-gap: 30px;
  }
  /* The Corporate Counsel card centers its text and button; its title was left-aligned. */
  .elementor-72 .elementor-element.elementor-element-2b6b37d {
    text-align: center;
  }
}

/* The smallest phones (below 360 px): the 256 px logo ran under the menu button, and the longer
   button labels broke onto two lines. The logo scales to 220 px in its own 46 px tall box, so
   the header keeps its height; button labels use 16 px type and filled buttons 20 px side
   padding, so each label fits on one line. */
@media (max-width: 359px) {
  .elementor-15 .elementor-element.elementor-element-936a870 img {
    max-width: 220px;
    object-fit: contain;
    object-position: left center;
  }
  .elementor-widget-button .elementor-button {
    font-size: 16px !important;
  }
  .elementor-widget-button .elementor-button.elementor-size-sm {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* The attorney tag lines ("LA's Versatile Corporate and Employment Lawyer") wrap on tablets and
   small laptops, and their 14 px line height made the two lines overprint. A 24 px line with
   5 px padding keeps the one-line box exactly as it was. */
@media (min-width: 768px) {
  .elementor-72 .elementor-element.elementor-element-4f9486f .elementor-heading-title,
  .elementor-72 .elementor-element.elementor-element-26e2765 .elementor-heading-title,
  .elementor-72 .elementor-element.elementor-element-76f8e8d .elementor-heading-title,
  .elementor-72 .elementor-element.elementor-element-757babc .elementor-heading-title {
    line-height: 24px;
  }
  .elementor-72 .elementor-element.elementor-element-4f9486f > .elementor-widget-container,
  .elementor-72 .elementor-element.elementor-element-26e2765 > .elementor-widget-container,
  .elementor-72 .elementor-element.elementor-element-76f8e8d > .elementor-widget-container,
  .elementor-72 .elementor-element.elementor-element-757babc > .elementor-widget-container {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

/* Motion ---------------------------------------------------------------------------------- */

/* The motion follows the operator's reference motion system (read 2026-11-08): the header and hero arrive in a short sequence, content glides up once as it
   scrolls into view, photos open inside their frames and settle from 104 %, decorative rules draw,
   photo bands keep a little depth, and small responses use the glide curve. Copy, colours and
   layout stay as they are; only opacity, transform and clip-path move, so nothing shifts. */

@keyframes jj-header-enter {
  from {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes jj-rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Transform only, for a glass button: an opacity below 1 would cut its backdrop blur until the end. */
@keyframes jj-rise-in-glass {
  from {
    transform: translate3d(0, 22px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes jj-hero-line {
  from {
    transform: translate3d(0, 114%, 0);
  }
  to {
    transform: none;
  }
}
/* Holds the headline's clip while it rises; open above and to the sides so nothing else is cut. */
@keyframes jj-hold-clip {
  from,
  to {
    clip-path: inset(-50vh -50vw 0 -50vw);
  }
}
@keyframes jj-portrait-enter {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 18px, 0);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}
@keyframes jj-portrait-settle {
  from {
    transform: scale(1.04);
  }
  to {
    transform: none;
  }
}

/* Hero entrance, from the first frame and without the script. The header's logo, menu and call
   button drop 12 px into place 60, 180 and 360 ms in (the sticky header itself never moves). On a
   page whose first section holds its h1, the headline rises out of its own clip from 120 ms; the
   eyebrow above it leads at once, the intro follows at 540 ms and the buttons at 720 ms, each
   rising 22 px over 1050 ms. jjlaw-polish.js may split the headline into lines that rise 180 ms
   apart. An article opens its photo from the top edge while the photo settles from 104 %. Theme
   archive pages raise their title block. Everything stays clickable and keyboard reachable. */
.elementor-15 .elementor-element:is(.elementor-element-936a870, .elementor-element-679ed57, .elementor-element-6e179f3, .elementor-element-a30694c, .elementor-element-20cb2c4) {
  animation: jj-header-enter var(--jj-header-enter) var(--jj-ease) 60ms both;
}
.elementor-15 .elementor-element:is(.elementor-element-a30694c, .elementor-element-6e179f3) {
  animation-delay: 180ms;
}
.elementor-15 .elementor-element.elementor-element-20cb2c4 {
  animation-delay: 360ms;
}
/* The hero is the first section of a page that holds the h1. The Corporate Law title is an h3 in
   the same place, so that hero is named by its page. Body text in a hero (the Terms of Use text)
   shows at once. Each rule list holds a :has() selector, so a browser without :has() drops the
   whole entrance together and shows the hero as it is. */
:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"]) > .e-con:first-child:has(h1) .elementor-widget:is(.elementor-widget-heading, .elementor-widget-button, .elementor-widget-icon-list):not(:has(h1), .elementor-invisible, .animated),
.elementor-3198 > .e-con:first-child:has(.elementor-element-409fd514) .elementor-widget:is(.elementor-widget-heading, .elementor-widget-button):not(.elementor-element-409fd514, .elementor-invisible, .animated) {
  animation: jj-rise-in var(--jj-entrance) var(--jj-ease) 540ms both;
}
:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"]) > .e-con:first-child:has(h1) .elementor-widget.elementor-widget-heading:not(:has(h1), .elementor-invisible, .animated):has(~ .elementor-widget-heading h1) {
  animation-delay: 0ms;
}
:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"]) > .e-con:first-child:has(h1) .elementor-widget:is(.elementor-widget-button, .elementor-widget-icon-list):not(:has(h1), .elementor-invisible, .animated),
.elementor-3198 > .e-con:first-child:has(.elementor-element-409fd514) .elementor-widget.elementor-widget-button:not(.elementor-invisible, .animated) {
  animation-delay: 720ms;
}
:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"]) > .e-con:first-child:has(h1) .elementor-widget.elementor-element-c7e5f1d:not(:has(h1), .elementor-invisible, .animated) {
  animation-name: jj-rise-in-glass;
}
/* The glass button fades on itself, where an opacity below 1 keeps its own backdrop blur, at the
   same time as the other hero buttons. */
:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"]) > .e-con:first-child:has(h1) .elementor-widget.elementor-element-c7e5f1d:not(:has(h1), .elementor-invisible, .animated) .elementor-button {
  animation: jj-fade var(--jj-entrance) var(--jj-ease) 720ms backwards;
}
:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"]) > .e-con:first-child .elementor-widget-heading > .elementor-widget-container:has(> h1),
.elementor-3198 > .e-con:first-child:has(.elementor-element-409fd514) .elementor-element-409fd514 > .elementor-widget-container {
  animation: jj-hold-clip calc(var(--jj-hero-delay) + var(--jj-entrance-long)) linear backwards;
}
:is([data-elementor-type="wp-page"], [data-elementor-type="wp-post"]) > .e-con:first-child:has(h1) .elementor-widget-heading h1,
.elementor-3198 > .e-con:first-child:has(.elementor-element-409fd514) .elementor-element-409fd514 h3 {
  animation: jj-hero-line var(--jj-entrance-long) var(--jj-ease) var(--jj-hero-delay) both;
}
[data-elementor-type="single-post"] > .e-con:first-child .elementor-widget-image {
  animation: jj-portrait-enter var(--jj-entrance-long) var(--jj-ease) both;
}
[data-elementor-type="single-post"] > .e-con:first-child .elementor-widget-image img {
  animation: jj-portrait-settle var(--jj-entrance-long) var(--jj-ease) both;
}
/* The photo settles inside its own frame, so its larger starting size never widens the page
   (WebKit would keep that width after the entrance). */
[data-elementor-type="single-post"] > .e-con:first-child .elementor-widget-image > .elementor-widget-container {
  overflow: hidden;
}
.site-main > .page-header {
  animation: jj-rise-in var(--jj-entrance) var(--jj-ease) var(--jj-hero-delay) both;
}
/* Headline lines (added by jjlaw-polish.js for the length of the entrance): each line rises out of
   its own clip on the headline's timeline. The block entrance stands down while they run and after. */
.jj-lines,
.jj-lines-done {
  animation: none !important;
}
.jj-line {
  display: block;
  clip-path: inset(-0.5em -50vw 0 -50vw);
}
.jj-line > span {
  display: block;
  animation: jj-hero-line var(--jj-entrance-long) var(--jj-ease) var(--jj-line-delay, 120ms) both;
}

/* Entrance on scroll: jjlaw-polish.js marks content blocks that start below the fold with
   .jj-reveal and adds .jj-revealed as each passes the bottom 6 % of the window, once. A block fades
   in and glides up over 1400 ms; blocks enter in reading order 180 ms apart. Headings, text and
   buttons travel 30 px, list rows and the fourth and later blocks of a group 20 px, cards 26 px;
   photos travel 24 px while their frame opens from a 14 % bottom clip and the photo settles inside
   it from 104 %. A photo block keeps its own width as it moves: many are full width, and a larger
   block would widen the page for the length of its entrance.
   Decorative divider rules only draw, from their start edge, 180 ms after their turn. A block with a
   transform of its own, or inside a rotated frame such as the vertical name labels, only fades, and
   a block that takes keyboard focus shows at once. */
@keyframes jj-rise {
  from {
    transform: translate3d(0, var(--jj-rise, 30px), 0);
  }
  to {
    transform: none;
  }
}
@keyframes jj-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes jj-media {
  from {
    clip-path: inset(0 0 14% 0);
    transform: translate3d(0, var(--jj-reveal-rise-media), 0);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}
@keyframes jj-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: none;
  }
}
.jj-reveal {
  --jj-rise: var(--jj-reveal-rise);
  opacity: 0;
}
.jj-reveal--subtle,
.jj-reveal--row {
  --jj-rise: var(--jj-reveal-rise-row);
}
.jj-reveal--card {
  --jj-rise: var(--jj-reveal-rise-card);
}
.jj-reveal.jj-revealed {
  animation:
    jj-fade var(--jj-reveal-fade) var(--jj-ease) var(--jj-delay, 0ms) both,
    jj-rise var(--jj-reveal-move) var(--jj-ease) var(--jj-delay, 0ms) both;
}
.jj-reveal.jj-revealed.jj-reveal--media {
  animation:
    jj-fade var(--jj-reveal-fade) var(--jj-ease) var(--jj-delay, 0ms) both,
    jj-media var(--jj-reveal-move) var(--jj-ease) var(--jj-delay, 0ms) both;
}
.jj-reveal.jj-revealed.jj-reveal--fade {
  animation: jj-fade var(--jj-reveal-fade) var(--jj-ease) var(--jj-delay, 0ms) both;
}
.jj-reveal:focus-within {
  opacity: 1;
  animation: none;
}
/* A divider rule does not travel or fade: only its line draws, as the reference section rules do. */
.jj-reveal.jj-reveal--rule,
.jj-reveal.jj-revealed.jj-reveal--rule {
  opacity: 1;
  animation: none;
}
.jj-reveal--rule .elementor-divider-separator {
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.jj-reveal--rule.jj-revealed .elementor-divider-separator {
  animation: jj-draw var(--jj-reveal-move) var(--jj-ease) calc(var(--jj-delay, 0ms) + var(--jj-step)) both;
}

/* Photos settle: a photo fades in and settles from 104 % to its size inside its own frame as its
   block enters, or as soon as it has loaded if that is later. A lazily loaded image outside an
   entering block fades in when it arrives. A failed image is shown as it is. */
@keyframes jj-develop {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.jj-img-frame {
  overflow: hidden;
}
.jj-img-wait {
  opacity: 0;
}
.jj-img-develop {
  animation: jj-develop var(--jj-image-settle) var(--jj-ease) both;
}
.jj-img-pending {
  opacity: 0;
}
.jj-img-pending.jj-img-arrived {
  opacity: 1;
  transition: opacity var(--jj-image-arrive) var(--jj-ease-fade);
}

/* Depth: jjlaw-polish.js moves full-width photo bands a few pixels inside their frame with the
   scroll and a fine pointer. The photo is drawn 3 % larger than its frame, and the script keeps
   each drift inside that margin, so the photo's edges never show. */
.jj-depth {
  overflow: hidden;
}
.jj-depth img {
  scale: 1.03;
}

/* Sheets: the header dropdown opens from its top edge as it settles 8 px, over 300 ms, like the
   reference menu sheet. The FAQ answers that jjlaw-polish.js restores open and close with an
   interruptible measured-height and opacity animation. */
/* The clip leaves room above the panel for the hover bridge and 8 px at the sides and bottom for
   the focus ring, and it ends with the animation, so the open panel is never clipped. */
@keyframes jj-sheet {
  from {
    clip-path: inset(calc(-1 * var(--jj-sub-gap, 0px)) -8px 100% -8px);
    transform: translate3d(0, -8px, 0);
  }
  to {
    clip-path: inset(calc(-1 * var(--jj-sub-gap, 0px)) -8px -8px -8px);
    transform: none;
  }
}
@keyframes jj-sheet-settle {
  from {
    transform: translate3d(0, -8px, 0);
  }
  to {
    transform: none;
  }
}
.jj-nav-fallback .menu-item-has-children.jj-sub-open > .sub-menu {
  animation: jj-sheet 300ms var(--jj-ease) backwards;
}
.jj-accordion .elementor-tab-title {
  cursor: pointer;
}

/* Hover: the arrow of a text link or a button steps 4 px toward its destination on the glide curve,
   as the reference arrows do. */
.lawservices .elementor-cta__button::after,
.employmentlegalities .elementor-cta__button::after,
.elementor-button .elementor-button-icon {
  transition: transform 400ms var(--jj-ease-glide);
}
@media (hover: hover) {
  .lawservices .elementor-cta__button:hover::after,
  .employmentlegalities .elementor-cta__button:hover::after,
  .elementor-button:hover .elementor-button-icon {
    transform: translateX(4px);
  }
}

/* The site's own effects on Material 3 timing: the outlined hero button's line sweep (0.7 s),
   the menu icon (0.5 s) and the mobile menu panel (0.5 s; now 400 ms in, 200 ms out), and the
   photo zoom of the practice-page cards (1.5 s and 20 %; now 400 ms and 6 %). */
body .btn-bg.bg-2 .btn-2 a,
body .btn-bg.bg-2 .btn-2 a::before,
body .btn-bg.bg-2 .btn-2 a::after,
body .btn-bg.bg-2 .btn-2 a:hover::before,
body .btn-bg.bg-2 .btn-2 a:hover::after {
  transition-duration: var(--jj-medium);
  transition-timing-function: var(--jj-ease);
}
#nav-icon4,
#nav-icon4 span {
  transition-duration: var(--jj-medium);
  transition-timing-function: var(--jj-ease);
}
body .sidenav {
  transition-duration: 200ms !important;
  transition-timing-function: var(--jj-ease-accel) !important;
}
body .sidenav.sidenavactive {
  transition-duration: 300ms !important;
  transition-timing-function: var(--jj-ease) !important;
}
/* The mobile menu opens from its top edge as a sheet; its contents settle 8 px as it opens. */
body .sidenav.sidenavactive > * {
  animation: jj-sheet-settle 300ms var(--jj-ease) both;
}
.elementor-cta .elementor-cta__bg,
.elementor-cta .elementor-cta__bg-overlay {
  transition-duration: var(--jj-long) !important;
  transition-timing-function: var(--jj-ease) !important;
}
.elementor-bg-transform-zoom-in:hover .elementor-bg {
  transform: scale(1.06);
}

@media print {
  .jj-reveal,
  .jj-img-wait,
  .jj-img-develop,
  .jj-img-pending {
    opacity: 1 !important;
    animation: none !important;
  }
  .jj-reveal--rule .elementor-divider-separator,
  .jj-depth img {
    transform: none !important;
    translate: none !important;
    scale: none !important;
  }
}

/* Header dropdown (restored by jjlaw-polish.js when Elementor's nav-menu bundle is absent).
   The script marks the menu .jj-nav-fallback and opens a submenu with .jj-sub-open on hover or
   keyboard focus. The panel fits its longest item, as SmartMenus sizes it. */
.jj-nav-fallback .menu-item-has-children.jj-sub-open > .sub-menu {
  display: block;
  width: auto;
  min-width: 12em;
  max-width: 1000px;
}
/* An invisible bridge over the gap between the menu item and its panel keeps the panel open
   while the pointer moves down to it. */
.jj-nav-fallback .menu-item-has-children > .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--jj-sub-gap, 0px);
}

/* Testimonial carousel (started by jjlaw-polish.js): 8 px dots inside 24 px pagination targets. */
.elementor-element.elementor-widget-testimonial-carousel {
  --swiper-pagination-bullet-horizontal-gap: 0px;
}
.elementor-widget-testimonial-carousel .swiper-pagination-bullet {
  box-sizing: content-box;
  border: 8px solid transparent;
  background-clip: content-box;
}

/* Reduced motion: no entrance animations, scroll effects, smooth scrolling, carousel motion or
   hover movement. Content is simply there, and state changes stay as color and underline. */
@media (prefers-reduced-motion: reduce) {
  .jj-reveal,
  .jj-img-wait,
  .jj-img-develop,
  .jj-img-pending,
  .jj-nav-fallback .menu-item-has-children.jj-sub-open > .sub-menu {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  .jj-reveal--rule .elementor-divider-separator,
  .jj-depth img {
    animation: none !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
  }
  .elementor-button.elementor-size-sm:hover {
    transform: none !important;
  }
  .elementor-button:hover .elementor-button-icon,
  .lawservices .elementor-cta__button:hover::after,
  .employmentlegalities .elementor-cta__button:hover::after,
  .elementor-bg-transform .elementor-bg,
  .elementor-bg-transform:hover .elementor-bg {
    transform: none !important;
  }
  body .sidenav,
  body .sidenav.sidenavactive,
  .elementor-cta .elementor-cta__bg,
  .elementor-cta .elementor-cta__bg-overlay {
    transition: none !important;
  }
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .elementor-invisible {
    visibility: visible !important;
  }
  .animated {
    animation: none !important;
  }
  .elementor-motion-effects-element,
  .elementor-motion-effects-layer {
    transform: none !important;
  }
  .sidenav {
    transition: none !important;
  }
}