/*
 * Company page surface (posts in category "minimum", user-page.php).
 * Tokens and the shared components (tokens.css, base.css, components.css)
 * come first; this file only lays out the page and its sections.
 * Company color arrives as custom properties printed in the page head:
 * --c (raw), --c-ink (text on white), --c-fill and --c-on (filled controls).
 * The pattern is the shared .m1n-pat layer from components.css.
 */

*, *::before, *::after { box-sizing: border-box; }
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body.up-page { margin: 0; background: var(--color-canvas); color: var(--color-text); font-size: var(--text-md); line-height: var(--leading-normal); }
.up-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.up-hp { position: absolute; left: -9999px; }
:where(.up, .up-dialog) img { max-width: 100%; display: block; }
:where(.up) a { color: var(--c-ink); }
:where(.up, .up-dialog) button { font: inherit; color: inherit; }
:where(.up, .up-dialog) :where(h1, h2, h3) { color: var(--color-ink); font-family: var(--font-display); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); margin: 0; }
:where(.up, .up-dialog) p { margin: 0; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.i.s14 { width: 14px; height: 14px; } .i.s16 { width: 16px; height: 16px; } .i.s18 { width: 18px; height: 18px; } .i.s22 { width: 22px; height: 22px; }
.i.fill { fill: currentColor; stroke: none; }

.up { --wrap: 1180px; --gut: clamp(16px, 4vw, 40px); --card-r: var(--radius-xl); --soft: color-mix(in oklab, var(--c) 10%, white); --soft-2: color-mix(in oklab, var(--c) 18%, white); --line-c: color-mix(in oklab, var(--c) 22%, var(--color-line)); position: relative; isolation: isolate; min-height: 100vh; overflow-x: clip; }
.up-wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }

/* ---------- name typography: never rewritten, only sized ---------- */
.up-name { text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; font-weight: var(--weight-bold); }
.up-name[data-caps] { letter-spacing: 0; font-weight: 700; }

/* ---------- buttons ---------- */
.ui-btn .i { width: 18px; height: 18px; }
.ui-btn--sm .i { width: 16px; height: 16px; }
/* page icons (.i) inside the shared action tile */
.ui-action .i { width: 20px; height: 20px; color: var(--c-ink); }
.up-link { display: inline-flex; align-items: center; gap: 6px; color: var(--c-ink); font-weight: var(--weight-semibold); font-size: var(--text-base); text-decoration: none; }
.up-link .i { transition: transform var(--duration) var(--ease-out); }
.up-link:hover .i { transform: translateX(3px); }
.up-more { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3); padding: 0; border: 0; background: none; color: var(--c-ink); font-weight: var(--weight-semibold); font-size: var(--text-base); cursor: pointer; }
.up-more--sm { font-size: var(--text-sm); margin-top: var(--space-2); }

/* ---------- marks ---------- */
.up-mark { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-control-lg); background: var(--c-fill); color: var(--c-on); font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 8px 18px -10px var(--c-fill); }
.up-mark--logo { background: none; box-shadow: none; padding: 0; }
.up-mark--logo svg { width: 100%; height: 100%; }
.up-avatar { display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--soft-2); color: color-mix(in oklab, var(--c-ink) 75%, black); font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.up-avatar--sm { width: 36px; height: 36px; font-size: 13px; }

/* ---------- status ---------- */
.up-status { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 10px; border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--ring); font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.up-status b { color: var(--color-ink); font-weight: var(--weight-semibold); }
.up-status i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); }
.up-status.is-open i { background: var(--color-success); }
.up-status.is-open i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--color-success); opacity: 0; animation: up-ping 2.4s var(--ease-out) infinite; }
.up-status.is-soon i { background: var(--color-warning); }
@keyframes up-ping { 0% { transform: scale(.6); opacity: .7; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
.up-rate { display: inline-flex; align-items: center; gap: 6px; color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; }
.up-rate .i { width: 16px; height: 16px; color: var(--color-star); }
.up-rate span { color: var(--color-muted); }
.up-rate:hover span { color: var(--c-ink); }

/* ---------- notice ---------- */
.up-notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--color-text); box-shadow: var(--shadow-sm); }
.up-notice .i { flex: none; width: 36px; height: 36px; margin: -6px 0 -6px -4px; padding: 8px; border-radius: var(--radius-control); background: var(--soft); color: var(--c-ink); }
.up-notice b { text-wrap: balance; display: block; color: var(--color-ink); font-weight: var(--weight-semibold); }
.up-notice span { font-size: var(--text-base); }


/* ---------- sections ---------- */
.up-sec__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-6); }
.up-sec__h h2 { font-size: clamp(1.5rem, 1.1rem + .8vw, 1.75rem); font-weight: 700; }
.up-count { color: var(--color-muted); font-size: var(--text-base); }
.up-lead { color: var(--color-text); font-size: var(--text-lg); line-height: var(--leading-snug); }
.up-note, .up-src { margin-top: var(--space-4); color: var(--color-muted); font-size: var(--text-sm); }

/* reveal: sections rise in once, children follow with a short stagger */
.up.is-ready :is(.up-sec, .up-cta, .up-ad) { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.up.is-ready :is(.up-sec, .up-cta, .up-ad).is-in { opacity: 1; transform: none; }
.up.is-ready .up-sec :is(.up-item, .up-post, .up-review, .up-people > li, .up-ph) { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out) var(--stagger, 120ms), transform .6s var(--ease-out) var(--stagger, 120ms), box-shadow var(--duration) var(--ease-out); }
.up-sec :is(.up-item, .up-post, .up-review, .up-people > li, .up-ph, .up-similar__row > li):nth-child(2) { --stagger: 190ms; }
.up-sec :is(.up-item, .up-post, .up-review, .up-people > li, .up-ph, .up-similar__row > li):nth-child(3) { --stagger: 260ms; }
.up-sec :is(.up-item, .up-post, .up-review, .up-people > li, .up-ph, .up-similar__row > li):nth-child(4) { --stagger: 330ms; }
.up-sec :is(.up-item, .up-post, .up-review, .up-people > li, .up-ph, .up-similar__row > li):nth-child(n+5) { --stagger: 400ms; }
.up.is-ready .up-sec.is-in :is(.up-item, .up-post, .up-review, .up-people > li, .up-ph) { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .up.is-ready :is(.up-sec, .up-cta, .up-ad), .up.is-ready .up-sec :is(.up-item, .up-post, .up-review, .up-people > li, .up-ph) { opacity: 1; transform: none; transition: none; }
}

/* data sits in a quiet card, the heading stays on the canvas like every section */
.up-panel { padding: clamp(16px, 2.4vw, 24px); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.up-panel > .up-week { margin: -8px; }

/* ---------- prose ---------- */
.up-prose { max-width: 68ch; color: var(--color-text); font-size: var(--text-md); line-height: 1.7; }
.up-prose p + p { margin-top: 1em; }
.up-prose.is-long { max-height: 15.5em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.up-amen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.up-amen li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 10px; border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--ring); font-size: var(--text-base); color: var(--color-ink); }
.up-amen .i { color: var(--c-ink); width: 18px; height: 18px; }

/* ---------- segmented ---------- */

