@charset "utf-8";
/* ==========================================================================
   Knoebel & Vice, PLLC - kvlawf.com
   Written for the flat rebuild.  Replaces publicstyle.css (which existed only
   to point body/td/div/p at an 842 KB TTF of Segoe UI), mbcsmbmcp.css,
   side_menu/styles.css, layerslider.css, instalink, flatWeatherPlugin,
   feature.presenter, Window.Metro.css and the FWDRL lightbox skin.

   Colours are the CMS's own, sampled out of its markup and artwork:
     #124489  nav bar          #2c2c2c  dark bands
     #003399  link             #000066  page headings
     #99b8e3  contact panel    #f6f6f6  page ground
     #3472c8 / #2f66b4         the sidebar menu's gradient
   Two had to move.  The CMS put #003399 links and #2c2c2c-on-#124489 nav
   labels at 3.1:1 and 1.6:1; --link-lite and --nav-ink are the same hues
   pushed over 4.5:1.  Every pair in this file is checked by fp_contrast.py.
   ========================================================================== */

:root {
  --navy:       #124489;   /* nav bar, primary brand */
  --navy-deep:  #0d3269;
  --navy-ink:   #000066;   /* the CMS's h1 colour */
  --link:       #00327e;   /* #003399 darkened to clear AA on #f6f6f6 */
  --link-hover: #0a56c2;
  --link-lite:  #9dc0f5;   /* links on a navy/dark ground */
  --dark:       #2c2c2c;   /* the CMS's dark bands */
  --dark-soft:  #454545;
  --sky:        #99b8e3;   /* the contact panel */
  --sky-deep:   #6f9cd6;
  --ground:     #f6f6f6;
  --card:       #ffffff;
  --rule:       #d9dee6;
  --ink:        #1c1c1c;
  --ink-soft:   #4a4a4a;   /* 8.6:1 on #f6f6f6 */

  --wrap:   1200px;
  --narrow: 1024px;        /* the CMS's own content width */
  --gap:    clamp(1rem, 3vw, 2rem);
  --radius: 6px;
  --shadow: 0 2px 10px rgba(16, 33, 63, .10);
  --shadow-lg: 0 12px 32px rgba(16, 33, 63, .18);

  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, sans-serif;

  --head-h: 84px;          /* masthead height, used by the sticky offsets */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font: 400 clamp(1rem, .97rem + .16vw, 1.0625rem)/1.7 var(--sans);
  color: var(--ink);
  background: var(--ground);
  overflow-wrap: break-word;
}

img, picture, svg, iframe { max-width: 100%; }
img { height: auto; border: 0; }

a { color: var(--link); }
a:hover, a:focus-visible { color: var(--link-hover); }

:focus-visible { outline: 3px solid #1e6ee0; outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.22; color: var(--navy-ink); }
h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); margin: 2rem 0 .6rem; }
h3 { font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); margin: 1.6rem 0 .5rem; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 1.75rem 0; }

