/* Chaney Law Office, PLLC — Caldwell, Idaho.
   Built by Ghosts. Design derived from measured conformance across 717 ranking
   placements in competitive legal markets, not from a template:
     - phone in the header, wired as tel:  (+10.6pt marker vs positions 8-10)
     - hero image, single H1 of 4-6 words naming the service and the place
     - NO superlative in any H1 (only 1.5% of ranking pages carry one, and none
       in the top three) — which is also the safe side of Idaho RPC 7.1
     - attorney photography, real people only
     - contact form below the fold, which is where the market actually puts it
   Palette is Canyon County rather than the navy-and-gold law firm default:
   basalt is canyon rock, canal teal is the irrigation water, wheat is the crop. */

:root {
  --paper: #fdfdfb;
  --paper-2: #f4f7f5;
  --paper-3: #eaefea;
  --ink: #14181a;
  --ink-2: #3d474a;
  --ink-3: #6b7a6e;
  --line: #e2e6de;
  --line-2: #cbd3ca;
  --canal: #14657a;
  --canal-2: #0f4f5f;
  --wheat: #b8842c;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --wrap: 1080px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--canal);
}
:focus-visible {
  outline: 2px solid var(--canal);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 50;
  background: #fff;
  padding: 10px 14px;
  border: 2px solid var(--canal);
}

