/* Violations page only. Existing data, shared header and footer are unchanged. */
.vl27 { --vl-green:#153d2c; --vl-line:#d6e1d9; color:#18181b; background:#fff; }
.vl27 .bc-container { width:100%; max-width:none; padding-inline:4.2%; }
.vl27 .bc-hero--violations { height:610px; min-height:610px; padding:0; display:flex; align-items:center; isolation:isolate; background:#153d2c; }
.vl27 .bc-hero__bg { inset:0; background:url('../img/violations-border-collie-20260922.png') center top/cover no-repeat; opacity:1; }
.vl27 .bc-hero__bg:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,29,17,.48),rgba(8,29,17,.16) 45%,transparent 70%); }
.vl27 .bc-hero__content { position:relative; z-index:1; width:100%; max-width:none; margin:auto; padding:40px 4.5%; text-align:left; }
.vl27 .bc-hero h1 { max-width:67%; margin:0 0 14px; font:700 clamp(40px,3.8vw,72px)/1.08 Inter,Arial,sans-serif; letter-spacing:-.025em; color:#fff; }
.vl27 .bc-hero .bc-hero__subtitle { max-width:61%; margin:0; font:400 23px/1.5 Inter,Arial,sans-serif; color:#fff; white-space:normal; }
.vl27 .vl27-stats { padding:22px 0; background:#eff6ef; }
.vl27 .bc-stats-bar { border-radius:0; box-shadow:none; background:transparent; grid-template-columns:repeat(4,minmax(0,1fr)); }
.vl27 .bc-stat-item { padding:0 20px; border-right:1px solid #cbd8ce; }
.vl27 .bc-stat-item:last-child { border:0; }
.vl27 .bc-stat-item__number { font:700 40px/1.05 Inter,Arial,sans-serif; color:#174532; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.vl27 .bc-stat-item__label { display:block; margin-top:5px; color:#18181b; font:400 17px/1.25 Inter,Arial,sans-serif; }
.vl27 .bc-stat-item:nth-child(2) .bc-stat-item__number { color:#aa2139; }
.vl27 .bc-stat-item:nth-child(3) .bc-stat-item__number { color:#975500; }
.vl27 .bc-stat-item:nth-child(4) .bc-stat-item__number { color:#20577a; }
.vl27 .bc-section--lg { padding:28px 0; background:#fff; }
.vl27 .bc-section-header--center { text-align:center; margin:0 0 20px; }
.vl27 .bc-section__title { color:#101b15; font:700 clamp(28px,2.5vw,42px)/1.15 Inter,Arial,sans-serif; letter-spacing:-.025em; margin:0 0 6px; }
.vl27 .bc-section__subtitle { color:#233c30; font:400 18px/1.45 Inter,Arial,sans-serif; margin:0; }
.vl27 .vl27-intro { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:0 0 32px; color:#18181b; }
.vl27 .vl27-intro p { margin:0; font:400 16px/1.55 Inter,Arial,sans-serif; }
.vl27 .vl27-intro p+p { border-left:1px solid var(--vl-line); padding-left:28px; }
.vl27 .bc-table-wrap { border:1px solid #d3ddd6; border-radius:7px; overflow-x:auto; }
.vl27 .bc-table { width:100%; min-width:760px; font:400 14px/1.4 Inter,Arial,sans-serif; background:#fff; }
.vl27 .bc-table th,.vl27 .bc-table td { padding:8px 14px; color:#18181b; border-bottom:1px solid #e0e5e1; border-right:1px solid #e0e5e1; display:table-cell; }
.vl27 .bc-table th { background:#e4eee4; color:#133729; text-transform:none; letter-spacing:0; font-size:14px; font-weight:600; border-bottom:1px solid #cbd8ce; white-space:nowrap; }
.vl27 .bc-table td strong { font-weight:500; }
.vl27 .bc-table th:last-child,.vl27 .bc-table td:last-child { border-right:0; }
.vl27 .bc-table tbody tr:last-child td { border-bottom:0; }
.vl27 .bc-table tbody tr:nth-child(even) { background:#fafcf9; }
.vl27 .bc-table tbody tr:hover { background:#eff5ed; }
.vl27 .bc-table th:first-child,.vl27 .bc-table td:first-child { text-align:center; width:4%; }
.vl27 .bc-table th:nth-child(2),.vl27 .bc-table td:nth-child(2) { white-space:nowrap; width:10%; }
.vl27 .bc-table th:nth-child(4),.vl27 .bc-table td:nth-child(4) { width:12%; }
.vl27 .bc-table .bc-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vl27 .bc-badge { border-radius:3px; padding:3px 7px; font-size:12px; font-weight:500; letter-spacing:0; }
.vl27 .bc-badge--critical { color:#982036; background:#fbe8ec; }
.vl27 .bc-badge--direct { color:#7a4600; background:#fcf0dc; }
.vl27 .bc-badge--noncritical { color:#1f4d70; background:#eaf3f9; }
.vl27 .bc-hiw-grid { gap:24px; }
.vl27 .bc-hiw-card { display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:16px; align-content:start; text-align:left; padding:24px; border:1px solid var(--vl-card-line); border-radius:6px; box-shadow:none; background:var(--vl-card-bg); }
.vl27 .bc-hiw-card:hover { transform:none; box-shadow:none; }
.vl27 .vl27-critical { --vl-card-bg:#fff3f4; --vl-card-line:#f0d9df; --vl-icon:#ad213b; }
.vl27 .vl27-direct { --vl-card-bg:#fff9ee; --vl-card-line:#eee4d4; --vl-icon:#a46306; }
.vl27 .vl27-noncritical { --vl-card-bg:#eef6fc; --vl-card-line:#d7e5ef; --vl-icon:#245d84; }
.vl27 .bc-hiw-card__step { grid-column:1; grid-row:1/3; width:48px; height:48px; margin:0; background:var(--vl-icon); font:700 32px/1 Inter,Arial,sans-serif; }
.vl27 :is(.vl27-critical,.vl27-direct) .bc-hiw-card__step { clip-path:polygon(50% 0,100% 100%,0 100%); border-radius:0; padding-top:10px; }
.vl27 .bc-hiw-card__title { grid-column:2; color:#18181b; font:700 26px/1.2 Inter,Arial,sans-serif; margin:0 0 9px; }
.vl27 .bc-hiw-card__desc { grid-column:2; color:#18181b; font-size:14px; line-height:1.65; margin:0; }
.vl27 .bc-faq { border:1px solid #d8e0da; border-radius:5px; overflow:hidden; }
.vl27 .bc-faq__item { padding:0; border-bottom:1px solid #d8e0da; }
.vl27 .bc-faq__item:last-child { border-bottom:0; }
.vl27 .bc-faq__question { padding:15px 20px; font:400 18px/1.45 Inter,Arial,sans-serif; color:#18181b; }
.vl27 .bc-faq__question:hover { background:#f4f8f2; }
.vl27 .bc-faq__toggle { font:400 27px/1 Inter,Arial,sans-serif; color:#153d2c; }
.vl27 .bc-faq__answer { padding:0 20px 22px; font-size:16px; line-height:1.7; color:#18181b; }
.vl27 .vl27-state-directory { columns:6; column-gap:44px; column-rule:1px solid var(--vl-line); }
.vl27 .vl27-state-link { display:flex; justify-content:space-between; align-items:baseline; gap:12px; break-inside:avoid; padding:8px 0; text-decoration:none; color:#153d2c; font:600 14px/1.4 Inter,Arial,sans-serif; }
.vl27 .vl27-state-link:hover { text-decoration:underline; }
.vl27 .vl27-state-count { font-weight:400; font-variant-numeric:tabular-nums; color:#18181b; }
.vl27 .bc-fstrip { padding:24px 4.2%; background:#edf4ee; }
.vl27 .bc-fstrip__inner { max-width:none; }
.vl27 .bc-fstrip__item { position:relative; padding:4px 24px 4px 72px; border-right:1px solid #cbd8ce; }
.vl27 .bc-fstrip__item:last-child { border:0; }
.vl27 .bc-fstrip__item:before { content:""; position:absolute; left:20px; top:8px; width:36px; height:36px; background:center/contain no-repeat; }
.vl27 .bc-fstrip__item:nth-child(1):before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23153d2c' stroke-width='3'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Cpath d='m24 24 12 12'/%3E%3C/svg%3E"); }
.vl27 .bc-fstrip__item:nth-child(2):before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23153d2c' stroke-width='3'%3E%3Cpath d='m4 9 11-5 11 5 10-5v27l-10 5-11-5-11 5ZM15 4v27M26 9v27'/%3E%3C/svg%3E"); }
.vl27 .bc-fstrip__item:nth-child(3):before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23153d2c' stroke-width='3'%3E%3Cpath d='M9 3h15l8 8v26H9ZM24 3v9h8M15 18h11M15 24h11M15 30h9'/%3E%3C/svg%3E"); }
.vl27 .bc-fstrip__item:nth-child(4):before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%23153d2c'%3E%3Cpath d='M4 27h7v10H4zM16 16h7v21h-7zM28 3h7v34h-7z'/%3E%3C/svg%3E"); }
.vl27 .bc-fstrip__label { color:#10291d; font:700 21px/1.2 Inter,Arial,sans-serif; margin:0 0 5px; }
.vl27 .bc-fstrip__desc { color:#18181b; font-size:13px; line-height:1.5; }
.vl27 .bc-fstrip__item:hover { background:#e1ecdf; }
.vl27 .bc-cta { padding:42px 0; background:#123e2b; color:#fff; text-align:center; }
.vl27 .bc-cta__title { font:700 38px/1.15 Inter,Arial,sans-serif; color:#fff; margin:0 0 10px; }
.vl27 .bc-cta__desc { color:#fff; font:400 18px/1.5 Inter,Arial,sans-serif; margin:0 auto 22px; max-width:none; }
.vl27 .bc-cta .bc-btn { border:1px solid #e2eee3; border-radius:4px; background:transparent; color:#fff; box-shadow:none; padding:12px 24px; font:700 18px/1.4 Inter,Arial,sans-serif; }
.vl27 .bc-cta .bc-btn:after { content:"›"; font:400 30px/.8 Arial,sans-serif; margin-left:14px; }
.vl27 .bc-cta .bc-btn:hover { background:#245b3d; transform:none; }
.vl27 :is(a,button,[tabindex]):focus-visible { outline:3px solid #719770; outline-offset:3px; }
@media(max-width:1100px) {
 .vl27 .bc-hero--violations { height:565px; min-height:565px; }
 .vl27 .vl27-state-directory { columns:3; }
 .vl27 .bc-hiw-grid { gap:16px; }
 .vl27 .bc-hiw-card { padding:18px; grid-template-columns:38px minmax(0,1fr); column-gap:12px; }
 .vl27 .bc-hiw-card__step { width:36px; height:36px; font-size:25px; }
 .vl27 .bc-hiw-card__title { font-size:23px; }
 .vl27 .bc-fstrip__item { padding-left:52px; padding-right:14px; }
 .vl27 .bc-fstrip__item:before { left:6px; width:32px; height:32px; }
 .vl27 .bc-fstrip__label { font-size:19px; }
}
@media(max-width:800px) {
 .vl27 .bc-hero--violations { height:auto; min-height:0; flex-direction:column; }
 .vl27 .bc-hero__content { order:1; padding:44px 28px 22px; }
 .vl27 .bc-hero h1,.vl27 .bc-hero .bc-hero__subtitle { max-width:none; }
 .vl27 .bc-hero h1 { font-size:40px; }
 .vl27 .bc-hero .bc-hero__subtitle { font-size:20px; }
 .vl27 .bc-hero__bg { order:2; position:relative; inset:auto; width:100%; height:360px; flex:none; background-position:70% center; }
 .vl27 .bc-hero__bg:after { background:linear-gradient(180deg,#153d2c,transparent 25%); }
 .vl27 .bc-container { padding-inline:24px; }
 .vl27 .bc-stats-bar { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 0; }
 .vl27 .bc-stat-item:nth-child(2) { border-right:0; }
 .vl27 .bc-stat-item__number { font-size:34px; }
 .vl27 .bc-stat-item__label { font-size:16px; }
 .vl27 .vl27-intro { grid-template-columns:1fr; gap:16px; }
 .vl27 .vl27-intro p+p { border-left:0; padding-left:0; }
 .vl27 .bc-section--lg { padding:26px 0; }
 .vl27 .bc-section__title { font-size:30px; }
 .vl27 .bc-section__subtitle { font-size:17px; }
 .vl27 .bc-hiw-grid { grid-template-columns:1fr; }
 .vl27 .bc-hiw-card { padding:22px; grid-template-columns:44px minmax(0,1fr); }
 .vl27 .bc-fstrip__inner { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 0; }
 .vl27 .bc-fstrip__item:nth-child(2) { border-right:0; }
 .vl27 .bc-faq__question { font-size:17px; padding:14px 16px; }
 .vl27 .bc-faq__answer { padding:0 16px 20px; }
 .vl27 .vl27-state-directory { columns:2; column-gap:32px; }
 .vl27 .bc-cta__title { font-size:32px; }
}
@media(max-width:480px) {
 .vl27 .bc-container { padding-inline:18px; }
 .vl27 .bc-hero__content { padding:38px 22px 18px; }
 .vl27 .bc-hero h1 { font-size:36px; }
 .vl27 .bc-hero__bg { height:300px; }
 .vl27 .bc-fstrip__inner { grid-template-columns:1fr; gap:18px; }
 .vl27 .bc-fstrip__item { border-right:0; }
 .vl27 .vl27-state-directory { column-gap:24px; }
 .vl27 .vl27-state-link { font-size:12px; gap:6px; }
}
/* Phone: each violation code becomes a card instead of a cut-off wide table. */
@media(max-width:640px) {
 .vl27 .bc-table-wrap { border:0; border-radius:0; overflow:visible; }
 .vl27 .bc-table { min-width:0; background:none; }
 .vl27 .bc-table thead { display:none; }
 .vl27 .bc-table tbody { display:grid; gap:10px; }
 .vl27 .bc-table tbody tr { display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:10px; row-gap:6px; padding:12px 14px; background:#fff!important; border:1px solid #d3ddd6; border-radius:7px; }
 .vl27 .bc-table td { display:block!important; width:auto!important; padding:0; border:0!important; text-align:left; }
 .vl27 .bc-table td.vl27-rank { grid-column:1; grid-row:1; font-size:13px; }
 .vl27 .bc-table td.vl27-rank strong:before { content:"#"; }
 .vl27 .bc-table td.vl27-code { grid-column:2; grid-row:1; font-size:15px; }
 .vl27 .bc-table td.vl27-code strong { font-weight:600; color:#133729; }
 .vl27 .bc-table td:nth-child(4) { grid-column:3; grid-row:1; justify-self:end; }
 .vl27 .bc-table td.vl27-desc { grid-column:1/-1; grid-row:2; font-size:14px; line-height:1.45; }
 .vl27 .bc-table td.bc-num { grid-row:3; font-size:13px; white-space:nowrap; }
 .vl27 .bc-table td.bc-num:before { content:attr(data-label) ": "; font-weight:400; }
 .vl27 .bc-table td[data-label="Occurrences"] { grid-column:1/3; }
 .vl27 .bc-table td[data-label="Repeat"] { grid-column:3; justify-self:end; }
}