/* KO Appraisal — stylesheet matched to kocommercialappraisal.com
 *
 * Values below are the COMPUTED styles pulled from his live services page on
 * 2026-07-29, not an approximation: page #FFFFFF, navy #1A3366, ink #262F40,
 * muted #676F7E, border-radius 0, uppercase serif headings, Open Sans body,
 * 1400px content width. Matching his existing brand was the explicit brief.
 *
 * Where this improves on the original rather than copying it:
 *   - his masthead wordmark overlaps the nav and the phone button clips off
 *     the right edge at desktop width; this one does not
 *   - services carry a classification band naming the standard of evidence
 *     (RETROSPECTIVE · IRS 706, PROP 8 · AAB) instead of decorative icons —
 *     his site uses a heart for divorce and a clock for portfolio
 *   - focus rings and reduced-motion support, neither of which the original has
 *
 * Single light theme by design. A dark mode was built and removed: this site's
 * job is to look like his brand, and a second theme is surface area to maintain
 * for no gain.
 */

:root {
  --navy:      #1a3366;
  --navy-lift: #24448a;
  --navy-deep: #142a55;
  --ink:       #262f40;
  --muted:     #676f7e;
  --body:      #3b4353;   /* supporting prose — darker than --muted, lighter than --ink */
  --faint:     #8b929e;
  --line:      #dcdfe5;
  --hair:      #edeff2;
  --page:      #ffffff;
  --panel:     #f6f8fa;
  --card:      #ffffff;
  --accent:    #b4472e;

  --measure: 1400px;
  /* Named Linux serifs included deliberately: a font-poor box (container, kiosk,
     minimal distro) resolved this entire stack to a sans, so headings silently
     lost their voice and nobody noticed. Liberation/Noto/DejaVu cover it. */
  --serif: ui-serif, Georgia, "Georgia Pro", Cambria, "Liberation Serif",
           "Noto Serif", "DejaVu Serif", "Times New Roman", Times, serif;
  --sans: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --shadow: 0 1px 3px rgba(38,47,64,.06), 0 8px 24px -14px rgba(38,47,64,.14);
  --shadow-lift: 0 2px 6px rgba(38,47,64,.09), 0 16px 32px -16px rgba(38,47,64,.2);

  /* Navy bar tokens, kept separate so the bar's own text colours do not have
     to fight the page palette. */
  --bar:      #1a3366;
  --bar-ink:  #ffffff;
  --bar-body: #c3cfe4;
  --bar-rule: #2c4478;
}


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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: 1.5rem; }
.narrow { max-width: 820px; }

a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--navy-lift); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Type: uppercase serif headings, exactly as his site sets them ─────── */
h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink);
}
/* Caps only where it is doing display work. His site uppercases h1 through h4,
   but at every level hierarchy collapses onto size alone. h1 keeps the brand
   voice; h2/h3 return to sentence case so the document has structure again. */
h1 { text-transform: uppercase; }
h1 { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; letter-spacing: .025em; line-height: 1.05; }
h2 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); font-weight: 700; letter-spacing: 0; line-height: 1.2; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: 0; line-height: 1.25; }
/* Balance the ragged two-line headings — matters most on matrix pages, where
   "ESTATE APPRAISAL IN LA JOLLA" was breaking mid-city-name on the very page
   selling La Jolla expertise. */
h1, h2, h3 { text-wrap: balance; }

/* Body copy carries the legal argument on this site; it should not be the
   lightest thing on the page. --body for argument, --muted demoted to genuinely
   secondary matter (card excerpts, captions, footer). */
p { color: var(--body); max-width: 68ch; }
.prose p { color: var(--ink); }

.label {
  display: inline-block;
  font-family: var(--sans);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy);
}

.skip { position: absolute; left: -9999px; background: var(--navy); color: #fff; padding: .8rem 1.2rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

.staging {
  background: var(--accent); color: #fff; text-align: center;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: .55rem 1rem;
}

/* ── Masthead: solid navy, like his ────────────────────────────────────── */
.masthead { background: var(--bar); position: sticky; top: 0; z-index: 40; }
.masthead .wrap { display: flex; align-items: center; gap: 1.5rem; padding-block: .9rem; position: relative; }

.wordmark { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; min-width: 0; }
.logo { height: 42px; width: auto; flex: none; }
.wordmark b {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--bar-ink);
  white-space: nowrap;
}
.wordmark span {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bar-body); white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  font-size: .88rem; font-weight: 500; text-decoration: none;
  color: var(--bar-ink); white-space: nowrap; opacity: .88;
}
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; }
.nav .tel {
  border: 1px solid rgba(255,255,255,.45); padding: .5rem 1rem;
  font-weight: 600; opacity: 1;
}
.nav .tel:hover { background: rgba(255,255,255,.12); }

