/*
 * DESIGN-LANGUAGE-G §2.1 — homepage body. Wave 2.
 * Reference: qa/homepage-concepts/round3-g.html (owner-approved concept).
 * Loaded ONLY on the front page via conditional enqueue.
 *
 * Layer stack: design-tokens.css → fonts.css → chrome-g.css → homepage-g.css.
 * All selectors are scoped to the .avg-home body class so no leak onto other
 * page types.
 */

.avg-home {
	/* Homepage-specific baseline — parent theme's app.css tries to set body
	   font on legacy pages; we scope our own. */
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: var(--body-size);
	line-height: 1.6;
}
/* Scope link color to homepage BODY sections only — not to header/nav/
   footer/mobile-nav (which own their own link colors in chrome-g.css).
   Regression 2026-08-18: an .avg-home a rule tinted footer links blue
   on the dark ground. Fix: target only <section> descendants of .avg-home. */
.avg-home section a { color: var(--sky-deep); text-decoration: none; }
.avg-home section a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.avg-home img { max-width: 100%; display: block; }

.avg-home .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--wrap-gutter-dt); }
.avg-home .meta { font-family: var(--meta); font-weight: var(--meta-w); text-transform: uppercase; letter-spacing: var(--meta-track); }

/* Sections common padding */
.avg-home .sec { padding: var(--section-py-dt) 0; }

/* ————————————————————————————————————————
   HERO
   ———————————————————————————————————————— */
.avg-home .hero { background: var(--cream); padding: 56px 0 68px; position: relative; overflow: hidden; border-bottom: 1.5px solid var(--rule); }
.avg-home .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; position: relative; z-index: 2; }
.avg-home .hero-copy { padding-top: 20px; }
.avg-home .hero-slug { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1.5px solid var(--rule); flex-wrap: wrap; }
.avg-home .hero-slug .num { font-family: var(--meta); font-size: 11.5px; color: var(--ink); font-weight: var(--meta-w); letter-spacing: .10em; text-transform: uppercase; }
.avg-home .hero-slug .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.avg-home .hero-slug .tagline { font-family: var(--body); font-size: 15px; color: var(--ink-2); font-weight: 500; }
.avg-home .hero h1 { font-family: var(--display); font-weight: var(--display-w); font-size: var(--h1-size); line-height: 1.02; letter-spacing: -.028em; color: var(--ink); margin: 0 0 22px; }
.avg-home .hero h1 .accent { color: var(--coral-deep); }
.avg-home .hero .lede { font-family: var(--body); font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 560px; margin: 0 0 32px; font-weight: 500; }

/* Lookup — reference-desk feel */
.avg-home .lookup { background: var(--page); border: 1.5px solid var(--rule); padding: 24px 24px 22px; max-width: 600px; }
.avg-home .lookup .lu-label { font-family: var(--meta); font-size: 11.5px; font-weight: var(--meta-w); color: var(--ink); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.avg-home .lookup .lu-label::before { content: ""; width: 14px; height: 14px; background: var(--coral); display: inline-block; }
.avg-home .lookup .lu-input-wrap { position: relative; }
.avg-home .lookup .lu-input-wrap svg.mag { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-3); }
.avg-home .lookup .lu-input-wrap input { width: 100%; height: 54px; padding: 0 138px 0 46px; background: var(--cream); border: 1.5px solid var(--hair); border-radius: 4px; font-family: var(--body); font-size: 15.5px; font-weight: 500; color: var(--ink); margin-bottom: 0; }
.avg-home .lookup .lu-input-wrap input::placeholder { color: var(--ink-3); font-weight: 400; text-transform: none; letter-spacing: normal; }
.avg-home .lookup .lu-input-wrap input:focus { outline: none; border-color: var(--ink); background: var(--page); box-shadow: 0 0 0 3px var(--sky-tint); }
.avg-home .lookup .lu-input-wrap button { position: absolute; right: 6px; top: 6px; height: 42px; padding: 0 20px; background: var(--ink); color: var(--paper); border: none; border-radius: 3px; font-family: var(--display); font-weight: var(--display-w-2); font-size: 14px; letter-spacing: .01em; cursor: pointer; margin: 0; }
.avg-home .lookup .lu-input-wrap button:hover { background: var(--coral); }
.avg-home .lookup .lu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; align-items: center; }
.avg-home .lookup .lu-chips b { font-family: var(--meta); font-size: 11px; font-weight: var(--meta-w); color: var(--ink-3); letter-spacing: .10em; text-transform: uppercase; margin-right: 6px; }
.avg-home .lookup .lu-chips a { background: var(--sky-tint); color: var(--sky-deep); padding: 6px 12px; border-radius: 3px; font-family: var(--body); font-weight: 600; font-size: 13.5px; }
.avg-home .lookup .lu-chips a:hover { background: var(--sky-deep); color: #fff; text-decoration: none; }

.avg-home .hero-visual { position: relative; padding-top: 14px; }
.avg-home .hero-figure { background: var(--page); border: 1.5px solid var(--rule); padding: 14px; position: relative; }
/* Hero image art direction: bird-focal crop from the existing landscape
   coop photo. object-position pulls the frame toward the birds
   (bottom-third of the source) so the frame reads as bird, not lumber
   (critic #6). No new asset generated. */
.avg-home .hero-figure img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 78%; display: block; filter: contrast(1.02) saturate(1.02); }
.avg-home .hero-cap { margin-top: 12px; padding: 14px 4px 0; border-top: 1.5px solid var(--rule); font-family: var(--body); font-size: 14px; color: var(--ink-2); line-height: 1.5; font-style: italic; }
.avg-home .hero-cap b { font-style: normal; font-weight: 700; color: var(--ink); font-family: var(--meta); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin-right: 8px; }
.avg-home .hero-side-note { margin-top: 18px; padding: 18px 20px; background: var(--forest); color: var(--paper); border-left: 4px solid var(--sun); }
.avg-home .hero-side-note .hsn-label { font-family: var(--meta); font-size: 11px; font-weight: var(--meta-w); color: var(--sun); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 8px; }
.avg-home .hero-side-note b { display: block; font-family: var(--display); font-weight: var(--display-w-2); font-size: 16px; line-height: 1.35; color: var(--paper); }
/* av-img slot placeholder (image coming soon) inside .hero-figure */
.avg-home .hero-figure .av-img-slot { aspect-ratio: 4/5; background: var(--cream); display: flex; align-items: center; justify-content: center; }
.avg-home .hero-figure .av-img-slot__caption { font-family: var(--meta); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--meta-w); }

