/* Section Line Tire Co. · pages.css (pages agent): #/about, #/blog, #/blog/:slug, #/contact.
   Built from the counter system: panels (radius 12, inset bars), ledgers with row states, one strong image.
   Orange only as the corner flag/notch motif; CTAs stay graphite. */

/* base .page resets the .wrap side padding (same specificity, later); restore it for our views */
.wrap.pg { padding: 28px 32px 0; }
@media (max-width: 760px) { .wrap.pg { padding: 20px 16px 0; } }
.pg .crumbs { margin-bottom: 0; }
.pg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 13px; color: var(--ink-2); }
.pg-meta > * + *::before { content: "·"; margin: 0 8px; color: var(--ink-3); }
.pg-meta a { color: var(--ink); text-decoration: none; font-weight: 600; border-radius: 3px; }
@media (hover:hover) { .pg-meta a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.pg-meta .new { color: var(--ink); font-weight: 600; }

/* ---------- covers (photo, or the code plate when the photo isn't delivered) ---------- */
.pg-cover { position: relative; overflow: hidden; border-radius: var(--r-panel); background: var(--inset); aspect-ratio: 3 / 2; }
.pg-cover img { width: 100%; height: 100%; object-fit: cover; }
.pg-cover-plate { display: flex; flex-direction: column; justify-content: space-between; padding: 22px 24px; box-shadow: inset 0 0 0 1px var(--rule-2); }
.pg-cover-plate::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 16px 16px 0; border-color: transparent var(--or) transparent transparent; }
.pc-line { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pc-code { font-size: clamp(22px, 3.2vw, 44px); line-height: 1.1; color: var(--ink); letter-spacing: -0.01em; }

/* =================================================================
   ABOUT
   ================================================================= */
.ab-h { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; margin: 28px 0 40px; }
.ab-lead { margin: 20px 0 0; font-size: 20px; line-height: 1.45; color: var(--ink-2); max-width: 46ch; }
.ab-facts { margin: 0; border-top: 1px solid var(--rule-2); }
.ab-facts div { display: grid; grid-template-columns: 11.5em 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.ab-facts dt { color: var(--ink-2); }
.ab-facts dd { margin: 0; font-weight: 600; }
.ab-fig { margin: 0; }
.ab-ph { overflow: hidden; border-radius: var(--r-panel); aspect-ratio: 21 / 9; background: var(--inset); }
.ab-ph img { transform: scale(1.22); transform-origin: 30% 62%; filter: saturate(.8); }
.ab-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ab-fig figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.ab-fig figcaption b { color: var(--ink); font-weight: 600; }
.ab-sec.sec { padding-top: 96px; }

/* the three lines: a counter table with row states */
.ab-lt { width: 100%; border-collapse: collapse; font-size: 14px; }
.ab-lt th { text-align: left; padding: 12px 20px 10px; background: var(--inset); border-bottom: 1px solid var(--rule-2); font-size: 11px; line-height: 1.2; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ab-lt td { padding: 16px 20px; border-bottom: 1px solid var(--rule); vertical-align: middle; color: var(--ink-2); }
.ab-lt tr:last-child td { border-bottom: 0; }
.ab-lt .r { text-align: right; }
@media (hover:hover) { .ab-lt tbody tr:hover td { background: var(--hover); } }
.ab-lt .ln a { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); border-radius: var(--r-in); }
.ab-lt .ln b { display: block; font-size: 16px; font-weight: 680; }
.ln-code { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.ln-th { flex: none; width: 56px; height: 56px; border-radius: var(--r-in); background: var(--plate); box-shadow: inset 0 0 0 1px var(--plate-rule); overflow: hidden; display: grid; place-items: center; }
.ln-th img { width: 56px; height: 56px; object-fit: contain; }
.ab-lt .bl { max-width: 36ch; }
.ab-lt .ms-n { display: block; }
.ab-lt .ms a { color: var(--ink); text-decoration: none; line-height: 1.6; }
@media (hover:hover) { .ab-lt .ms a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.ab-lt .un { white-space: nowrap; color: var(--ink); font-weight: 500; }
.ab-lt .n .btn { font-size: 14px; }

.ab-ledger td.d { width: 46%; }
.ab-ledger th.w { width: 22%; text-align: left; vertical-align: top; padding: 22px 24px 24px; border-bottom: 1px solid var(--rule); font-size: 18px; line-height: 1.35; font-weight: 680; letter-spacing: -0.005em; color: var(--ink); background: none; text-transform: none; }
.ab-ledger tbody tr:last-child th { border-bottom: 0; }
.ab-ledger thead th { text-transform: uppercase; }
@media (hover:hover) { .ab-ledger tbody tr:hover td, .ab-ledger tbody tr:hover th { background: var(--hover); } }

.ab-how { margin: 0; border-top: 1px solid var(--rule-2); }
.hw-r { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; padding: 24px 0 26px; border-bottom: 1px solid var(--rule); }
.ab-how dt { font-size: 22px; line-height: 1.25; font-weight: 680; letter-spacing: -0.008em; }
.ab-how dd { margin: 0; max-width: 64ch; }
.ab-how dd p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.ab-how dd p.hw-x { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }

/* why "Section Line": text + the drawn section */
.ab-why { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.ab-why-t h2 { margin-bottom: 20px; }
.ab-why-t p { margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.ab-why-t p b { color: var(--ink); font-weight: 600; }
.ab-src { list-style: none; margin: 24px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.ab-src a { text-decoration: none; border-radius: 3px; }
.ab-src a svg { vertical-align: -1px; margin-left: 2px; }
@media (hover:hover) { .ab-src a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } }
.ab-plate { margin: 0; padding: 28px 28px 20px; background: var(--bg); }
.ab-plate figcaption { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-2); }
.sec-svg, .row-svg { display: block; width: 100%; height: auto; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.ab-plate-row { margin-top: 18px; }
.sec-svg .d-road rect, .row-svg .d-road { fill: var(--inset); }
.sec-svg .d-land, .row-svg .d-land { fill: var(--bg); stroke: var(--rule-2); stroke-width: 1; }
.row-svg .d-land { stroke: none; }
.sec-svg .d-sl path, .row-svg .d-sl { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 10 4 2 4; }
.row-svg .d-edge { fill: none; stroke: var(--rule-2); stroke-width: 1; }
.sec-svg .d-q path { fill: none; stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 3 4; }
.sec-svg .d-lab text { font-size: 14px; font-weight: 600; fill: var(--ink); }
.sec-svg .d-lab text.s { font-weight: 450; fill: var(--ink-2); }
.sec-svg .d-big rect { fill: var(--bg); stroke: var(--ink); stroke-width: 1.25; }
.sec-svg .d-big text { font-size: 17px; font-weight: 680; fill: var(--ink); }
.d-dim path { fill: none; stroke: var(--dim); stroke-width: .9; }
.d-dim path.ext { stroke-width: .75; }
.d-dim text { font-size: 13px; font-weight: 500; fill: var(--ink); }
.d-dim text.b { font-weight: 680; }
.d-dim .knock { fill: var(--bg); }
.row-svg .d-dim .knock { fill: var(--inset); }
.d-fill { fill: var(--dim); }
.sec-svg .d-flag { fill: var(--or); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.sec-svg .d-road-l, .row-svg .d-cap { font-size: 13px; fill: var(--ink-2); }
.row-svg .d-cap { font-weight: 600; fill: var(--ink); }
.row-svg .d-cap.s { font-weight: 450; fill: var(--ink-3); font-size: 12px; }

/* hours and where */
.ab-where { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aw-c { padding: 22px 24px 24px; border-left: 1px solid var(--rule); }
.aw-c:first-child { border-left: 0; }
.aw-c h3, .ct-reach h2 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.aw-c p { margin: 0 0 8px; color: var(--ink-2); max-width: 40ch; }
.aw-big, .cr-big { font-size: 22px !important; line-height: 1.25; font-weight: 680; color: var(--ink) !important; letter-spacing: -0.005em; }
.aw-c a, .ct-reach a { color: var(--ink); text-decoration-color: var(--rule-2); text-underline-offset: 4px; }
.aw-big a, .cr-big a { text-decoration: none; }
.aw-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.aw-acts a.btn-q { color: var(--cta-ink); }
.aw-acts a.btn-s { color: var(--ink); text-decoration: none; }
.hrs { border-collapse: collapse; width: 100%; max-width: 300px; font-size: 15px; }
.hrs th, .hrs td { padding: 7px 0; border-bottom: 1px solid var(--rule); text-align: left; }
.hrs th { font-weight: 450; color: var(--ink-2); width: 6em; }
.hrs td { font-weight: 600; }
.hrs tr:last-child th, .hrs tr:last-child td { border-bottom: 0; }

/* =================================================================
   BLOG INDEX
   ================================================================= */
.bl-h { margin: 28px 0 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.bl-h .t-lead { max-width: 52ch; justify-self: end; }
.bl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 0; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule); }
.bl-bar .fl { font-size: 13px; color: var(--ink-2); margin-right: 6px; }
.bl-list { padding-top: 32px; }
.bl-feat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; padding-bottom: 40px; border-bottom: 1px solid var(--rule-2); cursor: pointer; }
.bl-feat .bf-img, .bl-row .br-img { display: block; border-radius: var(--r-panel); }
.bl-feat .pg-cover img, .bl-row .pg-cover img { transition: transform .4s var(--ease); }
@media (hover:hover) { .bl-feat:hover .pg-cover img, .bl-row:hover .pg-cover img { transform: scale(1.02); } }
.bf-t h2 { margin: 12px 0 14px; font-size: 36px; line-height: 1.1; font-weight: 680; letter-spacing: -0.015em; }
.bf-t h2 a, .br-t h3 a { text-decoration: none; border-radius: 4px; }
@media (hover:hover) { .bf-t h2 a:hover, .br-t h3 a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; } }
.bf-t p { margin: 0 0 24px; font-size: 18px; line-height: 1.45; color: var(--ink-2); max-width: 44ch; }
.bl-rows { list-style: none; margin: 0; padding: 0; }
.bl-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px; gap: 32px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background-color .12s ease, box-shadow .12s ease; }
@media (hover:hover) { .bl-row:hover { background: var(--hover); box-shadow: -12px 0 0 var(--hover), 12px 0 0 var(--hover); } }
.bl-row .pg-cover { border-radius: var(--r-ctl); }
.bl-row .pg-cover-plate { padding: 12px 14px; }
.bl-row .pc-code { font-size: 20px; }
.bl-row .pc-line { font-size: 12px; }
.bl-row .pg-cover-plate::after { border-width: 0 10px 10px 0; }
.br-t h3 { margin: 0 0 6px; font-size: 21px; line-height: 1.25; font-weight: 680; letter-spacing: -0.008em; }
.br-t p { margin: 0; color: var(--ink-2); max-width: 64ch; }
.br-m { justify-content: flex-end; font-size: 14px; padding-top: 5px; }
.bl-row .br-t { padding-top: 2px; }
.pg-meta > * { white-space: nowrap; }

/* =================================================================
   ARTICLE: the reading layout (65–72 ch measure, 18 px body)
   ================================================================= */
.art-h { max-width: 860px; margin: 32px 0 32px 304px; }
@media (max-width: 1180px) { .art-h { margin-left: 248px; } }
.art-h h1 { margin: 14px 0 16px; font-size: 52px; line-height: 1.06; font-weight: 680; letter-spacing: -0.02em; }
.art-lead { margin: 0; font-size: 21px; line-height: 1.45; color: var(--ink-2); max-width: 58ch; }
.art-cover { aspect-ratio: 21 / 9; }
.art-cover.pg-cover-plate { aspect-ratio: auto; min-height: 220px; padding: 28px 32px; }
.art-cover .pc-code { font-size: clamp(32px, 5vw, 72px); }
.art-g { display: grid; grid-template-columns: 240px minmax(0, 640px); gap: 64px; justify-content: start; margin-top: 48px; }
.art-rail { position: relative; }
.rail-in { position: sticky; top: 24px; padding-top: 4px; }
.rail-h { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.toc { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule-2); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1.5px solid transparent; font-size: 14px; line-height: 1.35; color: var(--ink-2); text-decoration: none; border-radius: 0; }
.toc a[aria-current] { color: var(--ink); font-weight: 600; border-left-color: var(--ink); }
@media (hover:hover) { .toc a:hover { color: var(--ink); } }
.rail-sz { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 3px; }
@media (hover:hover) { .rail-sz:hover { text-decoration: underline; text-underline-offset: 3px; } }

.prose { font-size: 18px; line-height: 1.68; color: var(--ink); max-width: 640px; font-variant-numeric: proportional-nums; hanging-punctuation: first; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1em; }
.prose > p:first-child { font-size: 19.5px; line-height: 1.62; }
.prose h2 { margin: 2.2em 0 .55em; font-size: 26px; line-height: 1.2; font-weight: 680; letter-spacing: -0.01em; scroll-margin-top: 24px; }
.prose h2:focus { outline: none; }
.prose b, .prose strong { font-weight: 650; }
.prose a { text-decoration-color: var(--rule-2); text-underline-offset: 4px; }
@media (hover:hover) { .prose a:hover { text-decoration-color: currentColor; } }
.prose .mono { font-size: .86em; padding: 1px 5px; border-radius: var(--r-in); background: var(--inset); box-shadow: inset 0 0 0 1px var(--rule); white-space: nowrap; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding: 0; list-style: none; }
.prose li { position: relative; padding-left: 1.4em; margin: 0 0 .55em; }
.prose ul li::before { content: ""; position: absolute; left: .2em; top: .78em; width: 7px; height: 1.5px; background: var(--ink-2); }
.prose .art-sign { margin-top: 2.4em; padding-top: 1.1em; border-top: 1px solid var(--rule); font-size: 16px; color: var(--ink-2); }
.prose .art-sign a { color: var(--ink); }

/* the pull fact: a large figure on the inset field, the corner flag at top right */
.pull { position: relative; margin: 2.2em 0; padding: 26px 28px 24px; background: var(--inset); border-radius: var(--r-panel); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.pull::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 14px 14px 0; border-color: transparent var(--or) transparent transparent; }
.pull p { margin: 0; }
.pull-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.pull-big { font-size: 56px; line-height: 1; font-weight: 680; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.pull-u { font-size: 16px; font-weight: 600; color: var(--ink-2); }
.pull-b { margin-top: 12px !important; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 58ch; }

/* related sizes */
.art-sizes { margin-top: 88px; }
.as-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 20px; }
.as-h p { margin: 0; color: var(--ink-2); font-size: 16px; max-width: 50ch; justify-self: end; }
.as-h h2:focus { outline: none; }
.as-panel { container-type: inline-size; }

/* next / previous */
.art-np { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 72px; }
.np { display: grid; gap: 8px; align-content: start; padding: 20px 22px; border: 1px solid var(--rule-2); border-radius: var(--r-panel); text-decoration: none; transition: background-color .12s ease, border-color .12s ease; }
.art-np-one { grid-template-columns: 1fr; }
.art-np-one .np-o { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t k" "m k"; align-items: center; text-align: left; justify-items: start; column-gap: 24px; }
.art-np-one .np-o .np-t { grid-area: t; max-width: none; }
.art-np-one .np-o .pg-meta { grid-area: m; justify-content: flex-start; }
.art-np-one .np-o .np-k { grid-area: k; font-size: 14px; color: var(--ink); }
.np-o { text-align: right; justify-items: end; }
.np-o .pg-meta { justify-content: flex-end; }
.np-k { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.np-t { font-size: 19px; line-height: 1.3; font-weight: 680; letter-spacing: -0.005em; max-width: 34ch; }
@media (hover:hover) { .np:not(.np-empty):hover { background: var(--hover); border-color: var(--ink-3); } }
.np:focus-visible { box-shadow: var(--ring); border-radius: var(--r-panel); }

/* =================================================================
   CONTACT
   ================================================================= */
.ct-h { margin: 28px 0 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.ct-h .t-lead { max-width: 50ch; justify-self: end; }
.ct-g { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.ct-form .bar-in h2, .ct-map .bar-in h2 { margin: 0; font-size: 15px; font-weight: 680; }
.ct-reply { margin-left: auto; font-size: 13px; color: var(--ink-2); }
.ct-body { padding: 24px 24px 26px; }
.cf-form { display: grid; gap: 18px; }
.cf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cf-2 > .cf-ref[hidden] { display: none; }
.cf label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.cf label .opt { font-weight: 450; color: var(--ink-3); margin-left: 4px; }
.cf .inp { height: 44px; padding: 0 12px; font-size: 16px; }
.cf .ta { height: auto; min-height: 148px; padding: 10px 12px; line-height: 1.5; resize: vertical; display: block; }
.cf .mono-in { font-family: var(--mono); font-size: 15px; }
.cf-tr { display: grid; gap: 18px; }
.cf-tr > .cf-ref { max-width: calc(50% - 9px); }
.cf-tr > .cf-ref[hidden] { display: none; }
fieldset.cf { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.cf legend { padding: 0; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.cf-seg.q-seg { height: 44px; }
.cf-seg.q-seg span { padding: 0 8px; text-align: center; }
.sel { position: relative; display: block; }
.sel select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.sel::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.25px solid var(--ink-2); border-bottom: 1.25px solid var(--ink-2); transform: rotate(45deg); pointer-events: none; }
.cf .hint { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.cf .msg { margin: 6px 0 0; font-size: 13px; color: var(--err); }
.cf.err .hint { display: none; }
.cf-foot { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding-top: 4px; }
.cf-foot p { margin: 0; font-size: 13px; color: var(--ink-2); max-width: 36ch; }
.cf-sent { padding: 6px 0 4px; }
.cf-sent:focus { outline: none; }
.cs-ok { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--ok); }
.cf-sent h3 { margin: 12px 0 20px; font-size: 24px; line-height: 1.3; font-weight: 680; letter-spacing: -0.008em; max-width: 30ch; }
.cs-r { overflow-wrap: anywhere; }
.cs-dl { margin: 0 0 18px; border-top: 1px solid var(--rule); }
.cs-dl div { display: grid; grid-template-columns: 7em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.cs-dl dt { color: var(--ink-2); }
.cs-dl dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cs-n { margin: 0 0 18px; font-size: 14px; color: var(--ink-2); }
.cs-n a { color: var(--ink); font-weight: 600; }
.cs-acts { display: flex; gap: 8px; flex-wrap: wrap; }

.ct-reach .cr-row { padding: 18px 20px 18px; border-bottom: 1px solid var(--rule); }
.ct-reach .cr-row:last-child { border-bottom: 0; }
.ct-reach p { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); }
.cr-em { font-size: 16px !important; font-weight: 600; }

.ct-map-s { margin-top: 24px; }
.ct-gm { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; text-decoration: none; border-radius: 3px; }
@media (hover:hover) { .ct-gm:hover { text-decoration: underline; text-underline-offset: 3px; } }
.map-g { display: grid; grid-template-columns: 380px minmax(0, 1fr); }
.mf-addr { padding: 24px 24px 26px; border-right: 1px solid var(--rule-2); }
.mf-addr p { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; }
.mf-k { font-size: 13px !important; font-weight: 600; color: var(--ink) !important; margin-bottom: 4px !important; }
.mf-big { font-size: 26px !important; line-height: 1.2; font-weight: 680; color: var(--ink) !important; letter-spacing: -0.01em; }
.mf-addr a:not(.btn) { color: var(--ink); text-underline-offset: 3px; }
.mf-addr .hrs { margin-top: 14px; font-size: 14px; }
.mf-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mf-acts a.btn { text-decoration: none; }
.map-f { position: relative; min-height: 440px; background: var(--bg); overflow: hidden; }
.loc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; font-family: var(--sans); }
.loc-svg .l-bg { fill: var(--bg); }
.loc-svg .lg { fill: none; stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.loc-svg .l-town { fill: var(--inset); stroke: var(--rule-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.loc-svg .l-river { fill: none; stroke: var(--rule-2); stroke-width: 2; stroke-linecap: round; }
.loc-svg .l-hw { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.loc-svg .l-sh rect { fill: var(--bg); stroke: var(--ink); stroke-width: 1.25; }
.loc-svg .l-sh text { font-size: 13px; font-weight: 680; fill: var(--ink); }
.loc-svg .l-flag .pole { stroke: var(--ink); stroke-width: 1.5; }
.loc-svg .l-flag .pen { fill: var(--or); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.loc-svg .l-flag circle { fill: var(--ink); }
.loc-svg .l-town-l { font-size: 20px; font-weight: 680; fill: var(--ink); }
.loc-svg .l-town-s { font-size: 13px; fill: var(--ink-2); }
.loc-svg .l-riv-l { font-size: 12px; font-style: italic; fill: var(--ink-3); }
.loc-svg .l-scale path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.loc-svg .l-scale text, .loc-svg .l-n text { font-size: 13px; font-weight: 600; fill: var(--ink); }
.loc-svg .l-n path { fill: var(--ink); }
.map-ctl { position: absolute; z-index: 3; right: 14px; bottom: 14px; }
.map-ctl .btn { box-shadow: inset 0 0 0 1px var(--rule-2), 0 1px 2px rgba(var(--shadow-rgb), .12); }
.map-wait { position: absolute; inset: 0; z-index: 1; display: none; place-items: center; background: var(--inset); font-size: 14px; color: var(--ink-2); }
.map-f.is-on .map-wait { display: grid; }
.map-f.is-on.is-loaded .map-wait { display: none; }
.map-if { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; opacity: 0; visibility: hidden; transition: opacity .3s ease; background: var(--inset); }
.map-f.is-on.is-loaded .map-if { opacity: 1; visibility: visible; }
:root[data-theme="dark"] .map-if { filter: invert(.9) hue-rotate(180deg) saturate(.6) brightness(.95); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map-if { filter: invert(.9) hue-rotate(180deg) saturate(.6) brightness(.95); } }

.dl-h { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; margin-bottom: 0; }
.pg-dealers .ab-sec.sec:first-of-type { padding-top: 96px; }
.dl-start { margin-top: 28px; }
.dl-start p { margin: 0; color: var(--ink-2); max-width: 52ch; font-size: 14px; }
.dl-start .aw-acts { margin: 0 0 14px; }
.dl-pallet { margin: 0; padding: 20px 24px 16px; }
.dl-pallet figcaption { text-wrap: balance; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 14px; font-weight: 600; }
.dl-pallet figcaption .mono { font-size: 13.5px; font-weight: 500; }
.pal-svg { display: block; width: 100%; max-height: 460px; height: auto; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.pal-svg .p-tire { fill: var(--bg); stroke: var(--ink); stroke-width: 1; }
.pal-svg .p-gr { fill: none; stroke: var(--rule-2); stroke-width: 1; }
.pal-svg .p-deck, .pal-svg .p-blk { fill: var(--inset); stroke: var(--ink-2); stroke-width: 1; }
.pal-svg .p-gnd { stroke: var(--ground); stroke-width: 1; }
.pal-svg .p-flag { fill: var(--or); }
.pal-svg .p-set { font-size: 7px; fill: var(--ink-3); }
.pal-svg .d-dim text { font-size: 8px; }
.pal-svg .d-dim path { stroke-width: .6; }
.pal-svg .p-tire, .pal-svg .p-deck, .pal-svg .p-blk, .pal-svg .p-gr, .pal-svg .p-gnd { vector-effect: non-scaling-stroke; }
.dl-start .btn { text-decoration: none; }
.dl-start .btn-q { color: var(--cta-ink); }


/* =================================================================
   REFLOW
   ================================================================= */
@media (max-width: 1180px) {
  .art-g { grid-template-columns: 200px minmax(0, 640px); gap: 48px; }
  .bl-row { grid-template-columns: 160px minmax(0, 1fr); }
  .br-m { grid-column: 2; grid-row: 1; justify-content: flex-start; align-self: end; font-size: 13px; padding-top: 0; }
  .br-t { grid-column: 2; grid-row: 2; }
  .bl-row .br-img { grid-column: 1; grid-row: 1 / span 2; }
  .ct-g { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 980px) {
  .ab-h, .bl-h, .ct-h, .as-h, .dl-h { grid-template-columns: 1fr; gap: 20px; }
  .bl-h .t-lead, .ct-h .t-lead, .as-h p { justify-self: start; }
  .ab-why { grid-template-columns: 1fr; gap: 32px; }
  .ab-plate { max-width: 620px; }
  .ab-lt .bl { display: none; }
  .art-g { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 32px; }
  .art-rail { display: none; }
  .prose { margin: 0 auto; }
  .art-h { margin-left: auto; margin-right: auto; max-width: 640px; }
  .ct-g { grid-template-columns: 1fr; }
  .map-g { grid-template-columns: 300px minmax(0, 1fr); }
  .bl-feat { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  .ab-h { margin: 20px 0 28px; }
  .ab-lead { font-size: 17px; }
  .ab-facts div { grid-template-columns: 9.5em 1fr; font-size: 14px; }
  .ab-ph { aspect-ratio: 16 / 10; border-radius: var(--r-ctl); }
  .ab-ph img { transform: scale(1.1); transform-origin: 25% 60%; }
  .ab-sec.sec { padding-top: 64px; }
  .ab-lt thead { display: none; }
  .ab-lt, .ab-lt tbody, .ab-lt tr, .ab-lt td { display: block; }
  .ab-lt tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
  .ab-lt tr:last-child { border-bottom: 0; }
  .ab-lt td { padding: 0; border: 0; }
  .ab-lt .ln { grid-column: 1 / -1; }
  .ab-lt .ms { grid-column: 1; font-size: 13.5px; }
  .ab-lt .ms-n { display: inline; }
  .ab-lt .ms-n + .ms-n::before { content: " · "; color: var(--ink-3); }
  .ab-lt .un { grid-column: 1; font-size: 13.5px; }
  .ab-lt .n { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .ab-ledger tbody tr { padding: 18px 16px; }
  .ab-ledger th.w { display: block; padding: 0; border: 0; width: auto; font-size: 17px; }
  .ab-plate { padding: 16px 14px 14px; }
  .sec-svg .d-lab text { font-size: 16px; }
  .sec-svg .d-lab text.s { font-size: 15px; }
  .d-dim text { font-size: 15px; }
  .ab-where { grid-template-columns: 1fr; }
  .aw-c { border-left: 0; border-top: 1px solid var(--rule); padding: 18px 16px 20px; }
  .aw-c:first-child { border-top: 0; }

  .bl-h { margin: 20px 0 20px; }
  .bl-bar { gap: 6px; }
  .bl-list { padding-top: 24px; }
  .bl-feat { padding-bottom: 28px; }
  .bf-t h2 { font-size: 26px; line-height: 1.15; }
  .bf-t p { font-size: 16px; margin-bottom: 18px; }
  .bl-row { grid-template-columns: 96px minmax(0, 1fr); gap: 6px 14px; padding: 16px 0; margin: 0; align-items: start; }
  .bl-row .pg-cover { aspect-ratio: 1; }
  .bl-row .pg-cover-plate { padding: 8px 9px; }
  .bl-row .pc-code { font-size: 13px; }
  .bl-row .pc-line { font-size: 11px; }
  .br-t h3 { font-size: 17px; }
  .br-t p { display: none; }
  .br-m { font-size: 12.5px; align-self: start; }
  .br-m > :last-child { display: none; }

  .art-h { margin: 20px 0 24px; }
  .art-h h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.015em; }
  .art-lead { font-size: 18px; }
  .art-cover { aspect-ratio: 3 / 2; border-radius: var(--r-ctl); margin: 0 -16px; border-radius: 0; }
  .art-cover.pg-cover-plate { min-height: 160px; padding: 20px 16px; }
  .prose { font-size: 17.5px; line-height: 1.66; }
  .prose > p:first-child { font-size: 18.5px; }
  .prose h2 { font-size: 22px; }
  .pull { padding: 20px 18px 18px; }
  .pull-big { font-size: 44px; }
  .art-sizes { margin-top: 64px; }
  .art-np { grid-template-columns: 1fr; margin-top: 48px; }
  .np-o { text-align: left; justify-items: start; }
  .np-o .pg-meta { justify-content: flex-start; }

  .ct-h { margin: 20px 0 24px; }
  .ct-body { padding: 18px 16px 20px; }
  .cf-2 { grid-template-columns: 1fr; }
  .cf-tr > .cf-ref { max-width: none; }
  .cf-seg.q-seg { display: grid; grid-template-columns: 1fr 1fr; height: auto; }
  .cf-seg.q-seg label { min-height: 44px; }
  .cf-seg.q-seg span { min-height: 44px; }
  .hw-r { grid-template-columns: 1fr; gap: 8px; padding: 18px 0 20px; }
  .ab-how dt { font-size: 18px; }
  .ab-how dd p { font-size: 16px; }
  .dl-pallet { padding: 12px 12px 12px; }
  .ct-reply { margin-left: 0; width: 100%; }
  .cf-foot .btn { width: 100%; }
  .map-g { grid-template-columns: 1fr; }
  .mf-addr { padding: 18px 16px 20px; border-right: 0; border-bottom: 1px solid var(--rule-2); }
  .map-f { min-height: 320px; }
  .ct-gm { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-feat .pg-cover img, .bl-row .pg-cover img, .map-if { transition: none; }
}

@media (max-width: 480px) {
  .pal-svg .p-set { display: none; }
  .pal-svg .d-dim text { font-size: 13px; }   /* ≈ 11 px rendered at phone width (viewBox 392 → ~340 px) */
  .dl-pallet .cap-l { display: none; }
}