/* ==========================================================================
   Malta Hands site theme, on top of Bootstrap 5.3.
   Tokens come from the approved layout prototype (.ignore/melhoriasLayout/styles.css):
   Archivo for display type, Figtree for body text, navy/blue/yellow palette.
   Bootstrap is themed through its --bs-* variables, so pages keep their Bootstrap markup.
   Light theme only for now: several pages still hardcode bg-white/text-dark.
   ========================================================================== */

:root {
  --display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bg: #F6F9F8; --surface: #FFFFFF; --surface-2: #E8F2F0;
  --ink: #0C2A47; --ink-2: #4B6074; --line: #D3DFE5;
  --blue: #1557C0; --on-blue: #FFFFFF; --link: #1557C0;
  --yellow: #F4B71B; --on-yellow: #0C2A47;
  --green: #17805F; --coral: #C93B27; --on-coral: #FFFFFF;
  --focus: #1557C0;
  --band: #0C2A47; --on-band: #F2F7FA; --band-2: #A9C0D1;
  --sea: #C7DEEB; --ripple1: #D5E7F1; --ripple2: #E4F1F7;
  --land: #EFC04E; --land-edge: #B98A16;

  /* Bootstrap mapping */
  --bs-body-font-family: var(--body);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-body-color-rgb: 12, 42, 71;
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-2);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--line);
  --bs-border-radius: 10px;
  --bs-border-radius-lg: 14px;
  --bs-link-color: var(--link);
  --bs-link-color-rgb: 21, 87, 192;
  --bs-link-hover-color: #0F4396;
  --bs-link-hover-color-rgb: 15, 67, 150;
  --bs-primary: #1557C0; --bs-primary-rgb: 21, 87, 192;
  --bs-success: #17805F; --bs-success-rgb: 23, 128, 95;
  --bs-danger: #C93B27; --bs-danger-rgb: 201, 59, 39;
  --bs-warning: #F4B71B; --bs-warning-rgb: 244, 183, 27;
  --bs-dark: #0C2A47; --bs-dark-rgb: 12, 42, 71;
  --bs-secondary: #4B6074; --bs-secondary-rgb: 75, 96, 116;
  --bs-primary-text-emphasis: #0F4396;
  --bs-success-text-emphasis: #0F5A43;
  --bs-danger-text-emphasis: #8E2A1C;
  --bs-focus-ring-color: rgba(21, 87, 192, .3);
}

/* ---------- Base ---------- */
html { position: relative; min-height: 100%; }
body { -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; }
body > .site-main { flex: 1 0 auto; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.text-muted { color: var(--ink-2) !important; }
.text-dark { color: var(--ink) !important; }

/* ---------- Type ---------- */
h1, h2, .h1, .h2, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--display); font-weight: 800; letter-spacing: -.02em; text-wrap: balance;
}
h1, .h1, .display-5 { font-stretch: 110%; line-height: 1.05; }
h2, .h2 { font-stretch: 106%; line-height: 1.1; }
h3, h4, .h3, .h4 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.01em; font-stretch: 100%;
}
h5, h6, .h5, .h6 { font-family: var(--display); font-weight: 700; }
.eyebrow { font: 700 .8rem/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .5rem; }

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-weight: 700; --bs-btn-border-radius: 12px; --bs-btn-border-width: 2px; }
.btn-sm { --bs-btn-border-radius: 10px; }
.btn-lg { --bs-btn-border-radius: 14px; }
.btn-primary {
  --bs-btn-bg: var(--blue); --bs-btn-border-color: var(--blue); --bs-btn-color: var(--on-blue);
  --bs-btn-hover-bg: #1B64D8; --bs-btn-hover-border-color: #1B64D8; --bs-btn-hover-color: var(--on-blue);
  --bs-btn-active-bg: #0F4396; --bs-btn-active-border-color: #0F4396;
  --bs-btn-disabled-bg: var(--blue); --bs-btn-disabled-border-color: var(--blue);
}
.btn-outline-primary {
  --bs-btn-color: var(--blue); --bs-btn-border-color: var(--blue);
  --bs-btn-hover-bg: var(--blue); --bs-btn-hover-border-color: var(--blue); --bs-btn-hover-color: var(--on-blue);
  --bs-btn-active-bg: #0F4396; --bs-btn-active-border-color: #0F4396;
}
.btn-outline-secondary {
  --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--ink); --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: var(--surface-2); --bs-btn-active-border-color: var(--ink); --bs-btn-active-color: var(--ink);
}
.btn-success {
  --bs-btn-bg: var(--green); --bs-btn-border-color: var(--green);
  --bs-btn-hover-bg: #13704F; --bs-btn-hover-border-color: #13704F;
}
.btn-outline-danger {
  --bs-btn-color: var(--coral); --bs-btn-border-color: var(--coral);
  --bs-btn-hover-bg: var(--coral); --bs-btn-hover-border-color: var(--coral); --bs-btn-hover-color: var(--on-coral);
}
.btn-yellow, .btn-warning {
  --bs-btn-bg: var(--yellow); --bs-btn-border-color: var(--yellow); --bs-btn-color: var(--on-yellow);
  --bs-btn-hover-bg: #F7C443; --bs-btn-hover-border-color: #F7C443; --bs-btn-hover-color: var(--on-yellow);
  --bs-btn-active-bg: #E0A610; --bs-btn-active-border-color: #E0A610; --bs-btn-active-color: var(--on-yellow);
}
.btn-link { --bs-btn-font-weight: 600; }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-color: var(--line); border-radius: 10px; background-color: var(--surface);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--focus); box-shadow: 0 0 0 .2rem rgba(21, 87, 192, .25);
}
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.form-label { font-weight: 600; }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color); text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ---------- Cards, tables, badges, alerts, pills ---------- */
.card {
  --bs-card-bg: var(--surface); --bs-card-border-color: var(--line);
  --bs-card-border-radius: 16px; --bs-card-inner-border-radius: 15px; --bs-card-cap-bg: var(--surface-2);
}
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--line); --bs-table-striped-bg: var(--surface-2); --bs-table-hover-bg: var(--surface-2); }
.table > thead th { font-weight: 700; color: var(--ink-2); font-size: .9rem; }
.badge { font-weight: 700; border-radius: 999px; padding: .4em .75em; }
.text-bg-light { background-color: var(--surface-2) !important; color: var(--ink) !important; }
.alert { border-radius: 12px; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--ink); --bs-nav-pills-border-radius: 999px; }
.nav-pills .nav-link { color: var(--ink); font-weight: 600; }
.nav-pills .nav-link:hover { background: var(--surface-2); }
.nav-pills .nav-link.active:hover { background: var(--ink); }