/* ── header ─────────────────────────────────────────────────────────────── */
header.site {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
/* Three zones on one line: brand, nav, phone. NOT flex-wrap — with wrap, the
   phone button dropped to a second row under the wordmark as soon as the nav
   labels needed the space, which is exactly where a law firm's phone number
   must not go. The nav is the only flexible zone, so it absorbs the squeeze. */
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: nowrap;
}
header.site .brand {
  flex: 0 0 auto;
}
header.site nav.main {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
header.site .tel {
  flex: 0 0 auto;
  margin-left: 0;
}
.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-decoration: none;
  color: var(--ink);
}
.brand b {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand span {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
nav.main {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14.5px;
}
nav.main a {
  color: var(--ink-2);
  text-decoration: none;
}
nav.main a:hover,
nav.main a[aria-current="page"] {
  color: var(--canal);
}
.tel {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  background: var(--canal);
  color: #fff;
  padding: 9px 15px;
  border-radius: 3px;
  white-space: nowrap;
}

/* ── mobile navigation ──────────────────────────────────────────────────────
   A checkbox drives this rather than a script, so the menu still opens if
   JavaScript is blocked or fails — on a phone, a law firm with unreachable
   navigation is a lost client. The checkbox is hidden from everyone; the <label>
   is the visible control and carries the accessible name.

   The 980px breakpoint is measured, not chosen by feel: brand 174 + nav 565 +
   phone 136 + gaps 40 + padding 48 = 963px is the narrowest the header fits on
   one line. Below that the nav wrapped to two rows and the header grew from 71px
   to 92px, so the hamburger takes over just above the real threshold. */
.navbtn {
  display: none;
}
@media (max-width: 980px) {
  header.site .wrap {
    /* brand | menu | phone, with the nav dropping to a full-width third row. */
    flex-wrap: wrap;
    gap: 10px;
  }
  .navbtn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    order: 2;
    margin-left: auto;
    cursor: pointer;
    border: 1px solid var(--line-2);
    border-radius: 3px;
    /* 44px minimum on both axes: below that a thumb misses it, and the first
       version of this was 28px tall. */
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  /* The three bars, drawn with a border and two gradients so there is no extra
     markup and nothing to load. */
  .navbtn-bars {
    position: relative;
    width: 16px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
  }
  .navbtn-bars::after {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 100%;
    border-top: 2px solid currentColor;
  }
  .tel {
    order: 3;
  }
  nav.main {
    order: 4;
    width: 100%;
    flex-direction: column;
    gap: 0;
    /* Closed by default at this width. */
    display: none;
    border-top: 1px solid var(--line);
    margin-top: 4px;
    padding-top: 4px;
  }
  .navtoggle:checked ~ nav.main {
    display: flex;
  }
  nav.main a {
    display: block;
    padding: 11px 2px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }
  nav.main a:last-child {
    border-bottom: 0;
  }
  nav.main a[aria-current="page"] {
    font-weight: 600;
  }
  /* Keyboard focus has to be visible on the label, since the input it controls
     is hidden. */
  .navtoggle:focus-visible + .navbtn {
    outline: 2px solid var(--canal);
    outline-offset: 3px;
  }
}
/* Narrow phones. At 375px the inner width is only 327px, and the full wordmark
   (174) plus the menu button (44) plus the phone button (135) plus gaps needs
   373 — so the phone was dropping to a second row, which is the one thing it
   must not do. Rather than let it wrap, the three items are made to fit:
   the "Menu" word goes, the location eyebrow goes (the footer and every page
   still say Caldwell), and the wordmark and phone both step down a size.
   Measured result at 375px: 140 + 44 + 118 + 16 = 318, inside 327. */
@media (max-width: 460px) {
  header.site .wrap {
    gap: 8px;
  }
  .navbtn-text {
    display: none;
  }
  .navbtn {
    padding: 8px;
  }
  .brand b {
    font-size: 16px;
  }
  .brand span {
    display: none;
  }
  .tel {
    font-size: 13.5px;
    padding: 9px 11px;
    /* The phone button is the primary action on a phone, so it gets the full
       44px tap height even though the smaller font would allow less. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
}
.hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: 50% 62%;
}
.hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(
    100deg,
    rgba(253, 253, 251, 0.98) 0%,
    rgba(253, 253, 251, 0.96) 40%,
    rgba(253, 253, 251, 0.72) 62%,
    rgba(253, 253, 251, 0) 88%
  );
}
.hero-copy .wrap {
  width: 100%;
}
@media (max-width: 800px) {
  .hero img {
    aspect-ratio: 4 / 5;
  }
  .hero-copy {
    justify-content: flex-start;
    padding-top: 22px;
    background: linear-gradient(
      180deg,
      rgba(253, 253, 251, 0.96) 0%,
      rgba(253, 253, 251, 0.9) 55%,
      rgba(253, 253, 251, 0.35) 100%
    );
  }
}

h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 0 0 14px;
  max-width: 21ch;
  text-wrap: balance;
}
.lede {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
  margin: 0 0 20px;
}
/* Over the photograph the lede needs full ink and a little more weight; the
   body-copy grey is fine on white and not on an image. */
.hero .lede {
  color: var(--ink);
  font-weight: 500;
  max-width: 42ch;
}
.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.btn-primary {
  background: var(--canal);
  color: #fff;
}
.btn-primary:hover {
  background: var(--canal-2);
}
.btn-quiet {
  border: 1px solid var(--line-2);
  color: var(--ink);
}

/* ── page body ──────────────────────────────────────────────────────────── */
main {
  padding: 0 0 8px;
}
.page-head {
  padding: 44px 0 8px;
}
section.band {
  padding: 40px 0;
}
section.band.tint {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  text-wrap: balance;
}
h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  margin: 26px 0 6px;
}
p {
  margin: 0 0 14px;
  max-width: 68ch;
}
.note {
  color: var(--ink-3);
  font-size: 15.5px;
  max-width: 62ch;
  margin: 0 0 20px;
}
ul.plain {
  max-width: 68ch;
  padding-left: 20px;
  margin: 0 0 16px;
}
ul.plain li {
  margin-bottom: 7px;
}

/* ── credential strip: the signal the market leaves empty ───────────────── */
.creds {
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--canal);
  background: var(--paper-2);
  padding: 20px 22px;
}
.creds h2 {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
  font-weight: 700;
}
.cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px 26px;
}
.cred b {
  display: block;
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
}
.cred span {
  font-size: 13.5px;
  color: var(--ink-2);
}

/* ── cards ──────────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.card {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
  background: #fff;
}
.card h3 {
  margin: 0 0 6px;
  font-size: 18px;
}
.card p {
  font-size: 14.5px;
  color: var(--ink-2);
  margin: 0 0 10px;
  max-width: none;
}
.card a {
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

/* ── places ─────────────────────────────────────────────────────────────── */
.places {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.places span {
  font-size: 14px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px 12px;
  border-radius: 3px;
}

/* ── team ───────────────────────────────────────────────────────────────── */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
}
.member img {
  border-radius: 4px;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.member h3 {
  margin: 12px 0 2px;
  font-size: 17.5px;
}
.member .role {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 8px;
}
.member p {
  font-size: 14.5px;
  color: var(--ink-2);
  max-width: none;
}
.member .bar {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ── form: 7 fields, the corpus median ──────────────────────────────────── */
form.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 4px;
  padding: 22px;
  max-width: 760px;
}
@media (max-width: 640px) {
  form.contact {
    grid-template-columns: 1fr;
  }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.field.wide {
  grid-column: 1 / -1;
}
.field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input,
.field select,
.field textarea {
  border: 1px solid var(--line-2);
  background: #fff;
  border-radius: 3px;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}
.field textarea {
  min-height: 110px;
  resize: vertical;
}
.form-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.turnstile-slot {
  border: 1px dashed var(--line-2);
  background: #fff;
  border-radius: 3px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-3);
  font-family: var(--mono);
}

/* ── bio page: the full profile portrait ────────────────────────────────── */
.biolayout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 34px;
  align-items: start;
}
@media (max-width: 720px) {
  .biolayout {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .profile {
    max-width: 320px;
  }
}
.profile {
  margin: 0;
}
.profile img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.profile figcaption {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 9px;
}

/* ── article ────────────────────────────────────────────────────────────── */
.article {
  max-width: 760px;
}
.article h2 {
  margin-top: 34px;
}
.article h3 {
  margin-top: 24px;
  font-size: 17.5px;
}
.article p {
  max-width: none;
}
.plainlink {
  text-decoration: none;
  color: inherit;
}
.plainlink:hover {
  color: var(--canal);
}

/* The byline is the trust signal. Of 69 attorney pages measured in the corpus,
   none published a bar number and one carried a reviewed-by line, so this block
   is doing work the market leaves undone. */
.byline {
  display: flex;
  gap: 16px;
  align-items: center;
  border-top: 3px solid var(--canal);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  padding: 16px 18px;
  margin: 0 0 26px;
}
.byline img {
  width: 64px;
  height: 80px;
  object-fit: cover;
  border-radius: 3px;
  flex: none;
}
.byline .by {
  margin: 0 0 4px;
  font-size: 15px;
}
.byline .by a {
  text-decoration: none;
}
.byline .bar {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 3px;
}
.byline .dates {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
.keyfacts {
  margin: 0 0 28px;
}
/* Composite scenarios must read as illustrations, never as case results. */
.composite {
  border-left: 3px solid var(--wheat);
  background: #fffdf7;
  padding: 12px 16px;
  font-size: 15px;
  margin: 0 0 14px;
}
.disclaim {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 30px;
}

/* ── footer: Idaho RPC 7.2(d) lives here ────────────────────────────────── */
footer.site {
  border-top: 1px solid var(--line);
  margin-top: 30px;
  padding: 28px 0 36px;
  font-size: 14px;
  color: var(--ink-2);
}
/* Four columns that collapse to two and then one. Grid rather than flex, because
   with flex the last column stretched and the link lists no longer lined up. */
footer.site .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px 40px;
}
footer.site .cols strong {
  display: block;
  margin-bottom: 6px;
}
footer.site .cols a {
  line-height: 1.9;
  text-decoration: none;
}
footer.site .cols a:hover {
  color: var(--canal);
  text-decoration: underline;
}
.hrs {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-3);
}
footer.site a {
  color: var(--ink-2);
}
footer.site .resp {
  font-size: 12.5px;
  color: var(--ink-3);
  max-width: 60ch;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
footer.site strong {
  color: var(--ink);
}
/* The Ghosts credit. Quiet on purpose: it sits below the responsibility block,
   at the smallest size on the page, because the firm's own attribution under
   Idaho RPC 7.2(d) has to read as the more prominent of the two. */
.built {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 14px;
}
.built a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}
.built a:hover {
  color: var(--canal);
  border-bottom-color: var(--canal);
}

/* Honeypot. Must be invisible to sighted users AND skipped by keyboard and
   screen readers — the input is aria-hidden and tabindex -1 in the markup — so
   that only automated submitters ever fill it in. Not display:none, because some
   bots specifically skip display:none fields. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── home page lead attorney ────────────────────────────────────────────────
   The trust block used to be a credential grid with nothing to click, so the
   strongest signal on the page was a dead end. Photograph on the left, the
   credentials and two routes out on the right. */
.leadattorney {
  /* 150px portrait, not 220. Four facts and two links should not take most of a
     screen, and the buttons belong under the photograph where a reader looks for
     them rather than stranded below the credential grid. */
  display: grid;
  grid-template-columns: 178px 1fr;
  gap: 24px;
  align-items: start;
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--canal);
  background: var(--paper-2);
  padding: 20px 22px;
}
@media (max-width: 620px) {
  .leadattorney {
    grid-template-columns: 118px 1fr;
    gap: 16px;
    padding: 16px;
  }
}
.lead-photo {
  margin: 0;
}
/* Visible to screen readers, not on screen. Not display:none or visibility:hidden,
   which remove it from the accessibility tree as well, and not width/height 0,
   which some readers skip. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The portrait is the link to the bio, so the anchor has to be a block: as an
   inline element it adds a descender gap under the image and the border sits a
   few pixels below the photo. */