/* ==== HERO-BAND-C BLOCK — 2026-08-26 ==================================
   Owner escalation 2026-08-26: same uncontrolled-image-height defect
   the article HERO-BAND-A and hub HERO-BAND-B rulings addressed.
   Prior state: .avg-home .hero-figure img at aspect-ratio 4/5
   rendered ~579px tall at 1440 (475×579 in the .85fr column). Text
   column (h1 + lede + lookup form) ran shorter, so band was
   image-driven at 748px. Landscape source (natural 4:3 chicken coop)
   was portrait-cropped, hiding most of the scene.

   Fix: 3:2 aspect on the img (and the av-img-slot placeholder for
   parity with the loaded image height) — same aspect the article
   HERO-BAND-A and hub HERO-BAND-B blocks use. Image renders ~316px
   tall; band becomes text-driven. Mobile <=600px adds the same 55vh
   cap as those siblings.

   object-position 50% 78% is preserved from the base rule to keep the
   birds-focal crop the critic asked for; under 3:2 the wider crop
   still centers on the bird band.

   Rule: image never drives band height (owner escalation, 2026-08-26). */
.avg-home .hero-figure img,
.avg-home .hero-figure .av-img-slot {
	aspect-ratio: 3 / 2 !important;
}
@media (max-width: 600px) {
	.avg-home .hero-figure img,
	.avg-home .hero-figure .av-img-slot {
		aspect-ratio: 3 / 2 !important;
		max-height: 55vh;
	}
}
/* ==== END HERO-BAND-C BLOCK ============================================ */

/* ————————————————————————————————————————
   SECTION HEADER (shared)
   ———————————————————————————————————————— */
.avg-home .sec-head { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; margin-bottom: 36px; padding-bottom: 20px; border-bottom: 1.5px solid var(--rule); align-items: end; }
.avg-home .sec-head .sig { font-family: var(--meta); font-size: 11.5px; font-weight: var(--meta-w); color: var(--ink); letter-spacing: .14em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 2px solid var(--coral); align-self: flex-end; margin-bottom: -1.5px; }
.avg-home .sec-head .h-title h2 { font-family: var(--display); font-size: var(--h2-size); font-weight: var(--display-w); letter-spacing: -.026em; line-height: 1.08; color: var(--ink); text-wrap: balance; margin: 0; }
.avg-home .sec-head .h-title h2 em { font-style: normal; color: var(--coral-deep); }
.avg-home .sec-head .h-title .h-sub { font-family: var(--body); font-size: 15.5px; color: var(--ink-2); margin-top: 10px; font-weight: 500; }
.avg-home .sec-head .h-right { font-family: var(--meta); font-size: 12px; color: var(--ink-3); font-weight: var(--meta-w); letter-spacing: .08em; text-transform: uppercase; padding-bottom: 6px; }
.avg-home .sec-head .h-right a { color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }
.avg-home .sec-head .h-right a:hover { color: var(--coral-deep); border-color: var(--coral-deep); text-decoration: none; }

/* ————————————————————————————————————————
   SYMPTOM INDEX TABLE
   ———————————————————————————————————————— */