/* ---------- Logo (live text) ---------- */
.brand {
  display: inline-flex; align-items: baseline; color: var(--ink); text-decoration: none;
  font: 800 1.65rem/1 var(--display); font-stretch: 108%; letter-spacing: -.025em;
}
.brand:hover { color: var(--ink); }
.brand .b1 { color: var(--ink); }
.brand .b2 { color: var(--link); }
.brand .b3 { display: inline-block; width: .2em; height: .2em; border-radius: 50%; background: var(--yellow); margin-left: .06em; }

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 1020;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top .navbar { --bs-navbar-padding-y: 0; min-height: 68px; }
.top .navbar-brand { padding: 0; margin-right: 28px; }
.top .nav-link { color: var(--ink); font-weight: 500; }
.top .nav-link:hover, .top .nav-link:focus { color: var(--link); }
.top .nav-user { color: var(--ink-2); font-size: .9rem; }
.top .navbar-toggler { border-color: var(--line); }
@media (max-width: 575.98px) {
  .brand { font-size: 1.45rem; }
  .top .navbar-collapse { padding-bottom: 12px; }
}

/* ---------- Footer ---------- */
.site-footer { margin-top: 80px; border-top: 1px solid var(--line); padding: 40px 0 32px; }
.site-footer p { color: var(--ink-2); max-width: 34ch; margin: 12px 0 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer h2 { font: 700 .95rem var(--display); letter-spacing: 0; margin-bottom: 12px; }
.site-footer a:not(.brand) { color: var(--ink); text-decoration: none; }
.site-footer a:not(.brand):hover { color: var(--link); text-decoration: underline; }
.site-footer .legal { margin-top: 32px; font-size: .88rem; }
.site-footer ul.two { grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.site-footer .link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-align: left; }
.site-footer .link-button:hover { color: var(--link); text-decoration: underline; }

/* ---------- Cookie consent banner ---------- */
.cookie-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1080;
  max-width: 560px; margin-inline: auto; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 8px 30px rgba(12, 42, 71, .18);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent p { margin: 0 0 12px; font-size: .95rem; }
.cookie-consent-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- Home: prototype layout (hero) ---------- */
.home-hero { padding: 32px 0 24px; margin-bottom: 3rem; }
.home-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; align-items: center; }
.home-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); line-height: 1.03; margin-bottom: 28px; }
.ask { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 24px 22px; }
.ask-line { font: 700 clamp(1.2rem, 2.2vw, 1.7rem)/2 var(--display); font-stretch: 100%; margin-bottom: 14px; }
.pick { position: relative; display: inline-block; max-width: 100%; }
.pick::after {
  content: ""; position: absolute; right: .2em; top: 50%; width: .4em; height: .4em; pointer-events: none;
  border-right: 3px solid var(--link); border-bottom: 3px solid var(--link); transform: translateY(-75%) rotate(45deg);
}
.pick select {
  appearance: none; -webkit-appearance: none; background: transparent; color: var(--link); border: 0;
  border-bottom: 3px solid var(--link); border-radius: 0; padding: 0 1.5em 1px .1em; cursor: pointer;
  max-width: 100%; text-overflow: ellipsis; font: inherit;
}
.pick select option { font-family: var(--body); font-weight: 500; color: var(--ink); background: var(--surface); }
.pick input {
  background: transparent; color: var(--link); border: 0; border-bottom: 3px solid var(--link); border-radius: 0;
  padding: 0 1.5em 1px .1em; max-width: 100%; min-width: 5ch; font: inherit; outline-offset: 4px;
}
.pick input::placeholder { color: var(--link); opacity: 1; }