/* ---------- offer ---------- */
.up-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.up-item { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out); view-transition-name: none; }
.up-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.up-item:has(.up-item__link:focus-visible) { outline: var(--focus-ring); outline-offset: 2px; }
.up-item__link { color: inherit; text-decoration: none; }
.up-item__link:focus-visible { outline: none; }
.up-item__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.up-item__media { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); }
.up-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.up-item:hover .up-item__media img { transform: scale(1.04); }
.up-item__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-ink); background: radial-gradient(120% 90% at 100% 100%, var(--soft-2), var(--soft)); }
.up-item__ph .i { width: 30px; height: 30px; stroke-width: 1.3; opacity: .8; }
.up-item__count { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--glass-strong); backdrop-filter: var(--glass-blur); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-ink); }
.up-item__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: var(--space-4) var(--space-5) var(--space-5); }
.up-item__body { min-width: 0; }
.up-item h3 { font-size: var(--text-lg); font-weight: 650; line-height: var(--leading-snug); overflow-wrap: anywhere; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.up-item p { color: var(--color-muted); font-size: var(--text-base); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.up-item__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: auto; padding-top: var(--space-3); }
.up-item__meta span { display: inline-flex; align-items: center; gap: 4px; color: var(--color-muted); font-size: var(--text-sm); }
.up-price { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -.01em; }
.up-price.is-quiet { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--c-ink); }
/* the featured item spreads out only when its section is wide enough */
.up-offer { container-type: inline-size; }
@container (min-width: 760px) {
  .up-items[data-n="1"] { grid-template-columns: minmax(0, 560px); }
  .up-item.is-featured { grid-column: span 2; flex-direction: row; }
  .up-item.is-featured .up-item__media { aspect-ratio: auto; flex: 1.15; min-height: 280px; }
  .up-item.is-featured .up-item__body { flex: 1; justify-content: center; padding: var(--space-8); }
  .up-item.is-featured h3 { font-size: var(--text-2xl); }
  .up-item.is-featured p { -webkit-line-clamp: 4; font-size: var(--text-md); }
}

@media (max-width: 640px) {
  .up-items { grid-template-columns: 1fr; gap: var(--space-3); }
  .up-item { flex-direction: row; align-items: stretch; }
  .up-item__media { flex: none; width: 104px; aspect-ratio: auto; min-height: 104px; }
  .up-item__count { right: 6px; bottom: 6px; }
  .up-item__body { padding: var(--space-3) var(--space-4); gap: 4px; }
  .up-item h3 { font-size: var(--text-md); -webkit-line-clamp: 2; }
  .up-item p { font-size: var(--text-sm); }
  .up-item__meta { padding-top: var(--space-2); }
  .up-price { font-size: var(--text-md); }
}

.up-items[data-n="2"] { grid-template-columns: 1fr 1fr; }
.up-items--list { grid-template-columns: 1fr !important; gap: var(--space-2); }
.up-items--list .up-item { flex-direction: row; align-items: center; }
.up-items--list .up-item__media { width: 72px; height: 72px; min-height: 0; margin: 12px 0 12px 12px; flex: none; aspect-ratio: auto; border-radius: var(--radius-md); }
.up-items--list .up-item__body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.up-items--list .up-item__body > div:first-child, .up-items--list h3 { flex: 1 1 260px; }
.up-items--list .up-item__meta { margin: 0; padding: 0; }
.up-similar .ui-dircard__meta { min-height: 20px; }
.up-showall { display: none; margin-top: var(--space-4); }
@media (max-width: 640px) { .up-offer:not(.is-all) .up-item:nth-child(n+5) { display: none; } .up-offer:not(.is-all) .up-showall { display: inline-flex; } }

/* ---------- item detail ---------- */
.up-detail { display: grid; gap: var(--space-6); }
.up-detail__media { display: grid; gap: var(--space-3); }
.up-detail__main { overflow: hidden; border-radius: var(--radius-lg); background: var(--soft); aspect-ratio: 4 / 3; }
.up-detail__main img { width: 100%; height: 100%; object-fit: cover; view-transition-name: up-detail-img; }
.up-detail__media--empty { display: grid; place-items: center; min-height: 160px; border-radius: var(--radius-lg); background: radial-gradient(120% 90% at 100% 100%, var(--soft-2), var(--soft)); color: var(--c-ink); }
.up-detail__thumbs { display: flex; gap: var(--space-2); }
.up-detail__thumbs button { width: 64px; height: 48px; padding: 0; border: 0; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; opacity: .6; outline-offset: 2px; transition: opacity var(--duration) var(--ease-out); }
.up-detail__thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--c-fill); }
.up-detail__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.up-detail__info { display: flex; flex-direction: column; gap: var(--space-3); }
.up-detail__info .ui-badge { align-self: flex-start; background: var(--soft); color: var(--c-ink); }
.up-detail__title { font-size: var(--text-3xl); overflow-wrap: anywhere; hyphens: auto; }
.up-detail__price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.up-detail__price b { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink); }
.up-detail__price span { display: inline-flex; align-items: center; gap: 6px; color: var(--color-muted); font-size: var(--text-base); }
.up-detail__price span + span::before { content: "·"; margin-right: 6px; color: var(--color-line-strong); }
.up-detail__do { margin-top: var(--space-3); }
@media (max-width: 640px) { .up-detail__do { position: sticky; bottom: calc(-1 * clamp(20px, 3vw, 36px)); margin: var(--space-3) calc(-1 * clamp(20px, 3vw, 36px)) 0; padding: 12px clamp(20px, 3vw, 36px) 16px; background: linear-gradient(transparent, var(--color-surface) 30%); } }
.up-detail__lead { font-size: var(--text-lg); color: var(--color-text); }
.up-detail__note { color: var(--color-muted); font-size: var(--text-sm); }

@media (min-width: 860px) { .up-detail { grid-template-columns: 1.1fr 1fr; align-items: start; } }

