@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); }
/* The city and the number stack INSIDE one wrapper. As direct children of the
   flex row they are flex items themselves, laid out beside the icon, and the
   number breaks mid-digit-group when the row runs out of width. */
.kvPhoneTxt { display: block; min-width: 0; }
.kvPhoneTxt b { display: block; font-size: .78rem; letter-spacing: .06em;
                text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.kvPhoneTxt > span { display: block; font-weight: 700; font-size: 1.0625rem;
                     color: var(--navy); font-variant-numeric: tabular-nums;
                     white-space: nowrap; }

/* 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; }
}

/* Below 1024 the masthead is the logo and the burger, nothing else: a 390px
   logo, two labelled phone blocks and a burger need ~830px, and squeezing
   them in wraps the numbers mid-digit-group.  The calls to action are not
   dropped, though - that would be the worst thing a naive responsive layer
   could do on the device most likely to act on them.  They move into the
   drawer as two full-width call buttons (.kvNavTel), where they are bigger
   and easier to hit than they ever were in the header. */
@media (max-width: 1023px) {
  .kvHeadIn { flex-wrap: nowrap; }
  .kvLogo { flex: 1 1 auto; min-width: 0; }
  .kvLogo img { max-width: min(390px, calc(100vw - 6rem)); }
  .kvPhones { display: none; }
  .kvBurger { margin-left: auto; }
}

/* The two numbers inside the drawer. */
.kvNavTel { display: none; }
@media (max-width: 1023px) {
  .kvNavTel {
    display: grid; gap: .5rem;
    margin: 1.25rem 1.25rem 0; padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
  }
}
.kvNavTel a {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem .9rem; border: 1px solid rgba(255, 255, 255, .3);
  /* opaque, not an rgba wash over the drawer: anything sampling computed
     colours reads the wash as the background and gets a fictional ratio */
  border-radius: var(--radius); background: #1d5099;
  color: #fff; text-decoration: none; font: 700 1.0625rem/1.25 var(--sans);
  font-variant-numeric: tabular-nums;
}
.kvNavTel a:hover, .kvNavTel a:focus-visible {
  background: #fff; color: var(--navy); border-color: #fff;
}
.kvNavTel svg { flex: 0 0 auto; width: 22px; height: 22px; fill: currentColor; }
/* --link-lite is 4.25:1 on the button's ground, which fails AA for 12px text;
   this is the same hue two steps lighter, at 5.2:1. */
.kvNavTel small { display: block; font-weight: 600; font-size: .75rem;
                  color: #b8d4f9; letter-spacing: .07em;
                  text-transform: uppercase; }
.kvNavTel a:hover small, .kvNavTel a:focus-visible small { color: var(--navy); }

/* ================================================================== 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; }

/* Once the aside stacks under the article, the section menu is the same tree
   the burger drawer already holds - two copies of one nav, the second of them
   a long blue list between the copy and the footer.  Only the SECTION menu
   goes; the blog's archive panel is a .kvSideNav too and is not a duplicate
   of anything, so it stays. */
@media (max-width: 900px) {
  .kvSideNav--sections { display: none; }
}

.kvBadge { margin: 1.5rem 0 0; text-align: center; }
.kvBadge img { width: 220px; max-width: 100%; height: auto; }
/* with the section menu gone the badge is all that is left of the aside on a
   phone; centre it and give it room rather than leaving it flush to the copy */
@media (max-width: 900px) {
  .kvBadge { margin-top: 2rem; }
}

/* ================================================================= 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; }
}