/* ---------- Service autocomplete (wwwroot/js/service-combobox.js) ---------- */
.combo { position: relative; }
.combo-list {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 1000; min-width: 100%; width: max-content; max-width: min(22rem, 90vw);
  max-height: 18rem; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgba(12, 42, 71, .16);
  font: 500 1rem/1.4 var(--body); color: var(--ink); text-align: left;
}
.combo-list[hidden] { display: none; }
.combo-list [role="option"] { padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.combo-list [role="option"]:hover, .combo-list [aria-selected="true"] { background: var(--surface-2); }
.combo-list .combo-note { padding: 8px 12px; color: var(--ink-2); font-size: .9rem; }
.ask .btn { width: 100%; font-size: 1.05rem; padding: 15px 22px; }
.trust { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-2); font-size: .95rem; }
.trust li { display: flex; align-items: center; gap: 7px; }
.trust svg { flex: none; color: var(--green); }
@media (max-width: 899.98px) {
  .home-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ---------- Home: Malta map with region pins (prototype "map" block) ---------- */
.home-map { position: relative; aspect-ratio: 700 / 540; background: var(--sea); border-radius: 26px; overflow: hidden; margin: 0; }
.home-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.home-map .r1 { fill: var(--ripple1); stroke: var(--ripple1); stroke-width: 56px; stroke-linejoin: round; }
.home-map .r2 { fill: var(--ripple2); stroke: var(--ripple2); stroke-width: 34px; stroke-linejoin: round; }
.home-map .land { fill: var(--land); stroke: var(--land-edge); stroke-width: 2px; stroke-linejoin: round; }
.home-map .sea-label { font: 600 10px var(--body); fill: var(--ink-2); letter-spacing: .02em; }
@media (prefers-reduced-motion: no-preference) {
  .home-map .r1 { animation: map-grow1 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .home-map .r2 { animation: map-grow2 1.1s .15s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes map-grow1 { from { stroke-width: 0px; opacity: 0; } to { stroke-width: 56px; opacity: 1; } }
  @keyframes map-grow2 { from { stroke-width: 0px; opacity: 0; } to { stroke-width: 34px; opacity: 1; } }
}
.home-map .pin {
  position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-9px, -50%);
  padding: 7px 4px 7px 0; color: var(--ink); text-decoration: none;
}
.home-map .pin.l { flex-direction: row-reverse; transform: translate(calc(-100% + 9px), -50%); padding: 7px 0 7px 4px; }
.home-map .dot {
  flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ink);
  border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--ink); transition: transform .15s, background .15s;
}
.home-map .tag {
  display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; font-weight: 600; font-size: .8rem; white-space: nowrap; line-height: 1.3;
}
.home-map .tag b { font-weight: 800; color: var(--link); }
.home-map .pin:hover .dot { transform: scale(1.2); }
.home-map .pin.is-on .dot { background: var(--blue); transform: scale(1.3); }
.home-map .pin.is-on .tag { background: var(--blue); color: var(--on-blue); border-color: var(--blue); }
.home-map .pin.is-on .tag b { color: var(--on-blue); }
.home-map figcaption { position: absolute; left: 16px; bottom: 14px; max-width: 24ch; font-size: .78rem; line-height: 1.35; color: var(--ink-2); }
/* Zoomed on Malta (Gozo hidden): the coast reaches the bottom-left corner, the top-right is open sea. */
.home-map.malta-only figcaption { left: auto; bottom: auto; right: 16px; top: 14px; text-align: right; }
@media (max-width: 639.98px) {
  .home-map .tag { font-size: .64rem; padding: 2px 6px; gap: 3px; }
  .home-map .dot { width: 15px; height: 15px; border-width: 2px; }
  .home-map .pin { transform: translate(-7px, -50%); }
  .home-map .pin.l { transform: translate(calc(-100% + 7px), -50%); }
}