/* ---------- gallery ---------- */
.up-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(120px, 16vw, 210px); }
.up-ph { position: relative; display: block; padding: 0; border: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--soft); cursor: zoom-in; grid-column: span 2; }
.up-ph img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.up-ph:hover img { transform: scale(1.05); }
.up-ph img { object-position: 50% 40%; }
.up-grid[data-n="1"] { grid-auto-rows: auto; }
.up-grid[data-n="1"] .up-ph { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.up-grid[data-n="1"] .up-ph.is-tall { grid-column: 1 / span 3; aspect-ratio: 4 / 5; max-width: 420px; }
.up-grid[data-n="2"] .up-ph { grid-column: span 3; grid-row: span 2; }
.up-grid[data-n="3"] .up-ph:first-child { grid-column: span 4; grid-row: span 2; }
.up-grid[data-n="4"] .up-ph { grid-column: span 3; }
.up-grid[data-n="5"] .up-ph:first-child { grid-column: span 2; grid-row: span 2; }
.up-grid[data-n="5"] { grid-template-columns: repeat(4, 1fr); }
.up-grid[data-n="5"] .up-ph:not(:first-child) { grid-column: span 1; }
.up-ph__more { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(11, 34, 53, .52); color: var(--color-on-primary); font-family: var(--font-display); font-size: 28px; font-weight: 700; transition: background var(--duration) var(--ease-out); }
.up-ph:hover .up-ph__more { background: rgba(11, 34, 53, .3); }
.up-ph--video .up-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.up-play .i { width: 64px; height: 64px; padding: 20px; border-radius: 50%; background: var(--glass-strong); backdrop-filter: var(--glass-blur); color: var(--color-ink); box-shadow: var(--shadow-md); transition: transform var(--duration-slow) var(--ease-out); }
.up-ph--video:hover .up-play .i { transform: scale(1.08); }
.up-ph--video.is-playing { display: grid; place-items: center; color: var(--color-muted); cursor: default; }
.up-ph--more { display: grid; place-items: center; background: var(--soft-2); color: var(--c-ink); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; }
@media (max-width: 640px) {
  .up-grid, .up-grid[data-n] { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .up-grid[data-n] .up-ph { grid-column: span 1; grid-row: span 1; }
  .up-grid[data-n] .up-ph:first-child { grid-column: span 2; grid-row: span 2; }
  .up-grid[data-n="2"] .up-ph, .up-grid[data-n="1"] .up-ph { grid-column: span 2; }
  .up-grid[data-n="1"] { grid-auto-rows: auto; }
  .up-grid[data-n="1"] .up-ph { grid-row: auto; }
  .up-grid[data-n="1"] .up-ph.is-tall { max-width: none; aspect-ratio: 4 / 5; max-height: 70svh; }
}

/* ---------- posts ---------- */
.up-timeline { position: relative; display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.up-post { position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-4); align-items: start; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.up-post__date { display: grid; place-items: center; align-content: center; width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--soft); color: color-mix(in oklab, var(--c-ink) 80%, black); line-height: 1; }
.up-post__date b { font-family: var(--font-display); font-size: 22px; }
.up-post__date span { margin-top: 4px; font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.up-post__date--icon { height: 56px; }

.up-post__top { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: var(--text-sm); color: var(--color-muted); }
.up-post__type { color: var(--c-ink); font-weight: var(--weight-semibold); }

.up-post h3 { margin: 4px 0 4px; font-size: var(--text-xl); line-height: var(--leading-snug); overflow-wrap: anywhere; }
.up-post p { color: var(--color-text); font-size: var(--text-base); max-width: 62ch; }
.up-post__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.up-post__when { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-muted); }
.up-post--event .up-post__when, .up-post--offer .up-post__when { color: var(--color-ink); font-weight: var(--weight-semibold); }
.up-post__img { width: 132px; height: 132px; object-fit: cover; border-radius: var(--radius-md); }
@media (max-width: 640px) { .up-post h3 { font-size: var(--text-lg); } .up-post { grid-template-columns: 48px 1fr; padding: var(--space-4); } .up-post__date { width: 48px; } .up-post__img { grid-column: 1 / -1; width: 100%; height: 180px; order: -1; } }

/* ---------- cta ---------- */
.up-cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding: clamp(28px, 5vw, 56px); border-radius: var(--card-r); background: var(--c-fill); color: var(--c-on); box-shadow: 0 24px 48px -32px var(--c-fill); }
.up-cta > .m1n-pat { --pat-ink: var(--c-on); --pat-k: .7; }
.up-cta__txt { position: relative; z-index: 1; flex: 1 1 360px; }
.up-cta h2 { color: var(--c-on); font-size: var(--text-display-2); text-wrap: balance; overflow-wrap: anywhere; }
.up-cta h2[data-len="5"], .up-cta h2[data-len="6"] { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: var(--leading-snug); }
.up-cta h2[data-len="4"] { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.up-cta p { margin-top: var(--space-2); opacity: .86; font-size: var(--text-lg); }
.up-cta .ui-btn { position: relative; z-index: 1; }

/* ---------- team ---------- */
.up-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.up-people li { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
@media (max-width: 640px) { .up-people:has(> li:only-child) { grid-auto-columns: 100%; } .up-people { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gut) * -1) -16px; padding: 4px var(--gut) 20px; scroll-padding-inline: var(--gut); } .up-people > li { scroll-snap-align: start; } }
.up-people img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.up-people b { display: block; color: var(--color-ink); font-weight: var(--weight-semibold); }
.up-people span:not(.up-avatar) { display: block; color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-snug); }

/* ---------- faq ---------- */
.up-acc { display: grid; gap: var(--space-2); }
.up-acc details { border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); interpolate-size: allow-keywords; }
.up-acc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; color: var(--color-ink); font-weight: var(--weight-semibold); }
.up-acc summary::-webkit-details-marker { display: none; }
.up-acc summary .i { color: var(--c-ink); transition: transform var(--duration-slow) var(--ease-out); }
.up-acc details[open] summary .i { transform: rotate(45deg); }
.up-acc details::details-content { height: 0; overflow: clip; transition: height var(--duration-slow) var(--ease-out), content-visibility var(--duration-slow) allow-discrete; }
.up-acc details[open]::details-content { height: auto; }
.up-acc__a { padding: 0 var(--space-5) var(--space-5); color: var(--color-text); max-width: 72ch; }