.avg-home .signs { background: var(--paper); }
.avg-home .signs-table { background: var(--page); border: 1.5px solid var(--rule); }
.avg-home .st-row { display: grid; grid-template-columns: 60px 1.4fr 1.6fr auto auto; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--hair); align-items: center; transition: background .15s; }
.avg-home .st-row:last-child { border-bottom: none; }
.avg-home .st-row:hover { background: var(--cream); }
.avg-home .st-row.head { background: var(--cream); font-family: var(--meta); font-size: 11px; font-weight: var(--meta-w); color: var(--ink-3); text-transform: uppercase; letter-spacing: .14em; border-bottom: 1.5px solid var(--rule); }
.avg-home .st-num { font-family: var(--meta); font-size: 12.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .06em; }
.avg-home .st-name { font-family: var(--display); font-weight: var(--display-w-2); font-size: 18px; color: var(--ink); letter-spacing: -.01em; line-height: 1.2; }
.avg-home .st-name .cat { display: block; font-family: var(--meta); font-size: 11px; font-weight: var(--meta-w); color: var(--ink-3); text-transform: uppercase; letter-spacing: .10em; margin-top: 5px; }
.avg-home .st-desc { font-family: var(--body); font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

/* Severity chips — 4 tiers. Emergency is the ONLY solid chip sitewide
   (visual grammar the reader learns). Every variant here has a matching
   legend entry in the .signs-legend below (spec §1.6 standing gate). */
.avg-home .st-sev { font-family: var(--display); font-weight: var(--display-w-2); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding: 6px 10px; border-radius: 3px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.avg-home .st-sev .pip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.avg-home .st-sev.emergency { background: var(--coral); color: #fff; border: 1.5px solid var(--coral-deep); padding: 6px 12px; }
.avg-home .st-sev.emergency .pip { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.avg-home .st-sev.urgent { background: var(--coral-tint); color: var(--coral-deep); }
.avg-home .st-sev.urgent .pip { background: var(--coral); }
.avg-home .st-sev.watch { background: var(--sun-tint); color: var(--sun-deep); }
.avg-home .st-sev.watch .pip { background: var(--sun-deep); }
.avg-home .st-sev.home { background: var(--forest-tint); color: var(--forest-deep); }
.avg-home .st-sev.home .pip { background: var(--forest); }

.avg-home .st-go { font-family: var(--display); font-weight: var(--display-w-2); font-size: 13px; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; display: inline-flex; align-items: center; gap: 6px; }
.avg-home .st-go:hover { color: var(--coral-deep); border-color: var(--coral-deep); text-decoration: none; }
.avg-home .signs-legend { display: flex; gap: 22px; margin-top: 20px; padding: 16px 22px; background: var(--cream); border: 1.5px solid var(--hair); flex-wrap: wrap; }
.avg-home .signs-legend .lg-item { display: flex; align-items: center; gap: 10px; font-family: var(--body); font-size: 13px; color: var(--ink-2); font-weight: 500; }
.avg-home .signs-legend .lg-item .pip { width: 12px; height: 12px; border-radius: 50%; }
.avg-home .signs-legend .lg-item .pip-emergency { background: var(--coral); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--coral-deep); }
.avg-home .signs-legend .lg-item b { font-family: var(--display); font-weight: var(--display-w-2); color: var(--ink); }
.avg-home .signs-legend .lg-label { font-family: var(--meta); font-size: 11px; font-weight: var(--meta-w); color: var(--ink-3); text-transform: uppercase; letter-spacing: .12em; margin-right: auto; }

/* ————————————————————————————————————————
   FOUR COLOR-BLOCKED SECTION TILES
   ———————————————————————————————————————— */
.avg-home .sections { background: var(--cream); border-top: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule); }
.avg-home .sec-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.avg-home .sec-tile { border-radius: 6px; overflow: hidden; padding: 34px 32px 30px; position: relative; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; border: 1.5px solid var(--rule); transition: transform .15s; text-decoration: none; }
.avg-home .sec-tile:hover { transform: translateY(-3px); text-decoration: none; }
.avg-home .sec-tile.t1 { background: linear-gradient(160deg, var(--sky-deep) 0%, var(--sky) 100%); }
.avg-home .sec-tile.t2 { background: linear-gradient(160deg, #C08415 0%, var(--sun) 100%); color: var(--ink); }
.avg-home .sec-tile.t3 { background: linear-gradient(160deg, var(--coral-deep) 0%, var(--coral) 100%); }
.avg-home .sec-tile.t4 { background: linear-gradient(160deg, var(--forest-deep) 0%, var(--forest) 100%); }
.avg-home .sec-tile .st-num-pill { position: absolute; top: 22px; right: 26px; font-family: var(--meta); font-weight: var(--meta-w); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.avg-home .sec-tile.t2 .st-num-pill { color: rgba(15,20,24,.55); }
.avg-home .sec-tile h3 { font-family: var(--display); font-size: 32px; font-weight: var(--display-w); letter-spacing: -.024em; line-height: 1.04; margin: 0 0 10px; }
.avg-home .sec-tile h3 a { color: inherit; text-decoration: none; }
.avg-home .sec-tile h3 a:hover { text-decoration: none; }
.avg-home .sec-tile .st-mono { font-family: var(--meta); font-size: 11px; font-weight: var(--meta-w); text-transform: uppercase; letter-spacing: .12em; opacity: .85; margin-bottom: 16px; }
.avg-home .sec-tile p { font-family: var(--body); font-size: 14.5px; line-height: 1.55; opacity: .92; margin: 0 0 20px; max-width: 420px; font-weight: 500; }
.avg-home .sec-tile ul { list-style: none; padding: 0; margin: 0 0 24px; }
.avg-home .sec-tile li { font-family: var(--body); font-weight: 600; font-size: 14px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.24); display: flex; justify-content: space-between; align-items: center; }
.avg-home .sec-tile li a { color: inherit; }
.avg-home .sec-tile.t2 li { border-top-color: rgba(15,20,24,.24); }
.avg-home .sec-tile li::after { content: "›"; opacity: .7; font-size: 18px; font-weight: 700; margin-left: 8px; }
.avg-home .sec-tile .st-cta { align-self: flex-start; background: rgba(255,255,255,.96); color: var(--ink); font-family: var(--display); font-weight: var(--display-w-2); font-size: 14px; padding: 12px 20px; border-radius: 4px; display: inline-flex; align-items: center; gap: 9px; letter-spacing: .01em; border: 1.5px solid var(--rule); }
.avg-home .sec-tile .st-cta:hover { text-decoration: none; transform: translateX(2px); }

/* ————————————————————————————————————————
   VET BAND (deep-green — H2 must include "avian vet" per SEO gate)
   ———————————————————————————————————————— */
.avg-home .vet-band { background: var(--forest); color: var(--paper); padding: 80px 0; border-top: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule); }
.avg-home .vet-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.avg-home .vet-inner .kicker { font-family: var(--meta); font-size: 11.5px; font-weight: var(--meta-w); color: var(--sun); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1.5px solid rgba(255,255,255,.22); display: inline-block; }
.avg-home .vet-inner h2 { font-family: var(--display); font-size: 46px; font-weight: var(--display-w); line-height: 1.02; letter-spacing: -.028em; color: var(--paper); margin: 0 0 22px; }
.avg-home .vet-inner h2 em { font-style: normal; color: var(--sun); }
.avg-home .vet-inner .v-lede { font-family: var(--body); font-size: 18px; line-height: 1.6; color: #D6DDDA; margin: 0 0 30px; max-width: 520px; font-weight: 500; }
.avg-home .vet-inner .v-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.avg-home .vet-primary { background: var(--sun); color: var(--forest-deep); padding: 14px 22px; border-radius: 4px; font-family: var(--display); font-weight: var(--display-w); font-size: 14.5px; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 9px; border: 1.5px solid var(--sun); min-height: 44px; box-sizing: border-box; }
.avg-home .vet-primary:hover { background: var(--paper); border-color: var(--paper); text-decoration: none; color: var(--forest-deep); }
.avg-home .vet-outline { background: transparent; color: var(--paper); padding: 14px 22px; border-radius: 4px; font-family: var(--display); font-weight: var(--display-w-2); font-size: 14.5px; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 9px; border: 1.5px solid rgba(255,255,255,.4); min-height: 44px; box-sizing: border-box; }
.avg-home .vet-outline:hover { background: rgba(255,255,255,.08); text-decoration: none; color: var(--paper); }
.avg-home .vet-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); padding: 32px 30px; }
.avg-home .vet-card h3, .avg-home .vet-card h4 { font-family: var(--meta); font-size: 11.5px; font-weight: var(--meta-w); color: var(--sun); text-transform: uppercase; letter-spacing: .14em; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1.5px solid rgba(255,255,255,.18); }
.avg-home .vet-card ul { list-style: none; padding: 0; margin: 0; }
.avg-home .vet-card li { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.10); font-family: var(--body); font-size: 15.5px; color: var(--paper); display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: baseline; line-height: 1.5; font-weight: 500; }
.avg-home .vet-card li:last-child { border-bottom: none; padding-bottom: 0; }
.avg-home .vet-card li .num { font-family: var(--meta); font-size: 11.5px; color: var(--sun); font-weight: 700; letter-spacing: .06em; }

/* ————————————————————————————————————————
   REFERENCE INDEX (tabs — all panels present, JS toggles [hidden])
   ———————————————————————————————————————— */
.avg-home .idx { background: var(--paper); border-top: 1.5px solid var(--rule); }
.avg-home .idx-tabs { display: flex; gap: 6px; margin-bottom: 28px; flex-wrap: wrap; padding: 6px; background: var(--cream); border: 1.5px solid var(--rule); border-radius: 4px; }
.avg-home .idx-tabs button { padding: 10px 18px; border-radius: 3px; background: transparent; font-family: var(--display); font-weight: var(--display-w-2); font-size: 13.5px; color: var(--ink-2); letter-spacing: -.005em; border: none; cursor: pointer; margin: 0; }
.avg-home .idx-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.avg-home .idx-tabs button:hover { background: var(--sun-tint); color: var(--ink); }
.avg-home .idx-tabs button[aria-selected="true"]:hover { background: var(--ink); color: var(--paper); }
/* Reference index panels — tab-filtered.
   Only ONE panel is visible at a time (JS toggles `hidden`); the active
   panel fills the section width as a ruled multi-column list (concept
   round3-g.html §reference-index). CSS multi-column flows the <ul>
   items into 4 balanced columns at desktop, 2 at ~900px, 1 at ≤599px.
   `break-inside: avoid` keeps each row intact across the column break;
   the last-child border-none rule is dropped because column boundaries
   are visual, not structural — every row wants its rule so the last
   item in each column doesn't lose its baseline. (Fix pass 2026-08-18
   defect #2.) */
.avg-home .idx-grid { display: block; border: 1.5px solid var(--rule); }
.avg-home .idx-col { background: var(--page); padding: 28px 32px 30px; }
.avg-home .idx-col[hidden] { display: none; }
.avg-home .idx-col h3 { font-family: var(--meta); font-size: 11.5px; font-weight: var(--meta-w); color: var(--coral-deep); text-transform: uppercase; letter-spacing: .14em; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1.5px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; }
.avg-home .idx-col h3 span { font-weight: var(--meta-w); color: var(--ink-3); font-size: 10.5px; letter-spacing: .06em; }
.avg-home .idx-col ul { list-style: none; padding: 0; margin: 0; column-count: 4; column-gap: 40px; column-rule: 1px solid var(--hair); }
.avg-home .idx-col li { padding: 10px 0; border-bottom: 1px solid var(--hair); font-family: var(--body); font-size: 14.5px; font-weight: 500; color: var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; line-height: 1.35; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }
.avg-home .idx-col li a { color: var(--ink); }
.avg-home .idx-col li a:hover { color: var(--coral-deep); text-decoration: none; }
.avg-home .idx-col li .code { font-family: var(--meta); font-size: 10.5px; font-weight: var(--meta-w); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; flex: 0 0 auto; }
@media (max-width: 1180px) {
	.avg-home .idx-col ul { column-count: 3; column-gap: 32px; }
}

/* "All" composite panel (critic #5 — restore the concept's default view).
   Four per-category groups side-by-side, each headed by its own kicker.
   Kicker color follows the hub color so the reader sees the four
   categories as four distinct routes at a glance. */
.avg-home .idx-col-all { padding: 0; }
.avg-home .idx-all-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.avg-home .idx-all-group { padding: 24px 24px 26px; border-right: 1px solid var(--hair); }
.avg-home .idx-all-group:last-child { border-right: none; }
.avg-home .idx-all-group h3 { font-family: var(--meta); font-size: 11.5px; font-weight: var(--meta-w); text-transform: uppercase; letter-spacing: .14em; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1.5px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.avg-home .idx-all-group h3 span { font-weight: var(--meta-w); color: var(--ink-3); font-size: 10.5px; letter-spacing: .06em; }
.avg-home .idx-all-group-conditions  h3 { color: var(--coral-deep); }
.avg-home .idx-all-group-medications h3 { color: var(--sun-deep); }
.avg-home .idx-all-group-procedures  h3 { color: var(--sky-deep); }
.avg-home .idx-all-group-species     h3 { color: var(--forest-deep); }
.avg-home .idx-all-group ul { list-style: none; padding: 0; margin: 0; column-count: 1; }
.avg-home .idx-all-group li { padding: 9px 0; border-bottom: 1px solid var(--hair); font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; line-height: 1.32; }
.avg-home .idx-all-group li:last-child { border-bottom: none; }
.avg-home .idx-all-group li a { color: var(--ink); }
.avg-home .idx-all-group li a:hover { color: var(--coral-deep); text-decoration: none; }
.avg-home .idx-all-group li .code { font-family: var(--meta); font-size: 10px; font-weight: var(--meta-w); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; flex: 0 0 auto; }

/* About-more link (dropped-duplicate-byline replacement — UX W2). */
.avg-home .about .about-more { margin-top: 22px; padding-top: 18px; border-top: 1.5px solid var(--rule); }
.avg-home .about .about-more a { font-family: var(--display); font-weight: var(--display-w-2); font-size: 15px; color: var(--coral-deep); }
.avg-home .about .about-more a:hover { color: var(--ink); text-decoration: none; }

/* ————————————————————————————————————————
   FRESH / NEW & UPDATED
   ———————————————————————————————————————— */
.avg-home .new-band { background: var(--cream); border-top: 1.5px solid var(--rule); }
.avg-home .new-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; align-items: start; }
.avg-home .new-lead { background: var(--page); border: 1.5px solid var(--rule); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.avg-home .new-lead:hover { text-decoration: none; }
.avg-home .new-lead .nl-img { aspect-ratio: 16/10; overflow: hidden; border-bottom: 1.5px solid var(--rule); }
.avg-home .new-lead .nl-img img { width: 100%; height: 100%; object-fit: cover; }
.avg-home .new-lead .nl-body { padding: 24px 26px 26px; }
/* Featured (lead) card meta row: kicker + hub name; kicker color follows
   the post's hub color (critic #4). Meta-row spans update-date, read-time,
   byline (critic #2 — restored). */
.avg-home .new-lead .nl-meta { font-family: var(--meta); font-size: 11px; font-weight: var(--meta-w); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.avg-home .new-lead .nl-meta .nl-kicker { font-weight: 700; }
.avg-home .new-lead .nl-meta .nl-hub { color: var(--ink-3); position: relative; padding-left: 14px; }
.avg-home .new-lead .nl-meta .nl-hub::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
/* Kicker color = hub color (critic #4 — semantic, not positional). */
.avg-home .new-lead-tone-a .nl-meta .nl-kicker { color: var(--sky-deep); }
.avg-home .new-lead-tone-b .nl-meta .nl-kicker { color: var(--sun-deep); }
.avg-home .new-lead-tone-c .nl-meta .nl-kicker { color: var(--coral-deep); }
.avg-home .new-lead-tone-d .nl-meta .nl-kicker { color: var(--forest-deep); }
.avg-home .new-lead h3 { font-family: var(--display); font-weight: var(--display-w); font-size: 28px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 12px; color: var(--ink); }
.avg-home .new-lead p { font-family: var(--body); font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px; font-weight: 500; }
.avg-home .new-lead .nl-foot { font-family: var(--meta); font-size: 11px; color: var(--ink-3); font-weight: var(--meta-w); padding-top: 14px; border-top: 1px solid var(--hair); display: flex; gap: 18px; letter-spacing: .08em; text-transform: uppercase; flex-wrap: wrap; }
.avg-home .new-lead .nl-foot span { position: relative; }
.avg-home .new-lead .nl-foot span + span::before { content: "\00b7"; position: absolute; left: -12px; color: var(--ink-3); opacity: .6; }

/* Follow-up cards now carry the featured image (UX C2 / critic #2). */
.avg-home .new-card { background: var(--page); border: 1.5px solid var(--rule); display: flex; flex-direction: column; text-decoration: none; color: inherit; overflow: hidden; }
.avg-home .new-card:hover { text-decoration: none; }
.avg-home .new-card .nc-img { aspect-ratio: 16/10; overflow: hidden; border-bottom: 1.5px solid var(--rule); background: var(--cream); }
.avg-home .new-card .nc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avg-home .new-card .nc-body { padding: 22px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.avg-home .new-card .nc-tag { font-family: var(--meta); font-size: 11px; font-weight: var(--meta-w); letter-spacing: .14em; text-transform: uppercase; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1.5px solid var(--rule); color: var(--ink); }
/* Kicker color = post's hub color (critic #4). Positional a/b/c/d
   rotation retired — see wave 2 fix pass. */
.avg-home .new-card-tone-a .nc-tag { color: var(--sky-deep); }
.avg-home .new-card-tone-b .nc-tag { color: var(--sun-deep); }
.avg-home .new-card-tone-c .nc-tag { color: var(--coral-deep); }
.avg-home .new-card-tone-d .nc-tag { color: var(--forest-deep); }
.avg-home .new-card h3 { font-family: var(--display); font-weight: var(--display-w); font-size: 21px; line-height: 1.18; letter-spacing: -.015em; color: var(--ink); margin: 0 0 12px; }
.avg-home .new-card p { font-family: var(--body); font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 18px; flex: 1; font-weight: 500; }
.avg-home .new-card .nc-foot { font-family: var(--meta); font-size: 11px; color: var(--ink-3); font-weight: var(--meta-w); padding-top: 14px; border-top: 1px solid var(--hair); letter-spacing: .08em; text-transform: uppercase; }

/* ————————————————————————————————————————
   ABOUT / ROBIN HALE
   ———————————————————————————————————————— */
.avg-home .about { background: var(--paper); border-top: 1.5px solid var(--rule); }
.avg-home .about-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.avg-home .about-mark { border: 1.5px solid var(--rule); padding: 14px; background: var(--page); }
.avg-home .about-mark img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.avg-home .about-mark .m-cap { margin-top: 12px; padding-top: 12px; border-top: 1.5px solid var(--rule); font-family: var(--body); font-style: italic; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.avg-home .about-mark .m-cap b { font-style: normal; font-weight: 700; color: var(--ink); font-family: var(--meta); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin-right: 8px; }
.avg-home .about h3, .avg-home .about .sig { font-family: var(--meta); font-size: 11.5px; font-weight: var(--meta-w); color: var(--coral-deep); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1.5px solid var(--rule); display: inline-block; }
.avg-home .about h2 { font-family: var(--display); font-size: 42px; font-weight: var(--display-w); line-height: 1.05; letter-spacing: -.028em; color: var(--ink); margin: 0 0 22px; }
.avg-home .about h2 em { font-style: normal; color: var(--coral-deep); }
.avg-home .about p { font-family: var(--body); font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0 0 18px; font-weight: 500; }
.avg-home .about .a-sig { margin-top: 24px; padding-top: 20px; border-top: 1.5px solid var(--rule); display: flex; gap: 14px; align-items: center; }
.avg-home .about .a-sig .av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; }
.avg-home .about .a-sig .av img { width: 100%; height: 100%; object-fit: cover; }
.avg-home .about .a-sig b { display: block; font-family: var(--display); font-weight: var(--display-w-2); font-size: 15px; color: var(--ink); letter-spacing: .005em; }
.avg-home .about .a-sig span { font-family: var(--meta); font-size: 11px; color: var(--ink-3); font-weight: var(--meta-w); letter-spacing: .08em; text-transform: uppercase; }
.avg-home .about .a-sig a { color: inherit; }

/* ————————————————————————————————————————
   RESPONSIVE — ≤900px
   ———————————————————————————————————————— */
@media (max-width: 900px) {
	.avg-home { --h1-size: 36px; --h2-size: 28px; }
	.avg-home .wrap { padding: 0 var(--wrap-gutter-mb); }
	.avg-home .sec { padding: var(--section-py-mb) 0; }

	.avg-home .hero { padding: 36px 0 56px; }
	.avg-home .hero-grid { grid-template-columns: 1fr; gap: 32px; }
	.avg-home .hero-copy { padding-top: 0; }
	.avg-home .hero-slug { margin-bottom: 16px; padding-bottom: 12px; }
	.avg-home .hero-slug .tagline { font-size: 14px; }
	.avg-home .hero h1 { margin-bottom: 16px; letter-spacing: -.02em; }
	.avg-home .hero .lede { font-size: 16.5px; margin-bottom: 22px; }
	.avg-home .lookup { padding: 20px 18px; }
	.avg-home .lookup .lu-input-wrap input { height: 50px; padding: 0 108px 0 42px; font-size: 15px; }
	.avg-home .lookup .lu-input-wrap button { height: 38px; padding: 0 14px; font-size: 13px; }
	.avg-home .hero-visual { padding-top: 0; }
	.avg-home .hero-side-note { margin-top: 14px; }

	.avg-home .sec-head { grid-template-columns: 1fr; gap: 12px; padding-bottom: 14px; margin-bottom: 24px; }
	.avg-home .sec-head .h-right { padding-bottom: 0; }

	.avg-home .signs-table .st-row { grid-template-columns: 36px 1fr; grid-template-rows: auto auto auto auto; gap: 6px 12px; padding: 16px 16px; align-items: baseline; }
	.avg-home .st-row.head { display: none; }
	.avg-home .st-num { grid-column: 1; grid-row: 1; font-size: 11px; align-self: flex-start; padding-top: 4px; }
	.avg-home .st-name { grid-column: 2; grid-row: 1; font-size: 16.5px; }
	.avg-home .st-name .cat { text-align: left; }
	.avg-home .st-desc { grid-column: 2; grid-row: 2; margin-top: 4px; font-size: 13.5px; }
	.avg-home .st-sev { grid-column: 2; grid-row: 3; justify-self: flex-start; margin-top: 6px; }
	.avg-home .st-go { grid-column: 2; grid-row: 4; margin-top: 6px; justify-self: flex-start; }
	.avg-home .signs-legend { gap: 12px; padding: 14px 16px; }
	.avg-home .signs-legend .lg-label { flex-basis: 100%; margin-bottom: 2px; }

	.avg-home .sec-grid-4 { grid-template-columns: 1fr; gap: 16px; }
	.avg-home .sec-tile { padding: 26px 24px 24px; min-height: 0; }
	.avg-home .sec-tile h3 { font-size: 26px; }

	.avg-home .vet-band { padding: 52px 0; }
	.avg-home .vet-inner { grid-template-columns: 1fr; gap: 32px; }
	.avg-home .vet-inner h2 { font-size: 30px; }
	.avg-home .vet-primary, .avg-home .vet-outline { width: 100%; justify-content: center; padding: 13px 18px; font-size: 14px; }
	.avg-home .vet-card { padding: 24px 20px; }

	/* Mobile idx-tabs: horizontally scrollable so "Species care" doesn't
	   orphan on a second line (critic #8). Wave 2 UX S-R1: the scroll had
	   no affordance — strip read as "already complete." Fix: the
	   .idx-tabs-wrap wrapper carries a right-edge fade pseudo-element
	   pointing at the hidden overflow, and the inner .idx-tabs gets a
	   ~44px right-side padding so the next tab (e.g. "Species care")
	   peeks past the fade. */
	.avg-home .idx-tabs-wrap { position: relative; }
	.avg-home .idx-tabs-wrap::after {
		content: ""; position: absolute; top: 0; right: 0; bottom: 0;
		width: 42px; pointer-events: none; border-radius: 0 4px 4px 0;
		background: linear-gradient(to right, rgba(250, 246, 240, 0), var(--cream) 88%);
	}
	.avg-home .idx-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-right: 44px; }
	.avg-home .idx-tabs::-webkit-scrollbar { display: none; }
	.avg-home .idx-tabs button { padding: 8px 14px; font-size: 13px; flex: 0 0 auto; white-space: nowrap; }
	.avg-home .idx-col { padding: 22px 20px 24px; }
	.avg-home .idx-col ul { column-count: 2; column-gap: 24px; }
	/* "All" panel: stack the four groups on mobile. */
	.avg-home .idx-all-grid { grid-template-columns: 1fr; }
	.avg-home .idx-all-group { border-right: none; border-bottom: 1px solid var(--hair); }
	.avg-home .idx-all-group:last-child { border-bottom: none; }

	.avg-home .new-grid { grid-template-columns: 1fr; gap: 16px; }
	.avg-home .new-lead h3 { font-size: 23px; }
	.avg-home .new-card h3 { font-size: 20px; }

	/* Shorter mobile placeholder — original truncates mid-word at 375
	   (UX W5). JS below swaps the placeholder text on narrow viewports. */
	.avg-home .lookup .lu-input-wrap input::placeholder { font-size: 14px; }

	.avg-home .about-inner { grid-template-columns: 1fr; gap: 32px; }
	.avg-home .about-mark { max-width: 300px; margin: 0 auto; }
	.avg-home .about h2 { font-size: 28px; }
	.avg-home .about p { font-size: 16px; }
}

/* Narrow-phone collapse for the reference-index panel (375px hits this).
   (Fix pass 2026-08-18 defect #2 — 4→2→1 collapse.) */
@media (max-width: 599px) {
	.avg-home .idx-col ul { column-count: 1; column-rule: none; }
}


/* ================================================================
   AMENDMENT 3 — BLEED LAW (owner ruling 2026-08-20)
   Homepage per-surface audit (spec §3.3): hero, vet-band, new-band
   are the color-banded surfaces. The vet-band already bleeds. The
   hero and new-band background grounds live on the outer container;
   this block guarantees they run to viewport edge while content
   stays in .wrap. Tablet homepage-hero bug (768): hero content used
   to narrow while vet-band bled — hero now bleeds too at ≤900px.
   ================================================================ */

/* Homepage banded outer containers — no max-width, bg fills viewport. */
.avg-home .hero,
.avg-home .vet-band,
.avg-home .new-band {
	width: 100%;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Content columns inside those bands live in .wrap. */
.avg-home .hero > .wrap,
.avg-home .hero .hero-grid,
.avg-home .vet-band > .wrap,
.avg-home .vet-band .vet-inner,
.avg-home .new-band > .wrap {
	max-width: var(--wrap);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wrap-gutter-dt);
	padding-right: var(--wrap-gutter-dt);
	box-sizing: border-box;
}
@media (max-width: 900px) {
	.avg-home .hero > .wrap,
	.avg-home .hero .hero-grid,
	.avg-home .vet-band > .wrap,
	.avg-home .vet-band .vet-inner,
	.avg-home .new-band > .wrap {
		padding-left: var(--wrap-gutter-mb);
		padding-right: var(--wrap-gutter-mb);
	}
	/* Tablet-hero bleed fix (spec §3.3 tablet bug): the hero cream
	   ground bleeds edge-to-edge below 900px so it never reads as
	   a narrow content box next to bled neighbors. */
	.avg-home .hero { padding: 36px 0 56px !important; }
}


/* ================================================================
   FOUNDER STRIP (owner ruling 2026-08-20 walkthrough item #8)
   Replaces the oversized "Why this site exists" band. Slim strip:
   ~64px illustrated portrait, one line of copy, "Read the full
   story →" link. Neutral --paper ground, no H2, aside role, small
   visual weight. The vet-band above still carries the gated "avian
   vet" H2 — this strip is deliberately understated.
   ================================================================ */
.avg-home .av-founder-strip {
	background: var(--paper);
	border-top: 1px solid var(--hair);
	padding: 24px 0;
}
.avg-home .av-founder-strip__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--wrap-gutter-dt);
	display: flex;
	align-items: center;
	gap: 20px;
}
.avg-home .av-founder-strip__portrait {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	border: 1.5px solid var(--rule);
	background: var(--page);
}
.avg-home .av-founder-strip__portrait img,
.avg-home .av-founder-strip__portrait .av-img-slot {
	width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1/1;
}
.avg-home .av-founder-strip__line {
	margin: 0;
	font-family: var(--body);
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--ink-2);
	font-weight: 500;
	flex: 1 1 auto;
}
.avg-home .av-founder-strip__link {
	display: inline;
	margin-left: 8px;
	font-family: var(--display);
	font-weight: var(--display-w-2);
	color: var(--coral-deep);
	white-space: nowrap;
}
.avg-home .av-founder-strip__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 900px) {
	.avg-home .av-founder-strip { padding: 20px 0; }
	.avg-home .av-founder-strip__inner {
		padding: 0 var(--wrap-gutter-mb);
		gap: 16px;
	}
	.avg-home .av-founder-strip__portrait { flex: 0 0 56px; width: 56px; height: 56px; }
	.avg-home .av-founder-strip__line { font-size: 14.5px; }
}
@media (max-width: 480px) {
	.avg-home .av-founder-strip__inner { flex-direction: row; align-items: flex-start; }
	.avg-home .av-founder-strip__line { font-size: 14px; }
}