/* Home areas: list and mini map (Danny t210u, t211u, t212u). Loaded only on locale home pages. */
.ax-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.ax-grid { display: grid; gap: var(--s-3); align-items: start; }
.ax-map { position: relative; margin: 0; padding: var(--s-1); background: #e9f0ee; border: 1px solid var(--line); border-radius: var(--radius); }
.ax-map > svg { display: block; inline-size: 100%; block-size: auto; }
.ax-gn { fill: #fff; stroke: #14202b; stroke-width: 1.2; stroke-linejoin: round; }
.ax-pt { cursor: pointer; }
.ax-hit { fill: transparent; }
.ax-dot { stroke: #fff; stroke-width: 1.5; transition: transform 0.15s ease; }
.ax-pt text { font-size: 10.6px; font-weight: 600; fill: #14202b; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.ax-lbl-off text { display: none; }
.ax-pt.on text { display: inline; }
.ax-pt:focus { outline: none; }
.ax-ring { fill: none; stroke: #b3006b; stroke-width: 2.5; display: none; }
.ax-pt:focus-visible .ax-ring { display: inline; }
.ax-pt.on .ax-dot { stroke: #14202b; stroke-width: 1.2; transform: scale(1.7); }
.ax-pt.on text { font-weight: 700; }
.ax-inset rect { fill: #fff; stroke: #c9d3d8; }
.ax-kr { fill: none; stroke: #5b6b78; stroke-width: 1; }
.ax-bd { fill: none; stroke: #8a96a0; stroke-width: 0.8; stroke-dasharray: 2 2; }
.ax-se { fill: #b8743f; fill-opacity: 0.35; stroke: #b8743f; stroke-width: 0.6; }
.ax-here { fill: #aa3f34; }
.ax-inset text { font-size: 12px; font-weight: 700; fill: #14202b; }
.ax-credit { margin-block-start: 4px; font-size: var(--fs-sm); color: var(--muted); }
.ax-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.ax-list a { display: flex; align-items: center; gap: 0.6rem; min-block-size: 48px; padding: 0.3rem 0.6rem 0.3rem 0.35rem; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--navy-900); font-weight: 600; text-decoration: none; }
.ax-list a:visited { color: var(--navy-900); }
.ax-list li.on a, .ax-list a:hover { border-color: var(--teal-700); background: var(--teal-50); }
.ax-lm { flex: none; inline-size: 36px; block-size: 36px; border-radius: 8px; }
.ax-list li.on .ax-lm, .ax-list a:hover .ax-lm { outline: 2px solid #14202b; outline-offset: 1px; }
.ax-name { flex: 1; min-inline-size: 0; }
.ax-rd { display: block; font-size: 0.75rem; font-weight: 400; line-height: 1.25; color: var(--muted); }
.ax-n { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-sm); color: var(--teal-700); background: var(--teal-50); border-radius: var(--pill); padding: 0.1rem 0.6rem; }
.ax-slot { margin-block-start: var(--s-1); }
.ax-hint { margin: 0; padding: 0.75rem; font-size: var(--fs-sm); color: var(--muted); }
.ax-open .ax-hint { display: none; }
.ax-card { box-sizing: border-box; padding: 0.75rem 0.85rem 0.35rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--navy-900); }
.ax-card[hidden] { display: none; }
.ax-card-top { display: flex; gap: 0.6rem; align-items: center; margin: 0; }
.ax-card .ax-lm { inline-size: 48px; block-size: 48px; border-radius: 10px; }
.ax-card-name { display: block; font-size: 1.05rem; }
.ax-card-lm { display: block; font-size: var(--fs-sm); color: var(--muted); }
.ax-big { margin: 0.5rem 0; font-size: var(--fs-sm); color: var(--muted); }
.ax-big strong { font-size: 2rem; line-height: 1; color: var(--navy-900); margin-inline-end: 0.2rem; }
.ax-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.ax-chips li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 5px; border-radius: var(--pill); background: var(--teal-50); font-size: 0.8125rem; }
.ax-chips li.ax-st { background: #e6eef5; }
.ax-chips svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ax-card-go { display: flex; justify-content: space-between; align-items: center; margin: 0.35rem 0 0; }
.ax-card-go a { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 700; }
.ax-close { min-inline-size: 44px; min-block-size: 44px; border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--navy-900); cursor: pointer; }
@media (max-width: 55.99rem) { .ax-hint { display: none; } }
@media (min-width: 56rem) { .ax-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ax-list { grid-template-columns: minmax(0, 1fr); gap: 6px; } .ax-list a { gap: 0.45rem; font-size: 0.9375rem; } .ax-list .ax-lm { inline-size: 32px; block-size: 32px; } .ax-n { padding: 0.1rem 0.45rem; } .ax-list { order: -1; } .ax-map { position: sticky; inset-block-start: calc(var(--hdr-h, 64px) + 12px); display: flex; flex-direction: column; } .ax-slot { order: -1; margin-block: 0 var(--s-1); } }
/* QA R3-L2: at desktop widths the card slot sits above the map inside the sticky column, so a card opened by hover or Tab is always in the first screen. */
html[data-contrast='more'] .ax-map { background: #000; border-color: #fff; }
html[data-contrast='more'] .ax-credit, html[data-contrast='more'] .ax-credit a { color: #fff; }
html[data-contrast='more'] .ax-card, html[data-contrast='more'] .ax-list a { background: #000; color: #fff; border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .ax-dot { transition: none; } }

/* Home only rules moved from global.css (QA r2): other pages no longer carry them. */
.super-filter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-3); margin-block: var(--s-3); box-shadow: var(--shadow-2); }
.search-panel .super-filter { margin-block-start: 0; }
@media (min-width: 48rem) { .super-filter { padding: var(--s-4); } }
.super-filter h2 { margin-block-start: 0; font-size: 1.5rem; }
.super-filter label { font-weight: 700; }
.sf-row { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.sf-row input { flex: 1 1 16rem; font: inherit; min-block-size: 52px; padding: 0.5rem 1rem; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg); }
.sf-row input:focus-visible { border-color: var(--teal-700); }
.sf-row .button { min-block-size: 52px; padding-inline: 1.5rem; font-size: 1rem; }
.sf-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; min-block-size: 1rem; }
.sf-chip { font: inherit; min-block-size: 36px; padding: 0.2rem 0.8rem; border: 1px solid var(--teal-700); border-radius: var(--pill); background: var(--teal-50); color: var(--fg); cursor: pointer; }
.sf-status { font-weight: 700; margin-block: var(--s-1); }
.sf-results { padding-inline-start: 1.25rem; }
.spec-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (min-width: 48rem) { .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } }
@media (min-width: 72rem) { .spec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spec-tile { position: relative; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); border: 1px solid var(--line); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.spec-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.spec-media img { aspect-ratio: 4 / 3; inline-size: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.spec-tile:hover .spec-media img { transform: scale(1.04); }
.spec-body { padding: var(--s-2); }
@media (min-width: 48rem) { .spec-body { padding: var(--s-2) var(--s-3) var(--s-3); } }
.spec-name { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
@media (min-width: 48rem) { .spec-name { font-size: 1.25rem; } }
.spec-name a, .spec-name a:visited { color: var(--navy-900); text-decoration: none; }
.spec-count { margin: 0.25rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
.spec-tile:hover .spec-icon-well svg { transform: scale(1.04); }
.trust { display: grid; gap: var(--s-3); align-items: center; margin-block: var(--s-6); background: var(--navy-900); color: #e8edf2; border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 56rem) { .trust { grid-template-columns: 1fr 1.1fr; } }
.trust-media img { inline-size: 100%; block-size: 100%; min-block-size: 14rem; object-fit: cover; }
.trust-body { padding: var(--s-3); }
@media (min-width: 56rem) { .trust-body { padding: var(--s-5) var(--s-5) var(--s-5) 0; } }
.trust h2 { color: #fff; margin-block-start: 0; }
.trust .btn-outline, .trust .btn-outline:visited { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.85); }
.spec-grid > li:last-child:nth-child(odd),
.spec-grid > li:last-child:nth-child(3n+1),
.spec-grid > li:nth-child(7):last-child { grid-column: auto; }
.spec-media img { object-position: 50% 30%; }
.trust { background: var(--teal-50); color: var(--ink); border: 1px solid #d3e4e4; }
.trust h2 { color: var(--navy-900); }
.trust p, .trust li { color: var(--ink); }
.trust .btn-outline, .trust .btn-outline:visited { background: #fff; color: var(--navy-900); border-color: var(--navy-900); }
.trust :focus-visible, .trust .btn:focus-visible { outline-color: var(--focus); }
.trust .check-list li::before { border-color: var(--copper-600); }
.cards .card-with-icon { display: grid; grid-template-columns: 24px 1fr; column-gap: var(--s-2); align-content: start; }
.cards .card-with-icon > .card-icon { grid-row: span 3; color: var(--teal-700); margin-block-start: 0.15rem; }
.cards .card-with-icon > :not(.card-icon) { grid-column: 2; }
.sf-results .sf-meta { display: block; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- QA r2 M5: visual first home ---------- */
/* Hero: a two line headline, no lead, a shorter picture. */
.hero-title { max-inline-size: 20ch; }
@media (min-width: 56rem) { .hero-inner { padding-block: var(--s-5) var(--s-6); } .hero-title { font-size: 2.75rem; line-height: 1.1; } }
@media (max-width: 55.99rem) {
  .hero .hero-media, .hero .hero-media img { block-size: 200px; }
  .hero .hero-shade { background: linear-gradient(180deg, rgb(250 248 243 / 0) 0px, rgb(250 248 243 / 0.2) 100px, rgb(250 248 243 / 0.92) 165px, rgb(250 248 243 / 1) 200px); }
  .hero-inner { padding-block: 150px var(--s-4); }
  .hero-title { font-size: 1.75rem; }
  .hero-actions { margin-block: var(--s-2) var(--s-3); }
}
/* Search: notes behind one small disclosure. */
.sf-about { margin-block-start: var(--s-1); font-size: var(--fs-sm); }
.sf-about summary { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 1rem; border: 1.5px solid var(--line-strong); border-radius: var(--pill); background: var(--surface); cursor: pointer; color: var(--navy-900); font-weight: 600; }
html[data-contrast="more"] .sf-about summary { background: #000; color: #fff; border-color: #fff; }
.sf-about[open] summary { margin-block-end: 0.25rem; }
.super-filter h2 { font-size: 1.25rem; }
@media (max-width: 47.99rem) { .super-filter { padding: var(--s-2); } }
/* Specialties: a row of icon tiles (scrolls sideways on phones, 7 across on wide screens). */
.spec-row { display: flex; gap: 12px; overflow-x: auto; padding-block-end: 6px; scroll-snap-type: x proximity; }
.spec-row > .spec-tile { flex: 0 0 7.25rem; scroll-snap-align: start; text-align: center; border-radius: var(--radius); box-shadow: none; }
.spec-row .spec-icon-well { aspect-ratio: auto; block-size: 72px; }
.spec-row .spec-icon-well svg { width: 2.75rem; height: 2.75rem; }
.spec-row .spec-body { padding: 0.5rem 0.4rem 0.6rem; }
.spec-row .spec-name { font-size: 0.8125rem; font-weight: 600; color: #14202b; }
.spec-row .spec-count { font-size: 0.75rem; margin-block-start: 0.15rem; }
@media (min-width: 56rem) { .spec-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; } .spec-row > .spec-tile { flex: none; } .spec-row .spec-icon-well { block-size: 88px; } .spec-row .spec-name { font-size: 0.9375rem; } }
html[data-contrast='more'] .ax-lm { outline: 2px solid #fff; outline-offset: 1px; }
/* QA R2-L1: at 56rem and up the list is one column, taller than the map and card column, so that column (map, then
   card slot) stays in view while the list scrolls; the card opens in view. */
@media (min-width: 56rem) { .ax-card .ax-big { margin-block: 0.3rem; } .ax-card .ax-big strong { font-size: 1.6rem; } .ax-slot { min-block-size: 17.25rem; } }
/* The slot holds the tallest card (about 273px), so opening one never moves the map under the pointer. */