/* ---------- reviews ---------- */
.up-stars-lg { --stars-size: 22px; }
.up-rsum { display: grid; gap: var(--space-6); align-items: center; margin-bottom: var(--space-6); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.up-rsum__avg { display: grid; justify-items: start; gap: 6px; }
.up-rsum__avg b { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--color-ink); letter-spacing: -.03em; }
.up-rsum__avg span { color: var(--color-muted); font-size: var(--text-base); }
.up-dist { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.up-dist li { display: grid; grid-template-columns: 12px 1fr 28px; gap: 10px; align-items: center; font-size: var(--text-sm); color: var(--color-muted); }
.up-dist progress { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--color-hover); overflow: hidden; }
.up-dist progress::-webkit-progress-bar { background: var(--color-hover); border-radius: 4px; }
.up-dist progress::-webkit-progress-value { background: var(--color-star); border-radius: 4px; }
.up-dist progress::-moz-progress-bar { background: var(--color-star); border-radius: 4px; }
.up-dist em { font-style: normal; text-align: right; }
@media (min-width: 640px) { .up-rsum { grid-template-columns: auto 1fr; gap: var(--space-10); } }
.up-rline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: calc(var(--space-6) * -.5) 0 var(--space-5); }
.up-rline b { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.up-rline span:last-child { color: var(--color-muted); }
.up-revlist { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.up-review { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.up-review__h { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.up-review__h div { flex: 1; min-width: 0; }
.up-review__h b { display: block; color: var(--color-ink); font-weight: var(--weight-semibold); font-size: var(--text-base); }
.up-review__h > div > span, .up-review__h > div > time { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.up-review > p { color: var(--color-text); }
.up-review > p.is-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.up-reply { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-canvas); font-size: var(--text-base); }
.up-reply b { display: block; color: var(--color-ink); font-size: var(--text-sm); margin-bottom: 2px; }
.up-rate-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--glass); box-shadow: var(--ring); }
.up-rate-row > .i { color: var(--color-star); }
.up-rate-row p { flex: 1 1 240px; color: var(--color-text); }
.up-rate-row b { color: var(--color-ink); font-weight: var(--weight-semibold); }
@media (max-width: 640px) { .up-revlist > .up-review:nth-child(n+3) { display: none; } .up-dialog .up-revlist > .up-review { display: block; } }
.up-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.up-empty > div { flex: 1 1 240px; }
.up-empty b { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-xl); }
.up-empty p { color: var(--color-muted); }

/* ---------- hours ---------- */
.up-week { display: grid; gap: 2px; margin: 0; }
.up-week > div { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 10px 14px; border-radius: var(--radius-sm); }
.up-week dt { color: var(--color-ink); display: flex; align-items: center; gap: 8px; }
.up-week dt em { font-style: normal; font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 1px 8px; border-radius: var(--radius-pill); background: var(--soft-2); color: color-mix(in oklab, var(--c-ink) 75%, black); }
.up-week dd { display: grid; grid-template-columns: repeat(2, 7.2em); column-gap: 16px; justify-items: start; margin: 0; color: var(--color-text); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .up-week dd { grid-template-columns: 7.2em; } }
.up-week .is-closed dd { color: var(--color-muted); }
.up-week .is-today { background: var(--soft); }
.up-week .is-today dt, .up-week .is-today dd { font-weight: var(--weight-medium); color: var(--color-ink); }
/* today's row fills with the part of the open interval that has passed */
.up-sec:not(.is-in) .up-week > .is-today { --p: 0 !important; }
.up-week > .is-today { background: linear-gradient(90deg, var(--soft-2) calc(var(--p) * 100%), var(--soft) 0); transition: --p 1.2s var(--ease-out); }
.up-special { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.up-special h3 { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold); letter-spacing: 0; margin-bottom: var(--space-2); }
.up-special ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.up-special li { display: grid; grid-template-columns: max-content 1fr auto; gap: var(--space-3); padding: 6px 0; font-size: var(--text-base); color: var(--color-text); }
.up-special b { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.up-special em { font-style: normal; font-weight: var(--weight-semibold); }

/* ---------- location ---------- */
.up-map { position: relative; overflow: hidden; height: 260px; border-radius: var(--radius-lg); background: var(--map-canvas); box-shadow: var(--shadow-sm); }
.up-map__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.up-pin { position: absolute; left: 50%; top: 48%; translate: -50% -50%; display: grid; place-items: center; }
.up-pin .up-mark { position: relative; width: 44px; height: 44px; font-size: 15px; border-radius: var(--radius-control-lg); box-shadow: 0 0 0 4px var(--color-surface), var(--shadow-md); }
.up-pin i { position: absolute; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--c) 26%, transparent), transparent 70%); animation: up-halo 3s var(--ease-out) infinite; }
@keyframes up-halo { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.up-map__load { position: absolute; right: 12px; bottom: 12px; }
.up-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.up-addr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.up-addr > div { display: flex; gap: var(--space-3); color: var(--color-ink); }
.up-addr > div .i { color: var(--c-ink); margin-top: 2px; }
.up-addr address { font-style: normal; line-height: var(--leading-snug); }

/* ---------- contact ---------- */
.up-contact__grid { display: grid; gap: var(--space-8); }
@media (min-width: 960px) { .up-contact__grid { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.5fr); align-items: start; } .up-contact__side { position: sticky; top: 110px; } }
.up-contact__grid.is-form-only { display: block; }
.up-direct { display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.up-direct li { position: relative; display: flex; align-items: center; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); }
.up-direct li:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.up-direct a { display: flex; flex: 1; min-width: 0; align-items: center; gap: var(--space-3); padding: 12px 14px; color: var(--color-ink); text-decoration: none; }
.up-direct a > .i { width: 40px; height: 40px; padding: 10px; border-radius: var(--radius-md); background: var(--soft); color: var(--c-ink); }
.up-direct small { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.up-direct b { display: block; font-weight: var(--weight-semibold); }
.up-break { overflow-wrap: anywhere; }
.up-form { position: relative; display: grid; gap: var(--space-4); padding: clamp(20px, 3vw, 32px); border-radius: var(--card-r); background: var(--glass-strong); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-md); }
.up-form.shake { animation: up-shake .4s var(--ease-out); }
@keyframes up-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.up-seg--form > label > span { gap: 6px; height: 36px; }
.up-seg--form em { font-style: normal; }
.up-row { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .up-row { grid-template-columns: 1fr 1fr; } }
.up-field { position: relative; display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.up-field > span, .up-field > legend { color: var(--color-ink); font-size: var(--text-sm); font-weight: var(--weight-semibold); padding: 0; }
.up-field em { color: var(--color-muted); font-style: normal; font-weight: var(--weight-regular); }
.up-field .ui-input { width: 100%; font-size: var(--text-md); transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); }
.up-field .ui-input:focus { border-color: var(--c-ink); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c) 18%, transparent); outline: none; }
.up-field textarea.ui-input { height: auto; min-height: 132px; padding-top: 12px; resize: vertical; line-height: var(--leading-normal); }
.up-field.is-bad .ui-input { border-color: var(--color-danger); }
.up-field.is-ok .ui-input { border-color: color-mix(in oklab, var(--color-success) 55%, var(--color-line-strong)); }
.up-field__err { color: var(--color-danger); font-size: var(--text-sm); }
.up-counter { justify-self: end; color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.up-parts > div { display: flex; flex-wrap: wrap; gap: 6px; }
.up-parts .ui-chip:has(input:checked) { background: var(--c-fill); color: var(--c-on); border-color: transparent; }
.up-check { display: flex; gap: 10px; align-items: flex-start; color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-snug); cursor: pointer; }
.up-check input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--c-fill); }
.up-check.is-bad input { outline: 2px solid var(--color-danger); outline-offset: 2px; }
.up-check + .up-field__err { margin-top: -8px; }
.up-err { color: var(--color-danger); font-size: var(--text-sm); min-height: 0; }
.up-err:empty { display: none; }
.up-hint { display: flex; gap: 8px; align-items: flex-start; color: var(--color-muted); font-size: var(--text-sm); }
.up-hint .i { flex: none; margin-top: 1px; }
.up-inq { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px; padding: 10px 8px 10px 14px; border-radius: var(--radius-md); background: var(--soft); color: var(--color-ink); font-size: var(--text-sm); animation: up-pop .4s var(--ease-out); }
.up-inq > .i { margin-top: 2px; color: var(--c-ink); }
.up-inq span { display: grid; min-width: 0; color: var(--color-muted); }
.up-inq b { color: var(--color-ink); font-size: var(--text-base); text-wrap: balance; overflow-wrap: anywhere; }
.up-sm { display: none; }
@media (max-width: 420px) { .up-lg { display: none; } .up-sm { display: inline; } }
.up-appt { display: grid; gap: var(--space-4); animation: up-pop .4s var(--ease-out); }
@keyframes up-pop { from { opacity: 0; transform: translateY(-6px); } }
.up-submit { position: relative; justify-self: start; min-width: 220px; }
.up-submit.is-busy { color: transparent; pointer-events: none; }
.up-submit.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--c-on) 35%, transparent); border-top-color: var(--c-on); animation: ui-spin .7s linear infinite; }
.up-form { interpolate-size: allow-keywords; transition: height .35s var(--ease-out); }
.up-form.is-sent > :not(.up-done) { display: none; }
.up-done { scroll-margin-top: 90px; display: grid; place-content: center; justify-items: center; gap: var(--space-2); padding: var(--space-8); text-align: center; border-radius: inherit; opacity: 0; transform: scale(.98); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.up-done.is-in { opacity: 1; transform: none; }
.up-done b { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-2xl); }
.up-done p { color: var(--color-muted); max-width: 36ch; margin-bottom: var(--space-3); }
.up-done__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--space-2); border-radius: 50%; background: var(--color-success-soft); color: var(--color-success); }
.up-done__icon .i { width: 30px; height: 30px; stroke-width: 2.2; stroke-dasharray: 24; stroke-dashoffset: 24; }
.up-done.is-in .up-done__icon { animation: up-pop-in .5s var(--ease-out); }
.up-done.is-in .up-done__icon .i { animation: up-draw .5s var(--ease-out) .25s forwards; }
@keyframes up-pop-in { from { transform: scale(.6); opacity: 0; } }
@keyframes up-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .up-done__icon .i { stroke-dashoffset: 0; } }
.up-rate-dlg .up-done { position: static; opacity: 1; transform: none; }