.kvVh {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.kvSkip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 2000; background: var(--navy); color: #fff; font-weight: 700;
  padding: .7rem 1.25rem; border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none; transition: transform .15s ease;
}
.kvSkip:focus { transform: translate(-50%, 0); color: #fff; }

.kvWrap {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.kvWrap--narrow { max-width: var(--narrow); }

/* ============================================================== masthead == */

.kvHeader {
  position: sticky; top: 0; z-index: 1200;
  background: #fff; border-bottom: 1px solid var(--rule);
}
.kvHeadIn {
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem);
  min-height: var(--head-h); padding-block: .6rem;
}
.kvLogo { flex: 0 0 auto; line-height: 0; }
.kvLogo img { width: 390px; max-width: min(390px, 46vw); height: auto; }

.kvPhones {
  margin-left: auto; display: flex; gap: clamp(.6rem, 2vw, 1.75rem);
  align-items: center;
}
.kvPhone {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; color: var(--ink);
  padding: .35rem .5rem; border-radius: var(--radius);
}
.kvPhone:hover, .kvPhone:focus-visible { background: #eef3fb; color: var(--ink); }
.kvPhone svg { flex: 0 0 auto; width: 22px; height: 22px; fill: var(--navy); }
.kvPhone b { display: block; font-size: .78rem; letter-spacing: .06em;
             text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.kvPhone span { display: block; font-weight: 700; font-size: 1.0625rem;
                color: var(--navy); font-variant-numeric: tabular-nums; }

/* The burger.  FlexSite's "Easy Button & Menu Maker" ships
   HamburgerEnabled:false, so the old site had NO mobile menu at all - below
   ~1024px the eight image labels simply ran off the side of the page. */
.kvBurger {
  display: none; flex: 0 0 auto;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: #fff; color: var(--navy); cursor: pointer;
}
.kvBurger:hover { background: #eef3fb; }
.kvBurger span, .kvBurger span::before, .kvBurger span::after {
  display: block; width: 22px; height: 2px; background: currentColor;
  border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.kvBurger span { margin: 0 auto; position: relative; }
.kvBurger span::before, .kvBurger span::after { content: ""; position: absolute; }
.kvBurger span::before { top: -7px; }
.kvBurger span::after  { top:  7px; }
[aria-expanded="true"].kvBurger span { background: transparent; }
[aria-expanded="true"].kvBurger span::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"].kvBurger span::after  { transform: translateY(-7px) rotate(-45deg); }

/* =================================================================== nav == */

.kvNav { background: var(--navy); }
.kvNav > ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  margin: 0; padding: 0; list-style: none;
}
.kvNav li { position: relative; }
.kvNav a, .kvNav .kvSubBtn {
  display: flex; align-items: center; gap: .35rem;
  padding: 1.05rem .85rem; font: 700 .9375rem/1.15 var(--serif);
  color: #dbe6f7;                       /* 8.0:1 on --navy */
  text-decoration: none; background: none; border: 0; cursor: pointer;
  white-space: nowrap;
}
.kvNav a:hover, .kvNav a:focus-visible,
.kvNav .kvSubBtn:hover, .kvNav .kvSubBtn:focus-visible,
.kvNav [aria-current="page"] { background: var(--dark); color: #fff; }
.kvNav [aria-current="page"] { box-shadow: inset 0 -3px 0 var(--sky); }
.kvNav .kvCaret { width: 9px; height: 9px; fill: none; stroke: currentColor;
                  stroke-width: 2.2; transition: transform .15s ease; }

.kvSub {
  position: absolute; left: 0; top: 100%; z-index: 30;
  min-width: 15rem; margin: 0; padding: .35rem 0; list-style: none;
  background: var(--dark-soft); box-shadow: var(--shadow-lg);
  border-radius: 0 0 var(--radius) var(--radius);
  display: none;
}
/* :focus-within next to :hover gives the dropdown a complete keyboard path
   with no script at all: the toggle <button> is focusable while the panel is
   display:none, focusing it opens the panel, and its links then hold it open. */
.kvHasSub:hover > .kvSub,
.kvHasSub:focus-within > .kvSub,
.kvHasSub > .kvSubBtn[aria-expanded="true"] + .kvSub { display: block; }
.kvHasSub:hover > .kvSubBtn .kvCaret,
.kvHasSub:focus-within > .kvSubBtn .kvCaret { transform: rotate(180deg); }

.kvSub a {
  display: block; padding: .6rem 1.1rem; font-weight: 600;
  font-size: .9375rem; color: #f0f0f0; white-space: normal;
}
.kvSub a:hover, .kvSub a:focus-visible { background: var(--navy-deep); color: #fff; }

/* -------------------------------------------------- the off-canvas drawer -- */

@media (max-width: 1023px) {
  .kvBurger { display: grid; place-items: center; }

  /* The drawer starts BELOW the masthead.  With inset:0 it starts at the top
     of the viewport instead, and since the header has to sit above the
     backdrop (see below) the first two or three menu items end up painted
     over by it - they look present but every tap lands on the header.  A
     document.elementFromPoint() over a menu item is what catches this;
     element.click() from the console bypasses hit-testing and passes happily.
     --head-real is set by kv.js because the masthead wraps to two rows below
     1024px and its height is not a constant; the fallback covers the
     wrapped-row case if the script has not run yet. */
  .kvNav {
    position: fixed; z-index: 1250;
    top: var(--head-real, 8.5rem); bottom: 0; left: 0;
    width: min(20rem, 86vw); padding: 1rem 0 3rem;
    background: var(--navy); overflow-y: auto;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  html.kvNavOpen .kvNav { transform: translateX(0); }
  /* The masthead is position:sticky with a z-index, which opens a stacking
     context - so the drawer's z-index would otherwise resolve INSIDE it and
     the backdrop would paint over the whole menu.  Lift the header only while
     the drawer is open. */
  html.kvNavOpen .kvHeader { z-index: 1300; }

  .kvNav > ul { display: block; }
  .kvNav a, .kvNav .kvSubBtn {
    width: 100%; padding: .95rem 1.25rem; font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
  }
  .kvNav .kvSubBtn { justify-content: space-between; }
  .kvSub {
    position: static; display: none; min-width: 0; box-shadow: none;
    border-radius: 0; background: var(--navy-deep); padding: 0;
  }
  /* On a phone the panel is opened by tapping, never by hover, and
     :focus-within would trap it open while a link inside has focus. */
  .kvHasSub:hover > .kvSub, .kvHasSub:focus-within > .kvSub { display: none; }
  .kvHasSub > .kvSubBtn[aria-expanded="true"] + .kvSub { display: block; }
  .kvSub a { padding-left: 2.25rem; color: #e4ecfa; }

  .kvBackdrop {
    position: fixed; inset: 0; z-index: 1240;
    background: rgba(10, 22, 44, .55); opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  html.kvNavOpen .kvBackdrop { opacity: 1; pointer-events: auto; }
  html.kvNavOpen { overflow: hidden; }
}

/* The header must not eat the calls to action.  A 390px logo, two labelled
   phone blocks and a burger need ~830px; below that the row overflows, and
   hiding the numbers on the device most likely to act on them is the worst
   thing a naive responsive layer can do.  So the header WRAPS: logo and
   burger on the first line, the two numbers as full-width call buttons on the
   second, where they are bigger and more legible than they were on desktop. */
@media (max-width: 1023px) {
  .kvHeadIn { flex-wrap: wrap; row-gap: .6rem; padding-bottom: .75rem; }
  .kvLogo { flex: 1 1 auto; min-width: 0; }
  .kvLogo img { max-width: min(390px, calc(100vw - 8rem)); }
  .kvBurger { order: 2; margin-left: auto; }
  .kvPhones {
    order: 3; flex: 1 0 100%; margin-left: 0; gap: .5rem;
    border-top: 1px solid var(--rule); padding-top: .6rem;
  }
  .kvPhone { flex: 1 1 0; min-width: 0; justify-content: center;
             background: #eef3fb; }
  .kvPhone:hover, .kvPhone:focus-visible { background: #dde8f8; }
}
@media (max-width: 400px) {
  .kvPhone { gap: .4rem; padding: .5rem .35rem; }
  .kvPhone b { font-size: .7rem; }
  .kvPhone span { font-size: .95rem; }
}
/* Two side-by-side call buttons need ~294px of content box; a 320px viewport
   leaves 288 after the gutter, so at that size they stack instead of
   overflowing.  The threshold is 344 and not 380 on purpose: 375 is the
   commonest phone width and it has room for both, and stacking there would
   add 42px of masthead on every page for nothing.
   min-width:0 alone does not help - it lets the flex ITEM shrink, and the
   number then overflows the item. */
@media (max-width: 344px) {
  .kvPhones { flex-wrap: wrap; }
  .kvPhone { flex: 1 1 100%; }
}

/* The numbers are in the header at every width, so the drawer does not repeat
   them; kept for the case where the header ever loses them again. */
.kvNavTel { display: none; }
.kvNavTel a {
  display: block; padding: .55rem 0; border: 0; color: #fff;
  font: 700 1rem/1.3 var(--sans);
}
.kvNavTel a small { display: block; font-weight: 600; font-size: .8rem;
                    color: var(--link-lite); letter-spacing: .05em;
                    text-transform: uppercase; }

/* ================================================================== hero == */

.kvHero { position: relative; background: #2a1b18; color: #fff; }
.kvHero picture, .kvHero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 50%;
}
.kvHero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(24, 12, 10, .92) 0%,
              rgba(24, 12, 10, .78) 38%, rgba(24, 12, 10, .25) 68%,
              rgba(24, 12, 10, .1) 100%);
}
.kvHeroIn {
  position: relative; z-index: 1;
  min-height: clamp(19rem, 30vw, 26rem);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  max-width: 46rem;
}
/* The CMS drew these three lines as PNGs inside a LayerSlider running one
   static slide at responsive:false - a fixed pixel size for ever, and three
   pieces of copy invisible to search and to a screen reader. */
.kvHero h1 {
  margin: 0; color: #fff; font-family: var(--serif);
  font-size: clamp(2rem, 1.1rem + 4vw, 3.75rem); line-height: 1.05;
  letter-spacing: .01em; text-wrap: balance;
}
.kvHero h1 span { display: block; color: #8ab4f5; }   /* 7.0:1 on the scrim */
.kvHeroSub {
  margin: 1rem 0 0; font-size: clamp(1rem, .93rem + .4vw, 1.25rem);
  color: #ecf1f8; max-width: 34rem;
}
.kvHeroCta { margin-top: clamp(1.25rem, 3vw, 2rem); }

/* =============================================================== buttons == */

.kvBtn {
  display: inline-block; padding: .85rem 1.6rem;
  font: 700 .9375rem/1.2 var(--sans); letter-spacing: .09em;
  text-transform: uppercase; text-decoration: none; text-align: center;
  border: 2px solid transparent; border-radius: var(--radius); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.kvBtn--primary { background: var(--navy); color: #fff; }
.kvBtn--primary:hover, .kvBtn--primary:focus-visible {
  background: var(--navy-deep); color: #fff;
}
.kvBtn--ghost { background: transparent; color: #fff; border-color: #fff; }
.kvBtn--ghost:hover, .kvBtn--ghost:focus-visible { background: #fff; color: var(--navy); }

/* ========================================================= welcome band === */

.kvBand { background: var(--dark); color: #fff; text-align: center;
          padding-block: clamp(2.5rem, 6vw, 3.5rem); position: relative; }
.kvBand h2 {
  color: #fff; margin: 0 0 1rem;
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.25rem); letter-spacing: .02em;
}
.kvBand p { margin: 0 auto; max-width: 62ch; color: #ececec; }
/* The CMS's blue rule under the heading was an 83x1 PNG; and the notch below
   the band was a 97x31 triangle shipped as a 477 KB PNG. */
.kvBand h2::after {
  content: ""; display: block; width: 83px; height: 3px;
  background: var(--sky); margin: 1rem auto 0;
}
.kvNotch {
  height: 31px; background: var(--ground); position: relative;
}
.kvNotch::before {
  content: ""; position: absolute; left: 50%; top: 0;
  width: 97px; height: 31px; transform: translateX(-50%);
  background: var(--dark); clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ================================================================= cards == */

.kvCards {
  display: grid; gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  padding-block: clamp(2.5rem, 6vw, 3.75rem);
}
/* Each of these was ONE 309x341 PNG with the icon, the heading, the copy and
   the button baked into the artwork. */
.kvCard {
  display: flex; flex-direction: column; text-align: center;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden; min-width: 0;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kvCard:hover, .kvCard:focus-within {
  border-color: var(--navy); box-shadow: var(--shadow-lg); color: inherit;
}
.kvCardTop { padding: 1.75rem 1.5rem 1.5rem; flex: 1 1 auto; }
.kvCardIcon {
  width: 92px; height: 92px; margin: 0 auto 1.25rem; border-radius: 50%;
  background: var(--sky); display: grid; place-items: center;
}
.kvCardIcon svg { width: 44px; height: 44px; fill: #fff; }
.kvCard h3 {
  margin: 0 0 .6rem; font-size: 1.0625rem; letter-spacing: .045em;
  text-transform: uppercase; color: var(--ink);
}
.kvCard p { margin: 0; font-size: .9375rem; color: var(--ink-soft); }
.kvCardCta {
  display: block; background: var(--sky-deep); color: #10233f;
  font: 700 .8125rem/1.3 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; padding: .9rem 1rem;
}
.kvCard:hover .kvCardCta, .kvCard:focus-within .kvCardCta {
  background: var(--navy); color: #fff;
}

/* =========================================================== home split === */

.kvSplit { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .kvSplit { grid-template-columns: 1fr; } }
.kvSplit > * { padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem); }
.kvSplitForm { background: var(--sky); }
.kvSplitMap  { background: var(--dark-soft); }
.kvSplit h2 { margin-top: 0; letter-spacing: .04em; }
.kvSplitForm h2 { color: #10233f; }
.kvSplitMap h2  { color: #fff; }
.kvSplitIn { max-width: 34rem; }
.kvSplitForm .kvSplitIn { margin-left: auto; margin-right: 0; }
.kvSplitMap .kvSplitIn { max-width: 38rem; }
@media (max-width: 900px) {
  .kvSplitForm .kvSplitIn, .kvSplitMap .kvSplitIn { margin-inline: auto; }
}
/* The CMS drew ONE map here with a pin on each office. A keyless embed can
   only centre on one place, so the panel carries both - side by side, or the
   column runs to 1,226px against a 400px form and the band is mostly empty
   blue. */
.kvOffices { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 640px) { .kvOffices { grid-template-columns: 1fr 1fr; } }
.kvOfficeBlock { min-width: 0; }
.kvOfficeBlock .kvMap { margin-bottom: .85rem; }
.kvSplitMap .kvAddress { font-size: 1rem; line-height: 1.6; }

/* ================================================================== main == */

.kvMain { padding-block: clamp(2rem, 5vw, 3rem); }
.kvLayout {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr) 15rem;
  align-items: start;
}
@media (max-width: 900px) { .kvLayout { grid-template-columns: minmax(0, 1fr); } }

.kvArticle { min-width: 0; }
.kvArticle > :first-child { margin-top: 0; }
.kvArticle p { margin: 0 0 1.1rem; }
.kvArticle ul, .kvArticle ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.kvArticle li { margin-bottom: .4rem; }
.kvArticle h2 {
  padding-bottom: .35rem; border-bottom: 2px solid var(--sky);
}
.kvArticle img { border-radius: var(--radius); }

.kvBreadcrumb { margin: 0 0 .75rem; font-size: .875rem; color: var(--ink-soft); }
.kvBreadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex;
                   flex-wrap: wrap; gap: .4rem; }
.kvBreadcrumb li + li::before { content: "›"; margin-right: .4rem; color: var(--rule); }

/* ================================================================ aside === */

.kvAside { min-width: 0; }
@media (min-width: 901px) { .kvAside { position: sticky; top: calc(var(--head-h) + 1rem); } }

.kvSideNav { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.kvSideNav h2 {
  margin: 0; padding: .85rem 1.1rem; background: var(--navy); color: #fff;
  font-size: .9375rem; letter-spacing: .07em; text-transform: uppercase;
}
.kvSideNav ul { list-style: none; margin: 0; padding: 0; }
.kvSideNav a {
  display: block; padding: .7rem 1.1rem; background: #3472c8; color: #fff;
  font: 700 .875rem/1.35 var(--sans); text-decoration: none;
  border-bottom: 1px solid #244f8b;
}
.kvSideNav a:hover, .kvSideNav a:focus-visible { background: #29538f; color: #fff; }
.kvSideNav [aria-current="page"] { background: var(--navy-deep); }
.kvSideNav ul ul a {
  background: #49505a; padding-left: 2rem; font-weight: 600; font-size: .8125rem;
  border-bottom-color: #32373e;
}
.kvSideNav ul ul a:hover, .kvSideNav ul ul a:focus-visible { background: #343941; }

.kvBadge { margin: 1.5rem 0 0; text-align: center; }
.kvBadge img { width: 220px; max-width: 100%; height: auto; }

/* ================================================================= forms == */

.kvForm { display: grid; gap: 1rem; }
.kvField { display: grid; gap: .35rem; }
.kvField label { font-weight: 700; font-size: .875rem; }
.kvField .kvReq { color: #b3261e; }
.kvSplitForm .kvField .kvReq { color: #7d1810; }
.kvForm input[type="text"], .kvForm input[type="email"],
.kvForm input[type="tel"], .kvForm textarea {
  width: 100%; padding: .7rem .85rem; font: inherit; font-size: 1rem;
  color: var(--ink); background: #fff;
  border: 1px solid #8a95a5; border-radius: var(--radius);
}
.kvForm textarea { min-height: 8rem; resize: vertical; }
.kvForm input:focus-visible, .kvForm textarea:focus-visible {
  border-color: var(--navy); outline: 3px solid #1e6ee0; outline-offset: 1px;
}
.kvForm [aria-invalid="true"] { border-color: #b3261e; border-width: 2px; }
.kvFieldErr { font-size: .8125rem; font-weight: 700; color: #8c1d18; }
.kvSplitForm .kvFieldErr { color: #6b1611; }
/* honeypot: off-screen, never display:none - some bots skip hidden fields */
.kvHp { position: absolute !important; left: -9999px; width: 1px; height: 1px;
        overflow: hidden; }
.kvNote { font-size: .875rem; color: var(--ink-soft); margin: 0; }
.kvSplitForm .kvNote { color: #24405f; }
.kvMsg { padding: .9rem 1.1rem; border-radius: var(--radius); margin: 0 0 1rem;
         border-left: 4px solid; font-weight: 600; }
.kvMsg--ok  { background: #e7f4ea; border-color: #1e7a37; color: #10441f; }
.kvMsg--err { background: #fdecea; border-color: #b3261e; color: #7d1810; }

.kvDisclaimer {
  margin-top: 2rem; padding: 1.25rem 1.4rem; background: #eef2f8;
  border-left: 4px solid var(--navy); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .9375rem;
}
.kvDisclaimer p:last-child { margin-bottom: 0; }

/* =============================================================== offices == */

.kvOffice { display: grid; gap: clamp(1.25rem, 3vw, 2rem);
            grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 760px) { .kvOffice { grid-template-columns: minmax(0, 1fr); } }

.kvMap {
  position: relative; border: 3px solid var(--navy); border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 4 / 3; background: #dfe4ea;
}
.kvMap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kvSplitMap .kvMap { border-color: #7d8794; }

.kvAddress { font-style: normal; font-size: 1.0625rem; line-height: 1.75; }
.kvAddress strong { display: block; font-family: var(--serif); font-size: 1.15rem;
                    color: var(--navy-ink); margin-bottom: .35rem; }
.kvSplitMap .kvAddress, .kvSplitMap .kvAddress a { color: #f2f2f2; }
.kvSplitMap .kvAddress strong { color: #fff; }
.kvSplitMap .kvAddress a { color: var(--link-lite); }

.kvGallery {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.kvGallery a { display: block; border-radius: var(--radius); overflow: hidden;
               border: 1px solid var(--rule); background: #fff; }
.kvGallery img { display: block; width: 100%; aspect-ratio: 4 / 3;
                 object-fit: cover; border-radius: 0; }
.kvGallery a:hover img, .kvGallery a:focus-visible img { opacity: .88; }

/* The lightbox kv.js builds, in place of FWDRL.js + its 35-PNG skin folder. */
/* [open] matters: `dialog:not([open]) { display: none }` comes from the UA
   stylesheet, so a bare `.kvLightbox { display: grid }` in author CSS wins and
   lays the closed dialog out on the page. */
.kvLightbox {
  border: 0; padding: 0; background: transparent;
  max-width: min(96vw, 1100px); max-height: 92vh;
}
.kvLightbox[open] {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .5rem;
}
.kvLightbox::backdrop { background: rgba(8, 14, 26, .9); }
.kvLightbox img { grid-column: 2; max-height: 88vh; width: auto;
                  border-radius: var(--radius); }
/* A solid ground, not rgba over the backdrop: white on a 14%-white wash reads
   as 1:1 to anything sampling computed colours, and is genuinely thin over a
   pale photograph. */
.kvLightbox button {
  background: #1d2a40; color: #fff; border: 1px solid rgba(255, 255, 255, .35);
  width: 48px; height: 48px; border-radius: 50%; font-size: 1.75rem;
  line-height: 1; cursor: pointer;
}
.kvLightbox button:hover { background: #33455f; }
.kvLbClose { position: fixed; top: 1rem; right: 1rem; }

/* ================================================================== blog == */

.kvPosts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.kvPost {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.75rem);
}
.kvPost h2 { margin: 0 0 .35rem; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); }
.kvPost h2 a { text-decoration: none; color: var(--navy-ink); }
.kvPost h2 a:hover, .kvPost h2 a:focus-visible { text-decoration: underline; color: var(--link-hover); }
.kvPostMeta { margin: 0 0 .75rem; font-size: .875rem; font-style: italic;
              color: var(--ink-soft); }
/* The CMS put "KNOEBEL & VICE, PLLC BLOG" in the <h1> of every post and the
   post's own title in a <span> underneath, so twelve posts shared one heading.
   The title is the h1 now and the blog name is an eyebrow above it. */
.kvEyebrow { margin: 0 0 .4rem; font: 700 .8125rem/1.3 var(--sans);
             letter-spacing: .1em; text-transform: uppercase; }
.kvEyebrow a { text-decoration: none; }
.kvEyebrow a:hover, .kvEyebrow a:focus-visible { text-decoration: underline; }
.kvPost p:last-of-type { margin-bottom: 0; }
.kvMore { display: inline-block; margin-top: .75rem; font-weight: 700;
          text-decoration: none; }
.kvMore:hover, .kvMore:focus-visible { text-decoration: underline; }
.kvMore::after { content: " →"; }

.kvPostNav {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
}
.kvPostNav a { font-weight: 700; text-decoration: none; max-width: 22rem; }
.kvPostNav a:hover, .kvPostNav a:focus-visible { text-decoration: underline; }
.kvPostNav small { display: block; font-weight: 600; font-size: .78rem;
                   letter-spacing: .07em; text-transform: uppercase;
                   color: var(--ink-soft); }

.kvSearch { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.kvSearch input {
  flex: 1 1 auto; min-width: 0; padding: .6rem .75rem; font: inherit;
  border: 1px solid #8a95a5; border-radius: var(--radius);
}
.kvSearch button {
  flex: 0 0 auto; padding: .6rem 1rem; font: 700 .875rem var(--sans);
  background: var(--navy); color: #fff; border: 0; border-radius: var(--radius);
  cursor: pointer;
}
.kvSearch button:hover { background: var(--navy-deep); }
.kvArchive { list-style: none; margin: 0; padding: 0; }
.kvArchive li { border-bottom: 1px solid var(--rule); }
.kvArchive a { display: block; padding: .6rem 0; font-size: .875rem;
               text-decoration: none; line-height: 1.4; }
.kvArchive a:hover, .kvArchive a:focus-visible { text-decoration: underline; }
.kvArchive time { display: block; font-size: .78rem; color: var(--ink-soft);
                  font-variant-numeric: tabular-nums; }
.kvNoHits { margin: 1rem 0; font-weight: 600; }

/* ================================================================ footer == */

.kvFootTop { background: #fff; padding-block: clamp(2.25rem, 5vw, 3.25rem);
             border-top: 1px solid var(--rule); }
.kvFootCols {
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.kvFootCols h2 {
  margin: 0 0 .9rem; font-size: 1.15rem; letter-spacing: .04em;
  color: #2b2f8a;                        /* #333399 darkened to 8.5:1 on #fff */
}
.kvFootCols ul { list-style: none; margin: 0; padding: 0; }
.kvFootCols li { margin-bottom: .3rem; }
.kvFootCols a { text-decoration: none; }
.kvFootCols a:hover, .kvFootCols a:focus-visible { text-decoration: underline; }
.kvFootAddr { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.kvPay { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.kvPay img { height: 34px; width: auto; }
.kvSocial { display: flex; gap: .75rem; align-items: center; }
.kvSocial img { height: 40px; width: 40px; object-fit: contain; }

.kvBadges {
  display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.25rem);
  align-items: center; justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
}
.kvBadges img { max-height: 72px; width: auto; }

.kvFootLegal {
  background: var(--dark); color: #e8e8e8; text-align: center;
  padding-block: clamp(1.5rem, 3vw, 2rem); font-size: .875rem;
}
.kvFootLegal p { margin: 0 auto; max-width: 78ch; }
.kvFootLegal p + p { margin-top: 1rem; padding-top: 1rem;
                     border-top: 1px solid rgba(255, 255, 255, .22); }
.kvFootLegal a { color: var(--link-lite); }

/* ================================================================== misc == */

.kvLead { font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); color: var(--ink-soft); }
.kv404 { text-align: center; padding-block: clamp(3rem, 8vw, 5rem); }
.kv404 ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap;
            gap: .75rem; justify-content: center; margin-top: 1.5rem; }

@media print {
  .kvHeader, .kvNav, .kvBackdrop, .kvAside, .kvSplitMap, .kvSkip { display: none; }
  body { background: #fff; }
}