/* ---------- Home: "What do you need done?" and "How it works" (prototype .cats / .steps) ---------- */
.home-sec { margin-bottom: 72px; scroll-margin-top: 96px; }
main > .home-sec:last-child { margin-bottom: 0; } /* the footer brings its own top margin */
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.sec-head h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); margin: 0; }
.cats { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: start; }
.urgent { background: var(--coral); color: var(--on-coral); border-radius: 22px; padding: 28px; }
.urgent h3 { font-size: 1.5rem; font-stretch: 106%; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.urgent > p { opacity: .92; margin-bottom: 18px; }
.urgent ul { list-style: none; padding: 0; margin: 0; }
.urgent li { border-top: 1px solid rgba(255, 255, 255, .35); }
.urgent li a { display: block; padding: 12px 0; color: inherit; font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.urgent li a:hover { text-decoration-thickness: 2px; }
.urgent :focus-visible { outline-color: #fff; }
.urgent .btn { margin-top: 20px; width: 100%; }
/* One column per ServiceGroup that has active services. */
.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.groups h3 { font-size: 1.05rem; padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin-bottom: 2px; }
.groups ul { list-style: none; padding: 0; margin: 0; }
.cat {
  display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font-weight: 500; text-decoration: none;
}
.cat:hover { color: var(--link); }
.cat .n { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; }
.steps h3 { font-size: 1.05rem; margin: 0; align-self: center; }
.steps p { color: var(--ink-2); margin: 0; grid-column: 2; }
.how-quote { margin: 28px 0 0; padding: 16px 20px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); }
.how-quote strong { color: var(--ink); }
.how-quote a { font-weight: 600; white-space: nowrap; }
.num {
  grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); color: var(--on-yellow);
  display: grid; place-items: center; font: 800 1.1rem var(--display);
}
@media (max-width: 1019.98px) {
  .cats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899.98px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 639.98px) {
  .groups { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---------- Home: pros list (prototype .rows; "pro-" prefix because Bootstrap owns .row) ---------- */
.pros-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.pro-row {
  display: grid; grid-template-columns: 56px minmax(0, 1.7fr) minmax(0, 1fr) auto; gap: 8px 24px;
  align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line);
}
.pro-av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 800 1.05rem var(--display); letter-spacing: .02em; }
.pro-av0 { background: var(--blue); color: var(--on-blue); }
.pro-av1 { background: var(--green); color: #fff; }
.pro-av2 { background: var(--coral); color: #fff; }
.pro-av3 { background: var(--yellow); color: var(--on-yellow); }
.pro-av4 { background: var(--ink); color: var(--bg); }
.pro-who h3 { font-size: 1.05rem; margin: 0; }
.pro-who .sub { color: var(--ink-2); font-size: .95rem; margin: 2px 0 0; }
.pro-who .bl { margin: 6px 0 0; max-width: 52ch; }
.pro-meta { list-style: none; padding: 0; margin: 0; font-size: .92rem; color: var(--ink-2); display: grid; gap: 2px; }
.pro-meta .rate b { color: var(--ink); }
.pro-act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ver { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-weight: 700; font-size: .85rem; }
@media (max-width: 899.98px) {
  .pro-row { grid-template-columns: 56px minmax(0, 1fr); }
  .pro-meta, .pro-act { grid-column: 2; }
  .pro-act { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}

/* ---------- Home: "Post the job once" band and "Work as a pro" (prototype .band / .pro-grid) ---------- */
/* Full-bleed band inside the page container: the shadow paints the sides, clip-path keeps it to the band's height. */
.band { background: var(--band); color: var(--on-band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding-block: 64px; align-items: center; }
.band h2 { color: var(--on-band); font-size: clamp(1.55rem, 3vw, 2.3rem); }
.band p { color: var(--band-2); margin-top: 14px; max-width: 44ch; }
.band ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; }
.band ul li { display: flex; gap: 10px; align-items: center; }
.band ul svg { color: var(--yellow); flex: none; }
.band :focus-visible { outline-color: var(--yellow); }
.band-form { display: grid; gap: 16px; }
.band-form .field label { display: block; font-weight: 600; margin-bottom: 6px; }
.band-form .field input, .band-form .field textarea, .band-form .field select {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--surface); background: var(--surface); color: var(--ink);
}
.band-form .field textarea { resize: vertical; min-height: 88px; }
.band-form .btn { justify-self: start; padding: 14px 26px; }
.pro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.pro-grid h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); }
.pro-grid > div > p { color: var(--ink-2); margin-top: 14px; max-width: 46ch; }
.pro-grid .btn { margin-top: 10px; }
.perks { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink); }
.perks li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.perks h3 { font-size: 1.05rem; margin-bottom: 2px; }
.perks p { color: var(--ink-2); margin: 0; }
@media (max-width: 899.98px) {
  .band-grid, .pro-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ---------- Listing: review photos ---------- */
.review-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.review-photos img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.review-photo-remove { display: grid; gap: 4px; font-size: .85rem; cursor: pointer; }
.review-photo-remove img { width: 72px; height: 72px; }