/* ---------- company ---------- */
.up-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4) var(--space-6); margin: 0; }
.up-dl dt { color: var(--color-muted); font-size: var(--text-sm); }
.up-dl dd { margin: 2px 0 0; color: var(--color-ink); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.up-company__social { margin-top: var(--space-5); }
.up-company__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.up-social { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.up-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--ring); color: var(--color-ink); transition: color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); }
.up-social a:hover { color: var(--c-ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ---------- ads: clearly outside the company's content ---------- */
.up-ad { padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.up-ad__label { display: block; margin: 0 0 var(--space-3); color: var(--color-muted); font-size: var(--text-xs); }
/* the two creatives sit side by side on larger screens and stack on phones,
   each whole at its own aspect ratio, never cropped */
.up-ad__row { display: grid; gap: var(--space-3); justify-items: start; align-items: start; }
@media (min-width: 641px) { .up-ad__row { grid-template-columns: repeat(2, minmax(0, 400px)); } }
.up-ad__item { display: block; width: 100%; max-width: 400px; border-radius: var(--radius-md); overflow: hidden; text-decoration: none; }
.up-ad__item img, .up-ad__item video { display: block; width: 100%; height: auto; }

/* ---------- footer ---------- */
.up-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-8) 0 calc(var(--space-8) + env(safe-area-inset-bottom)); color: var(--color-muted); font-size: var(--text-sm); }
.up-made { display: inline-flex; align-items: center; gap: 8px; color: var(--color-muted); text-decoration: none; }
.up-made img { height: 18px; width: auto; }
.up-foot nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.up-foot nav a { color: var(--color-muted); text-decoration: none; }
.up-foot nav a:hover { color: var(--color-ink); }

/* ---------- dialogs ---------- */
body.is-locked { overflow: hidden; }
.up-dialog { width: min(100% - 32px, 960px); max-height: calc(100dvh - 48px); padding: clamp(20px, 3vw, 36px); border: 0; border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); overflow: auto; overscroll-behavior: contain; animation: up-dlg-in .38s var(--ease-out); }
.up-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(6px); animation: up-fade .3s var(--ease-out); }
.up-dialog.is-out { animation: up-dlg-out .22s var(--ease-out) forwards; }
.up-dialog.is-out::backdrop { animation: up-fade .22s reverse forwards; }
@keyframes up-dlg-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes up-dlg-out { to { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes up-fade { from { opacity: 0; } }
.up-sheet--rate { width: min(100% - 32px, 460px); }
.up-sheet h2 { font-size: var(--text-3xl); margin-bottom: var(--space-5); }
@media (max-width: 640px) {
  .up-dialog { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; animation-name: up-sheet-in; }
  .up-dialog.is-out { animation-name: up-sheet-out; }
  @keyframes up-sheet-in { from { transform: translateY(100%); } }
  @keyframes up-sheet-out { to { transform: translateY(100%); } }
}
.up-rate-dlg { display: grid; gap: var(--space-3); text-align: center; }
.up-rate-dlg h2 { font-size: var(--text-2xl); margin: 0; overflow-wrap: anywhere; }
.up-rate-dlg > p { color: var(--color-muted); }
.up-rate-dlg .up-field { text-align: left; }
.up-starpick { display: flex; justify-content: center; gap: 4px; margin-top: var(--space-2); }
.up-starpick button { width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: var(--radius-md); background: none; color: var(--color-line-strong); cursor: pointer; transition: transform var(--duration) var(--ease-out), color var(--duration-fast); }
.up-starpick .i { width: 36px; height: 36px; }
.up-starpick button.is-hover, .up-starpick button.is-on { color: var(--color-star); }
.up-starpick button.is-on { animation: up-pop-in .35s var(--ease-out); }
.up-starpick button:hover { transform: scale(1.1); }
.up-starpick__t { min-height: 1.5em; color: var(--color-ink); font-weight: var(--weight-semibold); }
.up-rate-dlg .up-hint { justify-content: center; }
/* lightbox: the photo on a dark full screen layer, always whole on screen */
.up-dialog.up-lb { inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--color-on-primary); overflow: hidden; animation: up-fade .3s var(--ease-out); }
.up-dialog.up-lb.is-out { animation: up-fade .2s var(--ease-out) reverse forwards; }
.up-lb::backdrop { background: rgba(11, 34, 53, .9); backdrop-filter: blur(10px); }
.up-lb .up-dialog__x, .up-lb__nav { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-control-lg); background: rgba(11, 34, 53, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: var(--color-on-primary); cursor: pointer; transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); }
.up-lb .up-dialog__x { top: 16px; right: 16px; }
.up-lb .up-dialog__x:hover, .up-lb__nav:hover { background: rgba(11, 34, 53, .8); }
.up-lb :focus-visible { outline: 2px solid var(--color-on-primary); outline-offset: 3px; }
.up-lb__fig { position: absolute; inset: 72px 88px 64px; margin: 0; display: flex; align-items: center; justify-content: center; }
.up-lb__fig img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); view-transition-name: up-lb-img; touch-action: pan-y; user-select: none; }
.up-lb__bar { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; pointer-events: none; }
.up-lb__bar [data-lb-n] { padding: 4px 12px; border-radius: var(--radius-pill); background: rgba(11, 34, 53, .55); font-size: var(--text-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.up-lb__nav { top: 50%; translate: 0 -50%; }
.up-lb__nav[data-prev] { left: 20px; }
.up-lb__nav[data-next] { right: 20px; }
.up-lb__nav:active { transform: scale(.94); }
.up-lb.is-single .up-lb__nav, .up-lb.is-single .up-lb__bar { display: none; }
@media (max-width: 767px) {
  .up-lb__fig { inset: 68px 8px 84px; }
  .up-lb__nav { top: auto; bottom: 16px; translate: none; }
  .up-lb__nav[data-prev] { left: 16px; } .up-lb__nav[data-next] { right: 16px; }
  .up-lb__bar { bottom: 28px; }
}
::view-transition-old(up-lb-img), ::view-transition-new(up-lb-img) { animation-duration: .35s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
[data-dir="next"]::view-transition-old(up-lb-img) { animation-name: up-out-l; }
.up-toast { position: fixed; left: 50%; bottom: 96px; z-index: var(--z-toast); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-on-primary); font-size: var(--text-sm); font-weight: var(--weight-semibold); box-shadow: var(--shadow-lg); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-out), transform .35s var(--ease-out); }
.up-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- call card (desktop: tel: has no phone) ---------- */
.up-sheet--call { width: min(100% - 32px, 420px); text-align: center; }
.up-callcard { display: grid; justify-items: center; gap: var(--space-2); padding-top: var(--space-2); }
.up-callcard__icon .i { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--soft); color: var(--c-ink); }
.up-callcard p { color: var(--color-muted); }
.up-callcard__num { color: var(--color-ink); font-family: var(--font-display); font-size: clamp(28px, 5vw, 36px); font-weight: 700; letter-spacing: -.01em; text-decoration: none; font-variant-numeric: tabular-nums; }
.up-callcard__do { display: grid; gap: var(--space-2); width: 100%; margin-top: var(--space-3); }