.navtoggle {
  display: none; background: none; border: 1px solid rgba(255,255,255,.45);
  color: var(--bar-ink); font: inherit; font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding: .5rem .85rem; cursor: pointer;
}

@media (max-width: 960px) {
  .navtoggle { display: block; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-deep); padding: .5rem 1.5rem 1rem;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .nav .tel { border: 1px solid rgba(255,255,255,.45); text-align: center; margin-top: .8rem; }
}
@media (max-width: 460px) { .wordmark span { display: none; } .logo { height: 34px; } }

/* ── Sections ──────────────────────────────────────────────────────────── */
section { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* .plat is the hero AND the pre-footer CTA on all 383 pages — the exact two
   bands that are navy on kocommercialappraisal.com. They were pale panels here,
   which turned the whole site into one uninterrupted light scroll between a navy
   masthead and a navy footer. Going dark restores his rhythm:
   navy nav → navy hero → white evidence → navy CTA → navy footer.
   No imagery required, which matters because there is none available. */
.plat {
  position: relative; background: var(--navy-deep);
  border: 0; padding: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.plat h1, .plat h2 { color: #fff; }
.plat h1 { margin-block: .8rem 1rem; }
.plat > p { max-width: 62ch; margin-inline: auto; font-size: 1.15rem; line-height: 1.55;
            color: var(--bar-body); }
.plat .label { color: #9db1d6; }
.plat .btn { background: #fff; color: var(--navy); border-color: #fff; }
.plat .btn:hover { background: var(--panel); border-color: var(--panel); }
.plat .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.plat .btn.ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.7); }
.plat .fee-note {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22);
  color: var(--bar-body);
}
.plat .stamp { color: #ffb59e; border-color: #ffb59e; }

.stamp {
  position: absolute; top: 1rem; right: 1rem;
  font-size: .6rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
  border: 1.5px solid var(--accent); padding: .3rem .55rem;
}

/* ── Buttons: square, navy, exactly his ────────────────────────────────── */
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; justify-content: center; }
.btn {
  display: inline-block; background: var(--navy); color: #fff;
  font-size: .875rem; font-weight: 600; letter-spacing: .02em;
  padding: .95rem 2rem; border: 1px solid var(--navy);
  text-decoration: none; border-radius: 0;
  transition: background .15s ease;
}
.btn:hover { background: var(--navy-lift); color: #fff; }
.btn.ghost { background: transparent; color: var(--navy); }
.btn.ghost:hover { background: var(--panel); color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ── Credential strip ──────────────────────────────────────────────────── */
.creds { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--card); }
.creds div { padding: 1.4rem 1.3rem; border-right: 1px solid var(--line); }
.creds div:last-child { border-right: 0; }
.creds b {
  display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 700;
  color: var(--navy); line-height: 1; letter-spacing: .01em;
}
.creds span { display: block; font-size: .8rem; color: var(--muted); margin-top: .5rem; line-height: 1.45; }
@media (max-width: 900px) { .creds { grid-template-columns: repeat(2, 1fr); } .creds div:nth-child(2) { border-right: 0; } }
@media (max-width: 520px) { .creds { grid-template-columns: 1fr; } .creds div { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ── Section heads ─────────────────────────────────────────────────────── */
.sec-head { margin-bottom: 2rem; text-align: center; }
.sec-head .label { margin-bottom: .6rem; }
.sec-head h2 { margin-bottom: .8rem; }
.sec-head p { margin-inline: auto; max-width: 68ch; font-size: 1.02rem; }

/* ── Cards: white, bordered, soft shadow — his pattern ─────────────────── */
.grid { display: grid; gap: 1.5rem; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 960px)  { .g3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.card {
  display: block; position: relative; background: var(--card);
  border: 1px solid var(--line); border-radius: 0;
  padding: 2rem 1.75rem 1.75rem;
  text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
a.card:hover { box-shadow: var(--shadow-lift); border-color: var(--navy); }
.card h3 { margin-bottom: .7rem; color: var(--ink); }
.card p { font-size: .93rem; line-height: 1.6; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } a.card:hover { transform: none; } }

/* Classification band — the standard of evidence this assignment carries.
   Replaces his decorative icons, which are actively misleading (a heart for
   divorce, a clock for portfolio). Driven off the href so it cannot drift. */
.card::before {
  display: block; margin-bottom: .9rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--accent);
  content: "APPRAISAL";
}
.card[href*="estate-appraisal"]::before          { content: "RETROSPECTIVE · IRS 706"; }
.card[href*="trust-appraisal"]::before           { content: "FIDUCIARY"; }
.card[href*="divorce"]::before                   { content: "FAMILY CODE §2552"; }
.card[href*="property-tax-appeal"]::before       { content: "PROP 8 · AAB"; }
.card[href*="commercial-tax-appeals"]::before    { content: "PROP 8 · AAB"; }
.card[href*="pmi-removal"]::before               { content: "LENDER-DIRECTED"; }
.card[href*="fsbo"]::before                      { content: "PRE-LIST OPINION"; }
.card[href*="pre-foreclosure"]::before           { content: "SHORT SALE · LENDER"; }
.card[href*="relocation"]::before                { content: "RELOCATION FORM"; }
.card[href*="estate-planning-gift-tax"]::before  { content: "IRS 706 · 709"; }
.card[href*="dissolution"]::before               { content: "DISSOLUTION"; }
.card[href*="lending-pre-purchase"]::before      { content: "FIRREA · LENDER"; }
.card[href*="litigation-eminent-domain"]::before { content: "EMINENT DOMAIN"; }
.card[href*="portfolio-charitable"]::before      { content: "IRS 8283"; }
.card[href*="/property-types/"]::before          { content: "PROPERTY TYPE"; }
.card[href*="/guides/"]::before                  { content: "GUIDE"; }
.card[href*="/areas/"]::before                   { content: "SERVICE AREA"; }

/* ── Prose ─────────────────────────────────────────────────────────────── */
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.prose h3 { margin-top: 1.9rem; }
.prose p { font-size: 1.02rem; line-height: 1.65; }
.prose ul, .prose ol { padding-left: 1.35rem; color: var(--muted); }
.prose li { margin-top: .5rem; line-height: 1.6; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { font-weight: 600; }

.callout {
  border-left: 3px solid var(--navy); background: var(--panel);
  padding: 1.25rem 1.4rem; font-size: .95rem; color: var(--muted); line-height: 1.6;
}
.callout .label { display: block; margin-bottom: .45rem; }

.facts { width: 100%; border-collapse: collapse; font-size: .93rem; }
.facts th, .facts td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts th { width: 30%; color: var(--ink); font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.facts td { color: var(--muted); line-height: 1.6; }
.table-scroll { overflow-x: auto; }
@media (max-width: 620px) { .facts th { width: 40%; } }

.headshot { display: block; margin-top: 1.75rem; max-width: 260px; width: 100%; height: auto; border: 1px solid var(--line); }

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.crumbs { font-size: .78rem; color: var(--faint); padding-top: 1.4rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; }
.crumbs span { margin-inline: .5rem; opacity: .55; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
details.faq { border-bottom: 1px solid var(--line); }
details.faq summary {
  cursor: pointer; padding: 1.15rem 0; font-weight: 600; color: var(--ink);
  font-size: 1rem; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--navy); font-weight: 400; font-size: 1.3rem; line-height: 1; }
details.faq[open] summary::after { content: "\2212"; }
details.faq .body { padding-bottom: 1.25rem; color: var(--muted); font-size: .96rem; line-height: 1.65; }

/* ── Link lists ────────────────────────────────────────────────────────── */
.linklist { list-style: none; padding: 0; columns: 3; column-gap: 2.5rem; }
.linklist li { break-inside: avoid; padding: .4rem 0; font-size: .92rem; }
.linklist a { color: var(--ink); text-decoration: none; }
.linklist a:hover { color: var(--navy); text-decoration: underline; }
@media (max-width: 900px) { .linklist { columns: 2; } }
@media (max-width: 560px) { .linklist { columns: 2; } }

/* ── Footer: solid navy, his pattern ───────────────────────────────────── */
/* The CTA band runs on every page and now ends it, so the old gap is dead weight. */
footer { background: var(--bar); color: var(--bar-body); margin-top: 0; }
footer .wrap { padding-block: 3.5rem 2rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1.2fr; gap: 3rem; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
footer h4 {
  font-family: var(--serif); font-size: .95rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bar-ink); margin-bottom: 1rem;
}
footer p { color: var(--bar-body); font-size: .88rem; line-height: 1.6; }
footer ul { list-style: none; padding: 0; }
footer li { padding: .3rem 0; font-size: .88rem; color: var(--bar-body); }
footer a { color: var(--bar-body); text-decoration: none; }
footer a:hover { color: var(--bar-ink); text-decoration: underline; }

.legal {
  border-top: 1px solid var(--bar-rule); margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .78rem; color: var(--bar-body);
}

.themetoggle:hover { background: rgba(255,255,255,.12); }

/* Interior pages lead with a heading, not a hero — keep those left-aligned. */
.narrow .label, .narrow h1, .narrow > p { text-align: left; }
.narrow .cta-row { justify-content: flex-start; }

@media print {
  .masthead, footer, .staging, .cta-row, .themetoggle, .navtoggle { display: none; }
  body { background: #fff; color: #000; }
  .card, .plat { box-shadow: none; border: 1px solid #999; }
}


/* ── Pill chips — his property-type row under the hero ─────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.75rem; }
.chips a {
  display: inline-block; padding: .6rem 1.4rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font-size: .875rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 1px 2px rgba(38,47,64,.05);
  transition: border-color .15s ease, color .15s ease;
}
.chips a:hover { border-color: var(--navy); color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .chips a { transition: none; } }

/* ── Checklist inside cards — his ✓ bullet pattern ─────────────────────── */
.card ul { list-style: none; padding: 0; margin-top: 1.1rem; }
.card ul li {
  position: relative; padding-left: 1.5rem; margin-top: .55rem;
  font-size: .875rem; line-height: 1.45; color: var(--muted);
}
.card ul li::before {
  content: "\2713"; position: absolute; left: 0; top: -.05em;
  color: var(--navy); font-weight: 700; font-size: .95rem;
}

/* CTA block reads as his centred "Need a specialized appraisal?" panel. */
.plat .label { margin-bottom: .5rem; }

/* ── Trust badges — his three-up row under the hero ────────────────────── */
.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.badges > div {
  background: var(--card); border: 1px solid var(--line);
  padding: 1.75rem 1.5rem; box-shadow: var(--shadow); text-align: center;
}
.badges h3 { color: var(--navy); margin-bottom: 1.05rem; font-size: 1.1rem; }
.badges p { font-size: .9rem; line-height: 1.55; margin-inline: auto; }
@media (max-width: 800px) { .badges { grid-template-columns: 1fr; } }

/* ── Appraiser block — photograph beside the bio ───────────────────────── */
.bio { display: grid; grid-template-columns: 320px 1fr; gap: 3rem; align-items: start; }
.bio .headshot { margin: 0; max-width: 100%; width: 100%; }
.bio h2 { margin-block: .5rem 1rem; }
.bio p + p { margin-top: 1rem; }
.bio p { font-size: 1.02rem; line-height: 1.65; }
@media (max-width: 860px) {
  .bio { grid-template-columns: 1fr; gap: 1.75rem; }
  .bio .headshot { max-width: 260px; }
}

/* Fee range in the CTA — his figure, framed as a range not a quote. */
.fee-note {
  margin-top: 1rem; margin-inline: auto; font-size: .93rem;
  padding: .9rem 1.1rem; background: var(--card); border: 1px solid var(--line);
  max-width: 62ch;
}

/* ── Verification links — his footer pattern, each credential clickable ── */
.legal .lic { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.legal .lic a {
  color: var(--bar-ink); text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px;
}
.legal .lic a:hover { text-decoration-color: var(--bar-ink); }
.legal .lic em { font-style: normal; opacity: .5; }


/* ── Footer brand column — measured from his rendered footer ───────────── */
/* Scoped with :not(.lic) deliberately. The description paragraph wants a 42ch
   measure; the license line does NOT — capping it forced "MAI Designated" onto
   a second line. Both are <p>, so an unscoped rule catches both. */
.foot-brand p:not(.lic) { max-width: 42ch; margin-bottom: 1rem; }

/* License line: a plain paragraph with inline links and " · " separators.
   His computed values — 14px, rgba(255,255,255,.8), underlined, one line. */
.foot-brand .lic {
  font-size: 14px; color: rgba(255,255,255,.8);
  margin-bottom: 1.25rem; max-width: none;
}
/* Each credential stays intact if the line ever does have to wrap on a narrow
   column — it breaks between items, never through "CA License #3005065". */
.foot-brand .lic a { white-space: nowrap; }
.foot-brand .lic a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot-brand .lic a:hover { color: #fff; }

/* Social row: bare 20px icons, 12px gap, 80% white. No boxes, no borders —
   his values exactly. */
.social { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0; }
.social li { padding: 0; }
.social a {
  display: block; width: 20px; height: 20px; padding: 0;
  color: rgba(255,255,255,.8); background: none; border: 0; border-radius: 0;
  transition: color .15s ease;
}
.social a:hover { color: #fff; }
.social svg { display: block; width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .social a { transition: none; } }

.legal { justify-content: center; }

/* ── Services dropdown ──────────────────────────────────────────────────────
   CSS-driven on desktop (hover + focus-within, so keyboard users get it too),
   and collapses to a plain expandable list on mobile where hover is meaningless. */
.dropdown { position: relative; display: flex; align-items: center; }
.dropdown > a { display: inline-flex; align-items: center; gap: .35rem; }
.caret { font-size: .6em; opacity: .8; transition: transform .15s ease; }
.dropdown:hover .caret, .dropdown:focus-within .caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .caret { transition: none; } }

.dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: 2rem; padding: 1.75rem 2rem;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 12px 40px -12px rgba(38,47,64,.28);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease;
  z-index: 50;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .dropdown-menu { transition: none; } }

.dd-col h5 {
  font-family: var(--serif); font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--navy);
  padding-bottom: .5rem; margin-bottom: .6rem; border-bottom: 1px solid var(--line);
}
.dropdown-menu a {
  display: block; padding: .4rem 0; font-size: .87rem; font-weight: 400;
  color: var(--ink); text-decoration: none; opacity: 1; white-space: normal;
}
.dropdown-menu a:hover { color: var(--navy); text-decoration: underline; }
.dd-all { margin-top: .5rem; font-weight: 600 !important; color: var(--navy) !important; }

@media (max-width: 960px) {
  /* Hover menus do not exist on touch. Show the whole thing inline instead. */
  .dropdown { display: block; }
  .dropdown > a { padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .caret { display: none; }
  .dropdown-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    pointer-events: auto; display: block; background: none; border: 0;
    box-shadow: none; padding: .25rem 0 .5rem 1rem;
  }
  .dd-col { margin-bottom: .75rem; }
  .dd-col h5 { color: var(--bar-body); border-bottom-color: rgba(255,255,255,.14); }
  .dropdown-menu a { color: var(--bar-ink); opacity: .88; border-bottom: 0; padding: .5rem 0; }
  .dd-all { color: var(--bar-ink) !important; }
}

/* Sources list on guides carrying verified citations. Numbered, tight, and
   visually quieter than body copy — it is provenance, not argument. */
.prose ol.cites { margin: .75rem 0 0; padding-left: 1.35rem; }
.prose ol.cites li {
  font-size: .9rem; color: var(--muted); line-height: 1.5;
  margin-bottom: .35rem;
}

/* Line-of-business label inside the CTA button. The two numbers are tracked
   separately, so which one you are calling has to be legible at the button, not
   only in the footer. */
.btn small {
  display: block; font-size: .62rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; opacity: .62; margin-top: .18rem;
}

/* ── Full-bleed bands ─────────────────────────────────────────────────────
   The hero and the pre-footer CTA sat as navy boxes inside .wrap, floating in
   44px of white either side with a 120px white slot above the footer. Client
   wanted them flush.

   Paint is moved up to the <section>, which is already a full-width block in
   normal flow. Deliberately NOT the `margin-inline: calc(50% - 50vw)` full-bleed
   trick: 100vw includes the scrollbar, which is exactly how a site picks up a
   15px horizontal scroll on Windows. No viewport units here, so overflow is
   impossible at any width. Containment stays on .wrap, so the measure is
   unchanged. */
.band {
  background: var(--navy-deep);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
/* The homepage hero is the one band competing for above-the-fold space, so its
   padding tracks viewport height. Everything below it shifts up on short screens
   without touching the interior-page bands. */
/* The hero owns the fold. Badges moved to the foot of the page and Kevin's
   portrait now arrives on scroll, so this band gets the whole first screen and
   the photograph has room to read as a photograph rather than a texture.
   svh rather than vh so mobile browser chrome does not push the CTA off-screen. */
.band.hero {
  min-height: calc(100vh - 71px);
  min-height: calc(100svh - 71px);
  display: grid;
  align-content: center;
  padding-block: clamp(2rem, 6vh, 4rem);
}
.band .plat { background: none; border: 0; padding: 0; box-shadow: none; }

/* The hero uses the lighter navy so it fuses with the masthead into one canopy;
   the CTA uses --navy-deep so it reads as a distinct plane against the footer
   it now touches, rather than merging into one 1,000px navy mass. */
.band.hero { background: var(--navy); }

/* ── Guides index: topic groups ───────────────────────────────────────────
   31 guides in one undifferentiated grid gave a browsing visitor no way in.
   Group heads use the site's existing hairline-above-heading treatment; jump
   links are fragments only, so no root path is assumed and no JS is needed. */
.jump { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.jump a {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  background: var(--card); border: 1px solid var(--line);
  padding: .55rem .9rem;
}
.jump a:hover { border-color: var(--navy); }

.group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 3.25rem 0 1.5rem; padding-top: 2rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 6rem;   /* clear the sticky masthead on an anchor jump */
}
.group-head:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.group-head h2 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.group-head .count {
  font-family: var(--mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap;
}

/* ── Guide classification bands ───────────────────────────────────────────
   Every guide card carried the identical kicker "GUIDE", wasting the slot that
   names the standard of evidence everywhere else on the site. These replace it
   with the statute, method, or assignment class the guide actually rests on.

   ORDER MATTERS and this block must stay LAST. All attribute selectors tie on
   specificity, so last-declared wins, and there are three real collisions:
     [href*="estate-appraisal"]  (a service rule above) also matches
       …real-estate-appraisal guide slugs
     [href*="cap-rate"]          also matches good-cap-rate
     [href*="appraisal-cost"]    matches both the home and commercial cost guides
   Slugs below are verified against the emitted hrefs, not assumed. */

/* Valuation mechanics: the governing approach or method */
.card[href*="/guides/commercial-real-estate-appraisal/"]::before { content: "CERTIFIED GENERAL"; }
.card[href*="/guides/how-to-value-commercial-property/"]::before { content: "THREE APPROACHES"; }
.card[href*="/guides/commercial-appraisal-methods/"]::before     { content: "THREE APPROACHES"; }
.card[href*="/guides/net-operating-income/"]::before             { content: "INCOME APPROACH"; }
.card[href*="/guides/cap-rate/"]::before                         { content: "INCOME APPROACH"; }
.card[href*="/guides/good-cap-rate/"]::before                    { content: "MARKET EXTRACTION"; }
.card[href*="/guides/gross-rent-multiplier/"]::before            { content: "INCOME APPROACH"; }
.card[href*="/guides/highest-and-best-use/"]::before             { content: "FOUR TESTS"; }

/* Estate, trust and tax: the statute or operative concept */
.card[href*="/guides/date-of-death-appraisal/"]::before          { content: "IRC § 1014"; }
.card[href*="/guides/probate-appraisal/"]::before                { content: "PROBATE CODE"; }
.card[href*="/guides/estate-tax-appraisal/"]::before             { content: "IRS 706"; }
.card[href*="/guides/alternate-valuation-date/"]::before         { content: "IRC § 2032"; }
.card[href*="/guides/retrospective-appraisal/"]::before          { content: "EFFECTIVE DATE"; }
.card[href*="/guides/charitable-donation-appraisal/"]::before    { content: "IRS 8283"; }

/* Litigation and condemnation */
.card[href*="/guides/condemnation-appraisal/"]::before           { content: "EMINENT DOMAIN"; }
.card[href*="/guides/severance-damages/"]::before                { content: "CCP § 1263.410"; }

/* Property types: the assignment class */
.card[href*="/guides/retail-appraisal/"]::before                 { content: "INCOME APPROACH"; }
.card[href*="/guides/warehouse-appraisal/"]::before              { content: "SALES COMPARISON"; }
.card[href*="/guides/self-storage-appraisal/"]::before           { content: "GOING CONCERN"; }
.card[href*="/guides/car-wash-appraisal/"]::before               { content: "GOING CONCERN"; }

/* The appraisal process */
.card[href*="/guides/what-is-a-real-estate-appraisal/"]::before  { content: "OPINION OF VALUE"; }
.card[href*="/guides/what-does-an-appraiser-do/"]::before        { content: "SCOPE OF WORK"; }
.card[href*="/guides/home-appraisal-cost/"]::before              { content: "FIXED FEE"; }
.card[href*="/guides/commercial-appraisal-cost/"]::before        { content: "FIXED FEE"; }
.card[href*="/guides/how-long-does-an-appraisal-take/"]::before  { content: "TURNAROUND"; }
.card[href*="/guides/reading-an-appraisal-report/"]::before      { content: "USPAP SR 2"; }
.card[href*="/guides/low-appraisal/"]::before                    { content: "RECONSIDERATION"; }
.card[href*="/guides/appraisal-contingency/"]::before            { content: "PURCHASE CONTRACT"; }
.card[href*="/guides/assessed-value-vs-market-value/"]::before   { content: "PROP 13 · PROP 8"; }
.card[href*="/guides/uspap/"]::before                            { content: "APPRAISAL FOUNDATION"; }
.card[href*="/guides/what-is-an-mai-appraiser/"]::before         { content: "APPRAISAL INSTITUTE"; }

/* ── Hero photograph ──────────────────────────────────────────────────────
   Real San Diego at night from Point Loma (Agha Zain, CC BY 2.0, Wikimedia
   Commons), cropped to the skyline and its reflection. His own site's hero is
   not reused: zoomed in, its building signage is garbled pseudo-text, so it is
   AI generated.
   The navy wash sits ON TOP via a gradient in the same layer, so contrast for
   white type does not depend on the photograph's own luminance. */
.band.hero {
  background-image:
    linear-gradient(rgba(20, 42, 85, .74), rgba(20, 42, 85, .88)),
    url('assets/hero-san-diego.jpg');
  background-size: auto, cover;
  background-position: center, center 38%;
  background-repeat: no-repeat, no-repeat;
}
@media (max-width: 700px) {
  /* At narrow widths the skyline crops to an unreadable sliver, and the wash is
     doing all the work anyway. Drop the request. */
  .band.hero { background-image: none; }
}
.legal .credit { color: var(--faint); font-size: .78rem; }
.legal .credit a { color: var(--faint); text-decoration: underline; }

/* ── Above-the-fold rhythm ────────────────────────────────────────────────
   Target: masthead, hero, trust badges and Kevin's portrait all land within one
   screen on a laptop, with the portrait finishing at the fold rather than 277px
   below it. Each value below is a measured contribution to that, not a guess. */
.badge-row { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.bio-row   { padding-top: clamp(2.5rem, 5vw, 4rem); }
/* The portrait is the largest single block competing for above-the-fold space,
   so it scales with viewport height rather than sitting at a fixed size. The
   column follows the image so the text does not end up beside a gap. */
.bio { grid-template-columns: 340px 1fr; gap: 3rem; align-items: center; }
.bio .headshot { width: 100%; max-width: 100%; max-height: none; }
.plat h1 { margin-block: .55rem .85rem; }
.plat > p { font-size: 1.08rem; line-height: 1.5; }

/* Site-wide scope notice. Legible rather than buried: a disclaimer nobody can
   read is not a disclaimer. Sits above the copyright line, inside the footer,
   at a size that reads as a real statement rather than fine print. */
.scope-note {
  max-width: 88ch;
  margin: 0 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bar-rule, rgba(255,255,255,.16));
  font-size: .82rem;
  line-height: 1.6;
  color: var(--bar-body);
}