/* Jehl Law Group advertisements. Loaded only while the advertisement is live.

   Rebuilt 22 Sep 2026. Cameron: "I hate these designs, what are these colors and
   font choices, they don't match anything like the rest of Nursing Homes
   Compared." He was right. The first version invented its own language: gradient
   grounds, a gold glow, a pill button with a shine sweeping over it and a pulsing
   ring, tick chips. None of that exists anywhere else on this site.

   Everything here now comes from home.css and nothing else:

     the button is .btn, 60px tall, 5px radius, weight 500, flat --accent on a
       light ground and flat --gold on a dark one, lifting 2px on hover;
     the card is the site's white card, 20px radius, a 2px border, no shadow;
     the three facts are .pill, the site's flat 6px tag;
     the type is the site's, at the sizes the site already uses;
     the motion is the site's .up reveal, a 30px rise, and nothing else.

   Which ground each unit takes was Cameron's call on 22 Sep: light where a unit
   sits in the page's own flow, colour where it is a full-width band. The two
   full-width bands are also chosen so the page never stacks two dark blocks: the
   sponsor band is the site's teal, above the near-black footer.

   The firm's seal appears only inside a unit labelled as a paid advertisement and
   beside the firm's name. Nothing here is blue and nothing borrows a government
   mark, which is the FTC impersonation rule, 16 CFR 461. */

/* ---- shared: the label, the logo, the small print ------------------------- */