/* ---------- directory band (free plan) ---------- */
/* owner's preview of an unpublished page (preview.php) */
.up-preview { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 10px var(--space-4); background: var(--color-warning-soft); color: var(--color-warning-ink); font-size: var(--text-sm); line-height: 1.4; text-align: center; box-shadow: var(--ring); }
.up-preview .i { flex: none; }
.up-band { position: relative; z-index: 2; padding-top: 10px; }
.up-band__in { display: flex; align-items: center; gap: var(--space-4); height: 52px; padding: 0 8px 0 12px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-glass, var(--ring)); }
.up-band + .b-shell { padding-top: var(--space-4); }
.up-band__logo { display: flex; flex: none; padding: 6px 4px; border-radius: 8px; }
.up-band__logo img { height: 20px; width: auto; }
@media (max-width: 640px) { .up-band__logo img { height: 17px; } }
.up-crumbs { min-width: 0; flex: 1; }
.up-crumbs ol { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; overflow: hidden; white-space: nowrap; font-size: var(--text-sm); }
.up-crumbs li { display: flex; align-items: center; min-width: 0; }
.up-crumbs li + li::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 10px 0 6px; border-top: 1.5px solid var(--color-line-strong); border-right: 1.5px solid var(--color-line-strong); transform: rotate(45deg); }
.up-crumbs a { overflow: hidden; text-overflow: ellipsis; padding: 6px 4px; border-radius: 6px; color: var(--color-muted); text-decoration: none; }
.up-crumbs a:hover, .up-crumbs a.is-last { color: var(--color-ink); }
.up-crumbs a.is-last { font-weight: var(--weight-medium); }
.up-crumbs__back { display: none; }
@media (max-width: 640px) {
  .up-crumbs li:not(:first-child) { display: none; }
  .up-crumbs__back { display: inline; margin: 0 2px 0 -4px; }
  .up-crumbs a { display: inline-flex; align-items: center; color: var(--color-ink); font-weight: var(--weight-medium); }
  .up-band__search span { display: none; }
  .up-band__search { width: 36px; padding: 0; justify-content: center; }
}

/* ---------- similar companies (free plan) ---------- */
.up-similar__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.up-similar .ui-dircard { height: 100%; transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out); }
.up-similar .ui-dircard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.up-similar .ui-dircard__top { height: 112px; }
.up-similar .ui-dircard__name { font-family: var(--font-display); font-size: var(--text-md); font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.up-similar .ui-dircard__name[data-caps] { font-size: var(--text-md); font-weight: 600; letter-spacing: .02em; }
.up-similar .ui-dircard__name a::after { content: ""; position: absolute; inset: 0; }
.up-status--bare { min-height: 0; padding: 0; background: none; box-shadow: none; font-size: var(--text-sm); }
@media (max-width: 640px) { .up-similar__row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gut) * -1) -16px; padding: 4px var(--gut) 20px; scroll-padding-inline: var(--gut); } .up-similar__row > li { scroll-snap-align: start; } }
@media (min-width: 641px) { .up-similar__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.up-similar .ui-dircard__tile .ui-tile { box-shadow: 0 0 0 3px var(--color-surface), var(--shadow-sm); }
.up-similar .ui-dircard__tile > .ui-tile > .m1n-pat { display: none; }

.up-sec { min-width: 0; }

.up-callcard .up-status { margin-top: 2px; }
.up-callcard__alt { color: var(--color-muted); font-size: var(--text-sm); }


/* ==========================================================================
   Layout: the sticky company card and the content beside it
   ========================================================================== */
/* Concept B, "Vizitka" */
.up { background:
  radial-gradient(1100px 600px at 0% -200px, color-mix(in oklab, var(--c) 14%, transparent), transparent 70%),
  radial-gradient(600px 400px at 100% 0, var(--sun), transparent 70%),
  var(--sky); background-repeat: no-repeat; background-color: var(--color-canvas); }
.up.is-sky { background:
  radial-gradient(600px 400px at 100% 0, var(--sun), transparent 70%),
  var(--sky); background-repeat: no-repeat; background-color: var(--color-canvas); }
.b-shell { --side: 400px; display: grid; gap: var(--space-8); padding-top: var(--space-4); }
.up-band + .b-shell { padding-top: var(--space-4); }
@media (min-width: 1024px) { .b-shell { grid-template-columns: var(--side) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; padding-top: var(--space-6); } .up-band + .b-shell { padding-top: var(--space-6); } }
@media (min-width: 1024px) and (max-width: 1199px) { .b-shell { --side: 352px; } }

/* ---------- card ---------- */
.b-card { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8) inset, var(--shadow-lg); animation: b-in .9s var(--ease-out) both; }
@keyframes b-in { from { opacity: 0; transform: translateY(20px); } }
@media (min-width: 1024px) { .b-card { position: sticky; top: 24px; } }
.b-cover { position: relative; height: 150px; overflow: hidden; background:
  radial-gradient(80% 120% at 15% 0%, color-mix(in oklab, white 26%, transparent), transparent 60%),
  linear-gradient(150deg, color-mix(in oklab, var(--c-fill) 72%, white), var(--c-fill)); }
.b-cover > .m1n-pat { --pat-ink: var(--c-on); --pat-k: .8; inset: -120px; animation: up-patmove 60s linear infinite alternate; }
.up-cta > .m1n-pat { inset: -120px; animation: up-patmove 70s linear infinite alternate; }
@keyframes up-patmove { to { transform: translate(90px, 60px); } }
@media (prefers-reduced-motion: reduce) { .b-cover > .m1n-pat, .up-cta > .m1n-pat { animation: none; } }
.is-sky .b-cover { background: linear-gradient(160deg, var(--sky-top), var(--color-brand-soft)); box-shadow: inset 0 0 0 1px rgba(1, 121, 173, .12); }
.is-sky .b-cover > .m1n-pat { --pat-ink: var(--color-primary); --pat-k: 1.2; }
.b-cover.has-img { height: 190px; }
.b-cover img { width: 100%; height: 100%; object-fit: cover; animation: b-zoom 1.6s var(--ease-out) both; }
@keyframes b-zoom { from { transform: scale(1.08); } }
.b-id { position: relative; display: flex; align-items: flex-end; margin: -40px 24px 0; }
.b-mark { position: relative; overflow: hidden; width: 80px; height: 80px; border-radius: 24px; font-size: 28px; box-shadow: 0 0 0 4px var(--color-surface), 0 0 0 5px rgba(11, 34, 53, .06), var(--shadow-md); animation: b-pop .7s var(--ease-out) .25s both; }
.b-mark.up-mark--logo { background: var(--color-surface); }
/* one soft light passes over the mark when the page opens */
.b-mark::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%); background-size: 260% 100%; background-position: 120% 0; animation: b-sheen 1.1s var(--ease-out) .9s both; pointer-events: none; }
@keyframes b-sheen { to { background-position: -60% 0; } }
@keyframes b-pop { from { opacity: 0; transform: translateY(12px) scale(.9); } }
.b-body { display: grid; gap: var(--space-4); padding: var(--space-4) 24px 24px; }
.b-who, .b-do, .b-primary { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.b-who { gap: var(--space-3); }
.b-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; color: var(--color-muted); font-size: var(--text-base); }
.b-meta > span + span { margin-left: -14px; }
.b-meta > span + span::before { content: "·"; margin: 0 8px; color: var(--color-line-strong); }
.b-meta .up-rate { font-size: var(--text-base); }
.b-title { font-size: 34px; line-height: 1.08; letter-spacing: -.025em; }
.b-title[data-len="3"] { font-size: 30px; }
.b-title[data-len="4"] { font-size: 26px; line-height: 1.12; }
.b-title[data-len="5"] { font-size: 22px; line-height: 1.18; }
.b-title[data-len="6"] { font-size: 19px; line-height: 1.22; }
@media (min-width: 1200px) { .b-title[data-len="1"], .b-title[data-len="2"] { font-size: 40px; } }
.b-title[data-caps] { font-weight: 650; letter-spacing: .02em; line-height: 1.15; font-size: 27px; }
.b-title[data-caps][data-len="3"] { font-size: 24px; }
.b-title[data-caps][data-len="4"] { font-size: 21px; }
.b-title[data-caps][data-len="5"], .b-title[data-caps][data-len="6"] { font-size: 18px; line-height: 1.24; letter-spacing: .01em; }
.b-slogan { color: var(--color-text); line-height: var(--leading-snug); text-wrap: pretty; }
.b-title[data-caps][data-len="5"] + .b-slogan, .b-title[data-caps][data-len="6"] + .b-slogan { font-size: 15px; }