.lead-photo a {
  display: block;
  border-radius: 4px;
}
.lead-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
  transition: border-color 120ms ease;
}
.lead-photo a:hover img,
.lead-photo a:focus-visible img {
  border-color: var(--canal);
}
/* Text links on one line, not buttons. Stacked buttons in the 150px portrait
   column made that column taller than the body column, so they were setting the
   height of the whole box and leaving dead space beside them. */
.lead-links {
  margin: 10px 0 0;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.lead-links a {
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}
.lead-links a:hover {
  border-bottom-color: var(--canal);
}
.lead-links span {
  color: var(--ink-3);
  margin: 0 6px;
  font-weight: 400;
}
.lead-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin: 0 0 3px;
}
.leadattorney h2 {
  margin: 0 0 6px;
  font-size: 24px;
}
.lead-line {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0 0 14px;
}
/* Tighter than the shared .cred-grid: these entries are short and were wrapping
   onto two lines each, which is what made the box tall. */
.leadattorney .cred-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 22px;
}
.leadattorney .cred b {
  font-size: 15px;
}
.leadattorney .cred span {
  font-size: 13px;
}
/* ── share row ──────────────────────────────────────────────────────────────
   Deliberately plain links, not platform SDKs: those set third-party cookies on
   every reader whether or not anybody clicks, which is a poor thing to do to
   someone reading about their own divorce. */
.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 30px 0 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.share-label {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin-right: 4px;
}
.share-btn {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 8px 13px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.share-btn:hover {
  border-color: var(--canal);
  color: var(--canal);
}

/* The team page is a directory: one short paragraph each and a way through to the
   full bio. It used to carry every biography in full, so a visitor read a hundred
   words about the legal assistant before reaching the attorney. */
.morebio {
  margin: 8px 0 0;
  font-size: 13.5px;
  font-weight: 600;
}
.morebio a {
  text-decoration: none;
}