.jehl-ad {
  margin: 0 0 20px;
  font-family: var(--sans);
  font-size:14px;
  font-weight: 700;
  line-height:20px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.jlg-seal, .jlg-word { display: block; flex: none; }
.jlg-word { height: auto; }

.jehl-disc {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size:14px;
  line-height:22px;
  color: var(--muted);
}
.jehl-who { margin: 0; font-family: var(--sans); font-size:14px; line-height:22px; }
.jehl-tel { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.jehl-tel:hover { color: var(--ink); }
.jehl-strip--ink .jehl-tel:hover, .jehl-band .jehl-tel:hover, .jehl-dock .jehl-tel:hover { color: #fff; }
.jehl-notice { margin-top: 2px; }
.jehl-notice > summary {
  display: inline-block;
  min-height: 24px;
  padding: 2px 0;
  list-style: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: var(--sans);
  font-size:14px;
  line-height:22px;
  color: inherit;
}
.jehl-notice > summary::-webkit-details-marker { display: none; }
.jehl-notice > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.jehl-notice p { margin: 6px 0 0; font-family: var(--sans); font-size:14px; line-height:22px; }

.jehl-lead {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size:30px;
  line-height:38px;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}
.jehl-follow { margin: 0 0 22px; font-size:18px; line-height:31px; color: var(--body); max-width: 60ch; }

/* ---- the button: the site's .btn, to the pixel ---------------------------- */

.jehl-cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 60px;
  padding: 0 26px;
  border-radius: 5px;
  white-space: nowrap;
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size:18px;
  font-weight:400;
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.jehl-cta:hover { background: var(--ink); transform: translateY(-2px); }
.jehl-ctaicon { transition: transform .2s var(--ease); }
.jehl-cta:hover .jehl-ctaicon { transform: translateX(4px); }
.jehl-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Gold on the dark and teal grounds, which is the site's second button. */
.jehl-strip--ink .jehl-cta, .jehl-band .jehl-cta {
  background: var(--gold);
  color: var(--gold-ink);
}
.jehl-strip--ink .jehl-cta:hover, .jehl-band .jehl-cta:hover { background: #FFC63F; color: var(--gold-ink); }
.jehl-strip--ink .jehl-cta:focus-visible, .jehl-band .jehl-cta:focus-visible { outline-color: var(--gold); }

/* ---- the three facts: the site's flat tag -------------------------------- */

.jehl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.jehl-chips li {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1.5px solid #C6D1CF;
  border-radius: 6px;
  background: #F1F4F3;
  font-family: var(--sans);
  font-size:14px;
  font-weight:700;
  line-height:20px;
  letter-spacing: 0;
  color: var(--muted);
}

/* ---- the card: a white card in the page's warm band ----------------------- */

.jehl-panel .sec { padding-top: 56px; padding-bottom: 56px; }

.jehl {
  display: block;
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: 20px;
  padding: 30px 34px;
}
.jehl-grid { display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: start; }
.jehl-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.jehl-brand .jlg-seal { width: 96px; height: 96px; color: var(--ink); }
.jehl-brand .jlg-word { width: 180px; color: var(--ink); }
.jehl-tag {
  margin: 0;
  font-family: var(--sans);
  font-size:14px;
  font-weight: 700;
  line-height:20px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.jehl-call { display: block; }

@media (max-width: 900px) {
  .jehl-panel .sec { padding-top: 40px; padding-bottom: 40px; }
  .jehl { padding: 24px 22px; }
  .jehl-grid { grid-template-columns: 1fr; gap: 18px; }
  .jehl-brand { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
  .jehl-brand .jlg-seal { width: 60px; height: 60px; }
  .jehl-brand .jlg-word { width: 150px; }
  .jehl-tag { flex-basis: 100%; }
  .jehl-lead { font-size:24px; line-height:30px; }
  .jehl-cta { width: 100%; justify-content: center; }
}

/* ---- the strip: a flat band under the page header ------------------------- */

.jehl-strip--gold { background: var(--gold); color: var(--gold-ink); }
.jehl-strip--ink { background: var(--panel-dark); color: #C6D8DA; }
.jehl-strip .inner { padding: 24px 36px 22px; }
.jehl-strip--gold .jehl-ad { color: var(--gold-ink); opacity: .75; }
.jehl-strip--ink .jehl-ad { color: #92ACB0; }
.jehl-striprow { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.jehl-stripbrand { display: flex; align-items: center; gap: 14px; flex: none; }
.jehl-stripbrand .jlg-seal { width: 56px; height: 56px; }
.jehl-stripbrand .jlg-word { width: 140px; }
.jehl-strip--gold .jlg-seal, .jehl-strip--gold .jlg-word { color: var(--gold-ink); }
.jehl-strip--ink .jlg-seal { color: var(--gold); }
.jehl-strip--ink .jlg-word { color: #fff; }
.jehl-stripq {
  flex: 1 1 22ch;
  margin: 0;
  font-family: var(--display);
  font-size:30px;
  line-height:39px;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.jehl-strip--gold .jehl-stripq { color: var(--gold-ink); }
.jehl-strip--ink .jehl-stripq { color: #fff; }
.jehl-strip .jehl-disc { margin-top: 20px; padding-top: 14px; }
/* #3D2B06 on #FFD470 is 9.6:1; #92ACB0 on #0C2229 is 7.4:1. */
.jehl-strip--gold .jehl-disc { color: var(--gold-ink); opacity: .78; border-top-color: rgba(61, 43, 6, .22); }
.jehl-strip--ink .jehl-disc { color: #92ACB0; border-top-color: rgba(255, 255, 255, .18); }
.jehl-strip--ink .jehl-notice > summary:focus-visible { outline-color: var(--gold); }

@media (max-width: 760px) {
  .jehl-strip .inner { padding: 20px 20px 18px; }
  .jehl-stripbrand .jlg-seal { width: 48px; height: 48px; }
  .jehl-stripbrand .jlg-word { width: 132px; }
  .jehl-stripq { flex-basis: 100%; font-size:24px; line-height:31px; }
  .jehl-strip .jehl-cta { width: 100%; justify-content: center; }
}

/* ---- the pop-up ----------------------------------------------------------- */

.jehl-pop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(11, 57, 72, .55);
}
.jehl-pop[hidden] { display: none; }
.jehl-popbox {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 20px 20px 0 0;
  background: #fff;
  border-top: 4px solid var(--gold);
}
.jehl-pophead {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 24px 28px 0;
}
.jehl-pophead .jlg-seal { width: 56px; height: 56px; color: var(--ink); }
.jehl-pophead .jlg-word { width: 150px; color: var(--ink); }
.jehl-pophead .jehl-ad { flex-basis: 100%; margin: 0; }
.jehl-popx {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size:30px;
  line-height: 1;
  cursor: pointer;
}
.jehl-popx:hover { background: #F1F4F3; color: var(--ink); }
.jehl-popx:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.jehl-popbody { padding: 20px 28px 24px; }
.jehl-pop .jehl-lead { font-size:30px; line-height:39px; }
.jehl-pop .jehl-cta { width: 100%; justify-content: center; }
.jehl-popno {
  display: block;
  min-height: 44px;
  margin: 12px auto 0;
  padding: 10px 12px;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size:16px;
  font-weight:700;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.jehl-popno:hover { color: var(--ink); }
.jehl-popno:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (max-width: 699px) {
  .jehl-pophead { padding: 20px 20px 0; }
  .jehl-popbody { padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); }
  .jehl-pop .jehl-lead { font-size:24px; line-height:31px; }
}
@media (min-width: 700px) {
  .jehl-pop { align-items: center; padding: 24px; }
  .jehl-popbox { border-radius: 20px; }
}

/* ---- the dock ------------------------------------------------------------- */

.jehl-dock {
  position: fixed;
  z-index: 55;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transform: translateY(110%);
  transition: transform .3s var(--ease), opacity .2s ease;
}
.jehl-dock[hidden] { display: none; }
.jehl-dock.is-on { opacity: 1; transform: none; }
.jehl-dockbox {
  position: relative;
  padding: 16px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 3px solid var(--gold);
  border-radius: 20px 20px 0 0;
  background: #fff;
  box-shadow: 0 -10px 30px rgba(11, 57, 72, .14);
}
.jehl-dockrow { display: flex; align-items: center; gap: 12px; padding-right: 44px; }
.jehl-dockseal { width: 44px; height: 44px; color: var(--ink); }
.jehl-dockcopy { min-width: 0; }
.jehl-dock .jehl-ad { margin: 0; font-size:14px; line-height:18px; }
.jehl-dockq {
  margin: 3px 0 0;
  font-family: var(--display);
  font-size:18px;
  line-height:24px;
  letter-spacing: -.03em;
  color: var(--ink);
}
.jehl-dock .jehl-cta { width: 100%; justify-content: center; height: 52px; margin-top: 12px; }
.jehl-dock .jehl-disc { margin-top: 12px; padding-top: 10px; font-size:14px; line-height:19px; }
.jehl-dock .jehl-who, .jehl-dock .jehl-notice > summary, .jehl-dock .jehl-notice p {
  font-size:14px;
  line-height:19px;
}
.jehl-dockx {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size:24px;
  line-height: 1;
  cursor: pointer;
}
.jehl-dockx:hover { background: #F1F4F3; color: var(--ink); }
.jehl-dockx:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (min-width: 760px) {
  .jehl-dock { left: auto; right: 24px; bottom: 24px; width: 372px; }
  .jehl-dockbox {
    padding: 20px 22px 18px;
    border: 2px solid var(--gold);
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(11, 57, 72, .18);
  }
}

/* ---- the sponsor band ----------------------------------------------------- */
/* The site's teal, the colour its hero and its place headers already use. Not
   the near-black, because this band sits directly above the near-black footer. */

.jehl-band { background: var(--panel-hero); color: #fff; }
.jehl-band .inner { padding-top: 40px; padding-bottom: 38px; }
.jehl-band .jehl-ad { color: #C6D8DA; }
.jehl-bandgrid { display: grid; grid-template-columns: 240px 1fr; gap: 36px 56px; align-items: center; }
.jehl-bandbrand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.jehl-bandbrand .jlg-seal { width: 132px; height: 132px; color: #fff; }
.jehl-bandbrand .jlg-word { width: 214px; color: #fff; }
.jehl-bandh {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size:36px;
  line-height:43px;
  letter-spacing: -.03em;
  color: #fff;
  text-wrap: balance;
}
.jehl-bandp { margin: 0 0 24px; font-size:18px; line-height:31px; color: #DCEBEC; max-width: 60ch; }
.jehl-band .jehl-chips li {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}
.jehl-band .jehl-disc { color: #DCEBEC; border-top-color: rgba(255, 255, 255, .28); }

@media (max-width: 900px) {
  .jehl-band .inner { padding-top: 28px; padding-bottom: 28px; }
  .jehl-bandgrid { grid-template-columns: 1fr; gap: 20px; }
  .jehl-bandbrand { flex-direction: row; align-items: center; gap: 14px; }
  .jehl-bandbrand .jlg-seal { width: 64px; height: 64px; }
  .jehl-bandbrand .jlg-word { width: 160px; }
  .jehl-bandh { font-size:30px; line-height:39px; }
  .jehl-band .jehl-cta { width: 100%; justify-content: center; }
}

/* ---- motion: the site's own reveal, and nothing else ---------------------- */
/* home.css moves every section with .up: 30px up, .2s, opacity in. These units
   do the same, on the class src/jehl.js adds when they reach the screen. */

@media (prefers-reduced-motion: no-preference) {
  .js .jehl-anim, .js .jehl {
    opacity: 0;
    transform: translateY(30px);
  }
  .js .jehl-anim.is-in, .js .jehl.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  /* If the script never runs, nothing stays hidden. */
  .js .jehl-anim, .js .jehl { animation: jehl-failsafe 0s linear 4s forwards; }
  @keyframes jehl-failsafe { to { opacity: 1; transform: none; } }
  .jehl-pop:not([hidden]) .jehl-popbox { animation: jehl-rise .2s ease both; }
  @keyframes jehl-rise { from { opacity: 0; transform: translateY(30px); } }
}

/* ---- the quiet line, inside the content of a page -------------------------
   Cameron, 22 Sep 2026: the firm everywhere, subtly. This is the subtle one. A
   rule, a small label, one sentence and a text link, at the site's own body
   size. No card, no button, no colour of its own. */

.jehl-quiet {
  display: block;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.jehl-ad--quiet { margin: 0 0 8px; }
.jehl-quietline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size:16px;
  line-height:26px;
  color: var(--body);
  max-width: 78ch;
}
.jehl-quietseal { width: 30px; height: 30px; margin-top: 2px; color: var(--ink); opacity: .75; }
.jehl-quietcta {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.jehl-quietcta:hover { color: var(--ink); }
.jehl-quietcta:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.jehl-quiet .jehl-disc { margin-top: 12px; padding-top: 10px; font-size:14px; line-height:21px; }

@media (max-width: 760px) {
  .jehl-quiet { padding: 18px 0; }
  .jehl-quietline { font-size:16px; line-height:26px; }
  .jehl-quietseal { width: 26px; height: 26px; }
}

/* ---- the firm in the site's footer, on every page ------------------------- */

.jehl-foot {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.jehl-footseal { width: 42px; height: 42px; flex: none; color: var(--gold); opacity: .9; }
.jehl-footcopy { min-width: 0; }
.jehl-ad--foot { margin: 0 0 6px; color: #92ACB0; }
.jehl-footline { margin: 0; font-size:16px; line-height:26px; color: #92ACB0; max-width: 78ch; }
.jehl-foot .jehl-quietcta { color: var(--gold); }
.jehl-foot .jehl-quietcta:hover { color: #fff; }
.jehl-foot .jehl-disc {
  margin-top: 10px;
  padding-top: 10px;
  font-size:14px;
  line-height:21px;
  color: #92ACB0;
  border-top-color: rgba(255, 255, 255, .18);
}
.jehl-foot .jehl-notice > summary:focus-visible { outline-color: var(--gold); }

@media (max-width: 760px) {
  .jehl-foot { gap: 12px; padding-top: 22px; }
  .jehl-footseal { width: 34px; height: 34px; }
  .jehl-footline { font-size:14px; line-height:23px; }
}


/* The advertisements join the site's phone ladder. A 30px ad headline sitting
   under a 24px section heading read as the loudest thing on the page, which is
   the opposite of what Cameron's father asked for. The pop-up keeps 24px: it
   is the only thing on the screen when it is open, so it is not competing with
   anything. See PHONE TYPE in home.css. */
@media (max-width: 760px) {
  .jehl-bandh { font-size:24px; line-height:31px; }
  .jehl-lead { font-size:20px; line-height:27px; }
  .jehl-stripq { font-size:20px; line-height:27px; }
  .jehl-follow, .jehl-bandp { font-size:16px; line-height:26px; }
}


/* ============================================================
   THE STRIP BECOMES A CARD
   BRAND.md, approved 29 September 2026. A page gets one coloured
   field, its hero. The strip was a full width band in the loudest
   colour on the site, 305px of it on a home's page, and it was the
   third and fourth background a reader passed through.

   It is now the same object .jehl already is: white, 2px gold border,
   20px radius, sitting on the page's own ground. The firm keeps its
   gold, in the border and nowhere else, which is what Cameron's father
   asked for when he said subtle. Both variants, gold and ink, render
   the same way now: there is one advertisement format, not three.
   ============================================================ */
.jehl-strip--gold, .jehl-strip--ink { background: transparent; color: var(--body); padding: 0 24px; }
.jehl-strip .inner {
  max-width: 1272px;
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: 20px;
  padding: 24px 28px 22px;
}
.jehl-strip--gold .jehl-ad, .jehl-strip--ink .jehl-ad { color: var(--muted); opacity: 1; }
.jehl-strip--gold .jehl-stripq, .jehl-strip--ink .jehl-stripq { color: var(--ink); }
.jehl-strip--gold .jlg-seal, .jehl-strip--gold .jlg-word,
.jehl-strip--ink .jlg-seal, .jehl-strip--ink .jlg-word { color: var(--ink); }
.jehl-strip--gold .jehl-disc, .jehl-strip--ink .jehl-disc {
  color: var(--muted); opacity: 1; border-top-color: var(--line);
}
.jehl-strip--gold .jehl-cta, .jehl-strip--ink .jehl-cta {
  background: var(--accent); color: #fff;
}
.jehl-strip--gold .jehl-cta:hover, .jehl-strip--ink .jehl-cta:hover { background: #00505A; }
.jehl-strip--ink .jehl-notice > summary:focus-visible { outline-color: var(--accent); }
@media (max-width: 760px) {
  .jehl-strip--gold, .jehl-strip--ink { padding: 0 20px; }
  .jehl-strip .inner { padding: 20px 20px 18px; border-radius: 16px; }
}