/* today: expandable on phones, a link to the full week on desktop */
.b-today { display: block; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--ring); color: inherit; text-decoration: none; interpolate-size: allow-keywords; }
.b-today summary, a.b-today { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; }
.b-today summary > span, a.b-today > span { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
.b-today summary::-webkit-details-marker { display: none; }
.b-today .up-status { padding: 0; min-height: 0; box-shadow: none; background: none; }
.b-today__h { color: var(--color-muted); font-size: var(--text-sm); }
.b-today .i { color: var(--color-muted); transition: transform var(--duration-slow) var(--ease-out); }
.b-today[open] summary > .i { transform: rotate(180deg); }
a.b-today:hover .i { transform: translateX(2px); color: var(--c-ink); }
.b-today::details-content { height: 0; overflow: clip; transition: height var(--duration-slow) var(--ease-out), content-visibility var(--duration-slow) allow-discrete; }
.b-today[open]::details-content { height: auto; }
.b-today dl { margin: 0; padding: 0 12px 10px; display: grid; gap: 2px; font-size: var(--text-sm); }
.b-today dl div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 8px; border-radius: 6px; }
.b-today dt { color: var(--color-muted); text-transform: capitalize; }
.b-today dd { margin: 0; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.b-today .is-today { background: var(--soft); font-weight: var(--weight-medium); }
a.b-today.b-today--d { display: none; }
@media (min-width: 1024px) { .b-today--m { display: none; } a.b-today.b-today--d { display: grid; } }

.b-call { width: 100%; justify-content: flex-start; height: 60px; padding: 0 18px; gap: 14px; }
.b-call .i { width: 22px; height: 22px; }
.b-call span { display: grid; text-align: left; line-height: 1.2; font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.b-call small { font-size: var(--text-xs); font-weight: var(--weight-medium); }
.b-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.b-grid--1 { grid-template-columns: 1fr; } .b-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .b-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.b-lines { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.b-lines:empty { display: none; }
.b-lines li { display: flex; align-items: center; gap: 4px; }
.b-lines a { display: flex; flex: 1; min-width: 0; gap: 10px; padding: 6px 0; color: var(--color-text); text-decoration: none; font-size: var(--text-base); line-height: var(--leading-snug); }
.b-lines .i { flex: none; margin-top: 2px; color: var(--c-ink); }
.b-lines a:hover span { color: var(--c-ink); }
.b-lines .up-copy { width: 32px; height: 32px; margin: 0; opacity: .7; }
.b-lines li:hover .up-copy { opacity: 1; }
.b-social a { width: 40px; height: 40px; }

/* tablets: identity left, actions right, so the card is not a long strip */
@media (min-width: 700px) and (max-width: 1023px) {
  .b-body { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 32px; row-gap: var(--space-3); align-items: start; }
  .b-do { display: contents; }
  .b-who { grid-column: 1; grid-row: 1; }
  .b-do > .b-primary { grid-column: 2; grid-row: 1 / span 3; }
  .b-do > .b-lines { grid-column: 1; grid-row: 2; }
  .b-do > .b-social { grid-column: 1; grid-row: 3; }
  .b-cover.has-img { height: 160px; }
}
/* short desktop screens: the card still fits without inner scrolling */
@media (min-width: 1024px) and (max-height: 860px) {
  .b-cover, .b-cover.has-img { height: 96px; }
  .b-slogan { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .b-social { display: none; }
  .b-body { gap: var(--space-3); padding-bottom: 18px; }
}

/* ---------- main ---------- */
.b-main { min-width: 0; }
.b-tabs { position: sticky; top: 0; z-index: var(--z-header); margin: 0 calc(var(--gut) * -1) var(--space-8); padding: 12px var(--gut) 0; }
.b-tabs__bar { display: flex; gap: 4px; padding: 5px; border-radius: var(--radius-lg); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-sm); }
.b-tabs__in { position: relative; display: flex; flex: 1; min-width: 0; gap: 2px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 16px; }
@media (max-width: 520px) { .b-tabs__write span { display: none; } .b-tabs__write { padding: 0 11px; } }
.b-tabs::before { content: ""; position: absolute; inset: -24px -12px -8px; z-index: -1; background: linear-gradient(var(--color-canvas) 70%, transparent); opacity: 0; transition: opacity var(--duration) var(--ease-out); pointer-events: none; }
.is-scrolled .b-tabs::before { opacity: 1; }
.b-tabs__in::-webkit-scrollbar { display: none; }
.b-tabs__in.is-scroll { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 36px), transparent); }
.b-tabs__in.is-scroll.at-start { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.b-tabs__in.is-scroll.at-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px); mask-image: linear-gradient(90deg, transparent, #000 20px); }
@media (min-width: 1024px) { .b-tabs { margin: 0 0 var(--space-8); padding: 0; background: none; transition: padding var(--duration-slow) var(--ease-out); } .is-scrolled .b-tabs { padding-top: 24px; } }
.b-flow { --flow-gap: clamp(48px, 6vw, 80px); display: grid; gap: var(--flow-gap); }
.b-flow > .up-notice { margin-bottom: calc(var(--space-8) - var(--flow-gap)); }
.b-flow .up-items { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.up-foot { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--color-line); }

/* ---------- dock ---------- */
.b-dock { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: var(--z-header); display: flex; gap: 6px; max-width: 520px; margin-inline: auto; padding: 6px; border-radius: 20px; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-lg); transform: translateY(140%); transition: transform .5s var(--ease-out); }
.dock-on .b-dock { transform: none; }
.form-on .b-dock, html:has(.up-form :focus) .b-dock { transform: translateY(140%); }
.b-dock a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: var(--radius-control-lg); color: var(--color-ink); text-decoration: none; font-weight: var(--weight-semibold); font-size: var(--text-base); }
.b-dock a .i { color: var(--c-ink); }
.b-dock a.is-main { flex: 1.4; background: var(--c-fill); color: var(--c-on); }
.b-dock a.is-main .i { color: inherit; }
@media (min-width: 1024px) { .b-dock { display: none; } }
@media (max-width: 1023px) { .up-foot { padding-bottom: 96px; } }
.b-shell > *, .b-flow > * { min-width: 0; }

/* ---------- map preview: a drawn street grid until the visitor asks for the real map ---------- */
.up-map { background: var(--map-canvas); }
.up-map__art { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 340' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='rgba(1,121,173,.05)'%3E%3Crect x='30' y='20' width='150' height='90' rx='10'/%3E%3Crect x='210' y='30' width='120' height='70' rx='10'/%3E%3Crect x='380' y='10' width='190' height='110' rx='10'/%3E%3Crect x='20' y='150' width='120' height='160' rx='10'/%3E%3Crect x='420' y='170' width='160' height='140' rx='10'/%3E%3Crect x='180' y='220' width='190' height='100' rx='10'/%3E%3C/g%3E%3Cpath d='M0 132h600M160 0v340M390 0v340M0 200c120 0 200-40 300-40s180 50 300 30' fill='none' stroke='%23fff' stroke-width='14' stroke-linecap='round'/%3E%3Cpath d='M455 0c-30 80 40 120 10 200s-60 100-40 140' fill='none' stroke='rgba(6,180,254,.16)' stroke-width='22' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: cover; background-position: center; }
.up-map.is-live .up-pin, .up-map.is-live .up-map__load { display: none; }
.up-mark--logo img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

/* ---------- CTA icon (Premium) ---------- */
.up-cta__icon { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--radius-lg); background: color-mix(in oklab, var(--c-on) 16%, transparent); color: var(--c-on); }
.up-cta__icon .i { width: 26px; height: 26px; }

/* ---------- item page and archive ---------- */
.up-back { display: inline-flex; align-items: center; gap: 6px; margin: var(--space-2) 0 var(--space-5); color: var(--color-muted); text-decoration: none; font-size: var(--text-base); font-weight: var(--weight-medium); }
.up-back:hover { color: var(--c-ink); }
.up-itempage { margin-bottom: clamp(48px, 6vw, 80px); padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-sm); }

/* ---------- edit mode (owner preview in the editor) ---------- */
.up-invite__btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 72px; padding: var(--space-4); border: 1.5px dashed var(--color-line-strong); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--color-surface) 60%, transparent); color: var(--color-muted); font-size: var(--text-base); font-weight: var(--weight-semibold); cursor: pointer; transition: border-color var(--duration) var(--ease-out), color var(--duration), background var(--duration); }
.up-invite__btn:hover { border-color: var(--c-ink); color: var(--c-ink); background: var(--color-surface); }
.is-edit [data-m1n-section] { position: relative; }
.is-edit [data-m1n-section]:not(.up-invite):hover { outline: 2px solid color-mix(in oklab, var(--color-brand) 55%, transparent); outline-offset: 6px; border-radius: var(--radius-lg); cursor: pointer; }
.is-edit.is-visitor .up-invite { display: none; }

/* ---------- like (kept from the previous page; the dashboard counts it): a glass pill on the cover ---------- */
.b-like:hover { color: var(--color-danger); transform: scale(1.04); }
.b-like[aria-pressed="true"] { color: var(--color-danger); cursor: default; transform: none; }
.b-like[aria-pressed="true"] .i { fill: currentColor; }
.b-like.is-pop .i { animation: b-like-pop .5s var(--ease-out); }
@keyframes b-like-pop { 40% { transform: scale(1.35); } }
.b-like [data-like-n]:empty { display: none; }

/* ---------- claim (pages imported from the register) ---------- */
.up-claim { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--glass); box-shadow: var(--ring); }
.up-claim > div { flex: 1 1 260px; }
.up-claim b { display: block; color: var(--color-ink); font-weight: var(--weight-semibold); }
.up-claim p { color: var(--color-muted); font-size: var(--text-base); }
.up-shield { display: flex; align-items: center; gap: 8px; color: var(--color-muted); font-size: var(--text-sm); }
.up-shield .i { width: 16px; height: 16px; }

/* ---------- sub pages (item, archive): the card shrinks to a header below desktop ---------- */
@media (max-width: 1023px) {
  .b-card.is-sub .b-cover, .b-card.is-sub .b-slogan, .b-card.is-sub .b-today, .b-card.is-sub .b-grid, .b-card.is-sub .b-lines, .b-card.is-sub .b-social, .b-card.is-sub .b-meta, .b-card.is-sub .b-like { display: none; }
  .b-card.is-sub { display: flex; align-items: center; gap: 12px; padding: 12px; }
  .b-card.is-sub .b-id { margin: 0; }
  .b-card.is-sub .b-mark { width: 48px; height: 48px; font-size: 17px; border-radius: var(--radius-control-lg); box-shadow: none; }
  .b-card.is-sub .b-body { display: flex; flex: 1; align-items: center; gap: 12px; padding: 0; min-width: 0; }
  .b-card.is-sub .b-who { flex: 1; min-width: 0; }
  .b-card.is-sub .b-title { font-size: var(--text-md); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .b-card.is-sub .b-title a { color: var(--color-ink); text-decoration: none; }
  .b-card.is-sub .b-call { height: 44px; padding: 0 14px; }
  .b-card.is-sub .b-call small { display: none; }
  .b-card.is-sub .b-call span { font-size: var(--text-base); }
  .b-card.is-sub .b-do, .b-card.is-sub .b-primary, .b-card.is-sub .b-actions { display: block; }
}
.b-title a { color: inherit; text-decoration: none; }

/* ---------- dialogs: the close button floats without narrowing the content ---------- */

/* ---------- phones: focused fields stay clear of the dock (WCAG 2.4.11) ---------- */
@media (max-width: 1023px) { html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); } }

/* ---------- target size (WCAG 2.5.8) ---------- */
.up-foot nav a, .up-foot .up-made, .up-link--btn, .b-meta .up-rate { display: inline-flex; align-items: center; min-height: 24px; }
.up-foot nav { row-gap: var(--space-3); }

/* ---------- dialogs: the inner layer scrolls, so the rounded corners stay round ---------- */
.up-dialog { padding: 0; overflow: hidden; }
.up-dialog[open] { display: flex; flex-direction: column; }
.up-dialog:focus, .up-dialog:focus-visible { outline: none; }
.up-dialog__in { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: clamp(20px, 3vw, 36px); scrollbar-width: thin; }
.up-dialog > .up-dialog__x { position: absolute; top: 14px; right: 14px; z-index: 3; margin: 0; float: none; }
.up-dialog__in > :first-child h2, .up-dialog__in > h2:first-child, .up-allrev > h2, .up-rate-dlg > h2 { padding-right: 44px; }
.up-rate-dlg > h2 { padding-left: 44px; }
.up-lb .up-dialog__in { display: contents; }

/* ---------- copy next to data (company numbers, address) ---------- */
.up-dl dd { display: flex; align-items: center; gap: 4px; }
.up-dl dd .up-copy, .up-addr .up-copy { width: 32px; height: 32px; margin: -6px 0; opacity: .7; }
.up-dl dd:hover .up-copy, .up-addr > div:hover .up-copy, .up-copy:focus-visible { opacity: 1; }
.up-addr > div { align-items: flex-start; }

/* ---------- shared buttons in page context ---------- */
.up-copy { flex: none; color: var(--color-muted); }
.b-lines .up-copy { margin: 0; opacity: .7; }
.b-lines li:hover .up-copy { opacity: 1; }
.up-band__search { flex: none; }
@media (max-width: 640px) { .up-band__search span { display: none; } .up-band__search { width: 36px; padding: 0; } }
.b-tabs__write { flex: none; }
.b-tabs__write[aria-current] { background: var(--c-fill); color: var(--c-on); box-shadow: none; }
.b-tabs__in { gap: 4px; }
.b-tabs__in .ui-chip { height: 36px; box-shadow: none; background: transparent; }
.b-tabs__in .ui-chip:hover { background: var(--color-press); box-shadow: none; }
.b-tabs__in .ui-chip[aria-current] { background: var(--c-fill); color: var(--c-on); box-shadow: 0 6px 16px -8px var(--c-fill); }
.b-like { position: absolute; top: 12px; right: 12px; z-index: 2; min-width: 36px; padding: 0 10px; font-variant-numeric: tabular-nums; }
.b-like:has([data-like-n]:empty) { width: 36px; padding: 0; }
.b-like:hover { color: var(--color-danger); }
.up-inq .ui-btn { margin: -4px -2px 0 0; }
.up-dialog > .up-dialog__x { position: absolute; top: 14px; right: 14px; z-index: 3; margin: 0; }
.up-cta__btn { position: relative; z-index: 1; }