/* =================================================================================================
   The public directory (site workstream): home, city pages, service pages, company profiles,
   /cities, /list-your-company, /link-partner, /about, /contact. Built on base.css ("Caribbean
   light"): its tokens, bands, waves, cards, chips and buttons. Mobile first; logical properties
   only; every tap target at least 48 px; no inline styles (CSP).

   Components
     .dir-hero (+ -home, -city)   full-width photo with a white panel over its lower edge
       .dir-hero-media / -photo / -shade / -inner / -panel, .hero-search, .hero-trust,
       .hero-facts, .hero-actions
     .crumbs                       visible breadcrumbs
     .dir-section                  a content section with the page's vertical rhythm
     .co-card (+ -featured)        a company in a list; .co-logo (-s/-m/-l), .co-monogram,
                                   .co-hue-0…5, .co-chips/.co-chip, .tier-badge(-featured)
     .feat-card                    a Featured company with its cover
     .city-card (+ -compact)       a city tile; .city-grid (-small)
     .guide-card, .guide-grid      guide teasers
     .faq / .faq-item              the questions accordion (<details>)
     .list-band                    the navy "List your company" band
     .co-cover / .co-header / .co-layout / .contact-card   the company profile
     .plan-grid / .plan-card       the plans on /list-your-company
     .snippet-*                    the Link Partner code on /link-partner
   ================================================================================================= */

/* ---- Shared rhythm ------------------------------------------------------------------------------ */

.dir-section { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.dir-section > .section-head:first-child { margin-block-start: 0; }
.page > .dir-section + .dir-section { padding-block-start: 0; }
.band > .section-head h2, .dir-section .section-head h2 { margin-block: 0; }

.tick-list, .steps-list { list-style: none; padding: 0; display: grid; gap: 0.7rem; margin-block: var(--space-s); }
.tick-list li, .steps-list li { position: relative; padding-inline-start: 2.1rem; max-inline-size: 60ch; }
.tick-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.2em;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  border-radius: 50%;
  background: var(--lagoon-deep);
  -webkit-mask: var(--icon-disc-check) center / contain no-repeat;
  mask: var(--icon-disc-check) center / contain no-repeat;
}
.steps-list { counter-reset: step; }
.steps-list li { counter-increment: step; }
.steps-list li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.05em;
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background: var(--coral-tint);
  color: var(--coral-ink);
  font: 900 0.85rem/1 var(--display);
}

.prose { max-inline-size: var(--measure); }
.prose > * + * { margin-block-start: var(--space-s); }
.prose h2, .prose h3 { margin-block: var(--space-l) var(--space-2xs); }
.prose h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem); font-weight: 800; }
.prose h3 { font-size: var(--h3); }
.prose h4 { font-size: var(--h4); }
.prose ul, .prose ol { padding-inline-start: 1.4rem; display: grid; gap: 0.4rem; }
.prose li::marker { color: var(--coral-deep); }
.prose table { border-collapse: collapse; inline-size: 100%; font-size: 0.95rem; }
.prose :is(th, td) { padding: 0.5rem 0.75rem; border-block-end: 1px solid var(--sand-deep); text-align: start; }
.prose blockquote { padding-inline-start: 1rem; border-inline-start: 4px solid var(--coral); color: var(--ink-soft); }

.chip-count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.6rem;
  padding-inline: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ink-soft);
}

/* ---- Hero: a full-width photo with a white panel over its lower edge ----------------------------- */

.dir-hero { position: relative; isolation: isolate; padding-block-start: clamp(11rem, 6rem + 26vw, 21rem); }
.dir-hero-media { position: absolute; inset-inline: 0; inset-block-start: 0; z-index: -1; block-size: clamp(14rem, 8rem + 30vw, 30rem); overflow: hidden; background: var(--foam); }
.dir-hero-media .frame.dir-hero-photo { aspect-ratio: auto; inline-size: 100%; block-size: 100%; border-radius: 0; }
.dir-hero-media .dir-hero-photo img { object-position: center 55%; }
/* A soft wash at the foot of the photo, so the panel's shadow sits on light. */
.dir-hero-shade { position: absolute; inset: auto 0 0; block-size: 45%; background: linear-gradient(to bottom, rgb(255 250 243 / 0), rgb(255 250 243 / 0.85) 85%, var(--shell)); pointer-events: none; }
.dir-hero-inner { inline-size: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
.dir-hero-panel {
  position: relative;
  max-inline-size: 46rem;
  padding: clamp(1.4rem, 1rem + 2.4vw, 2.6rem);
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--shadow-l), 0 0 0 1px rgb(239 220 195 / 0.6);
}
.dir-hero-panel > :last-child { margin-block-end: 0; }
.dir-hero-panel h1 { margin-block: 0.2rem var(--space-xs); }
.dir-hero-panel .lead { margin-block: 0 var(--space-m); max-inline-size: 52ch; }
.dir-hero-panel .crumbs { margin-block-end: var(--space-xs); }
.dir-hero-home .dir-hero-panel { max-inline-size: 50rem; }
.dir-hero-city h1 { font-size: clamp(2rem, 1.35rem + 2.3vw, 3.05rem); }
.dir-hero-home .display { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem); }
@media (min-width: 64rem) {
  .dir-hero-home { padding-block-start: 12.5rem; }
  .dir-hero-home .dir-hero-media { block-size: 32rem; }
  .dir-hero-city { padding-block-start: 11rem; }
  .dir-hero-city .dir-hero-media { block-size: 24rem; }
}

/* City heroes: the words and, beside them on a computer, the first companies of the city. */
.hero-top { display: grid; gap: 0.6rem; align-content: start; margin-block-start: var(--space-l); padding: 1.1rem 1.15rem 1.2rem; border-radius: var(--radius-l); background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--sand-deep); }
.hero-top-title { margin: 0; font-size: 1.05rem; }
.hero-top-list { display: grid; gap: 0.35rem; list-style: none; padding: 0; margin: 0; }
.hero-top-list li { max-inline-size: none; }
.hero-top-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  align-items: center;
  min-block-size: var(--tap);
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 1px 0 rgb(23 47 79 / 0.05);
}
.hero-top-list a:hover { box-shadow: 0 0 0 2px var(--lagoon-line); color: var(--ink); }
.hero-top-list .co-logo { grid-row: 1 / 3; }
.hero-top-name { font: 800 1rem/1.2 var(--display); }
.hero-top-svc { font: 600 0.82rem/1.3 var(--display); color: var(--ink-soft); }
.tier-dot { display: inline-block; inline-size: 0.6rem; block-size: 0.6rem; margin-inline-start: 0.2rem; border-radius: 50%; background: linear-gradient(var(--gold), var(--coral)); vertical-align: 0.1em; }
.hero-top .more { min-block-size: 2.4rem; font-size: 0.95rem; }
@media (min-width: 64rem) {
  .dir-hero-panel-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 1fr); gap: var(--space-xl); max-inline-size: none; align-items: start; }
  .hero-top { margin-block-start: 0; }
}

/* The search form: two selects and the coral button, on one row from 52rem. */
.hero-search {
  display: grid;
  gap: 0.85rem;
  padding: 0.9rem;
  border-radius: var(--radius-l);
  background: var(--sand);
  box-shadow: inset 0 0 0 1.5px var(--sand-deep);
}
.hero-search-field { display: grid; gap: 0.3rem; min-inline-size: 0; }
.hero-search-field label { font-size: 0.9rem; color: var(--ink-soft); padding-inline-start: 0.3rem; }
.hero-search select { inline-size: 100%; background-color: var(--white); }
.hero-search-go { inline-size: 100%; }
@media (min-width: 52rem) {
  .hero-search { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: end; padding: 0.75rem 0.75rem 0.75rem 1rem; border-radius: var(--radius-pill); }
  .hero-search-go { inline-size: auto; min-block-size: 3rem; }
}
.hero-trust { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-block-start: var(--space-s); list-style: none; padding: 0; max-inline-size: none; }
.hero-trust li { display: inline-flex; align-items: center; gap: 0.4rem; font: 700 0.92rem/1.3 var(--display); color: var(--ink-soft); }
.hero-trust .icon { inline-size: 1.15rem; block-size: 1.15rem; color: var(--ok); stroke-width: 3.4; }

.hero-facts { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin-block: 0 var(--space-m); max-inline-size: none; }
.hero-facts li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding-block: 0.5rem;
  padding-inline: 0.9rem;
  border-radius: var(--radius);
  background: var(--foam);
  font: 700 0.92rem/1.2 var(--display);
  color: var(--ink-soft);
}
.hero-facts strong { font-size: 1.35rem; font-weight: 900; color: var(--ink); }
.hero-actions { gap: 0.75rem; }

/* ---- Breadcrumbs ------------------------------------------------------------------------------- */

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.45rem; list-style: none; padding: 0; margin: 0; font: 700 0.9rem/1.3 var(--display); color: var(--ink-soft); }
.crumbs li { display: inline-flex; align-items: center; gap: 0.45rem; max-inline-size: none; }
.crumbs li + li::before { content: ""; inline-size: 0.45rem; block-size: 0.45rem; border-block-start: 2px solid var(--sand-deep); border-inline-end: 2px solid var(--sand-deep); transform: rotate(45deg); }
[dir="rtl"] .crumbs li + li::before { transform: rotate(-135deg); }
.crumbs a { display: inline-flex; align-items: center; min-block-size: 2rem; color: var(--lagoon-deep); }

/* ---- Home: popular city links ------------------------------------------------------------------- */

.home-popular { padding-block: var(--space-l) 0; }
.home-popular-title { margin: 0 0 var(--space-xs); color: var(--ink-soft); font-size: 1rem; }
.pill-links { display: flex; flex-wrap: wrap; gap: 0.55rem; list-style: none; padding: 0; max-inline-size: none; }
.pill-links li { max-inline-size: none; }
.pill-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: var(--tap);
  padding-inline: 1.05rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--sand-deep);
  font: 700 0.95rem/1.2 var(--display);
  color: var(--ink);
  text-decoration: none;
}
.pill-links a:hover { box-shadow: inset 0 0 0 2px var(--lagoon-line); background: var(--foam); color: var(--ink); }

/* ---- Logos and monograms ------------------------------------------------------------------------ */

.co-logo {
  display: inline-grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--sand-deep), var(--shadow-s);
}
.co-logo img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; padding: 6%; }
.co-logo-s { inline-size: 3rem; block-size: 3rem; border-radius: 12px; font-size: 1.05rem; }
.co-logo-m { inline-size: 4.4rem; block-size: 4.4rem; font-size: 1.45rem; }
.co-logo-l { inline-size: clamp(5.5rem, 4rem + 5vw, 7.5rem); block-size: clamp(5.5rem, 4rem + 5vw, 7.5rem); border-radius: 26px; font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); box-shadow: 0 0 0 5px var(--white), var(--shadow); }
.co-monogram { font-family: var(--display); font-weight: 900; letter-spacing: -0.02em; color: var(--ink); }

/* ---- Tier badge -------------------------------------------------------------------------------- */

.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-block-size: 1.9rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--foam);
  font: 800 0.82rem/1 var(--display);
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.tier-badge-featured { background: linear-gradient(120deg, var(--gold) 0%, #ffb27a 55%, var(--coral) 100%); box-shadow: 0 6px 14px -8px rgb(226 98 63 / 0.9); }
.tier-badge-featured::before {
  content: "";
  inline-size: 0.95rem;
  block-size: 0.95rem;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.2l-5.8 3.2 1.2-6.5-4.8-4.5 6.5-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.2l-5.8 3.2 1.2-6.5-4.8-4.5 6.5-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* An independent property manager (companies.kind = individual): a quiet chip next to the name. */
.kind-badge { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--lagoon-line); font-weight: 700; }
.feat-card-kind { margin: 0; }

/* ---- Company cards ----------------------------------------------------------------------------- */

.co-list { display: grid; gap: var(--space-s); list-style: none; padding: 0; max-inline-size: none; }
.co-list > li { max-inline-size: none; }
@media (min-width: 60rem) {
  .co-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); }
  .co-list-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .co-list-3 .co-card { grid-template-columns: auto minmax(0, 1fr); }
  .co-list-3 .co-card-go { display: none; }
}

.co-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-s);
  align-items: start;
  block-size: 100%;
  padding: clamp(1.1rem, 0.8rem + 1.2vw, 1.5rem);
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: 0 0 0 1px rgb(239 220 195 / 0.9), var(--shadow-s);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.co-card:has(.card-target:hover) { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--lagoon-line), var(--shadow); }
.co-card:has(.card-target:focus-visible) { outline: var(--focus); outline-offset: 3px; }
.co-card-featured { box-shadow: 0 0 0 2px #ffcdb5, var(--shadow-s); background: linear-gradient(180deg, #fffaf6, var(--white) 40%); }
@media (min-width: 30rem) {
  .co-card { grid-template-columns: auto minmax(0, 1fr) auto; }
}
.co-card-body { display: grid; gap: 0.45rem; min-inline-size: 0; }
.co-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.co-card-name { margin: 0; font-size: 1.2rem; line-height: 1.2; }
.co-card-name a { color: var(--ink); text-decoration: none; }
.co-card-name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.co-card-name a:focus-visible { outline: none; }
.co-card-tagline { margin: 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.45; }
.co-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0.15rem 0 0; max-inline-size: none; }
.co-chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.8rem;
  padding-inline: 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--foam);
  font: 700 0.8rem/1.2 var(--display);
  color: var(--ink);
  max-inline-size: 100%;
}
.co-chip-more { background: var(--sand); color: var(--ink-soft); }
.co-card-meta { display: flex; align-items: flex-start; gap: 0.35rem; margin: 0.1rem 0 0; font: 700 0.88rem/1.35 var(--display); color: var(--ink-soft); }
.co-card-meta .icon { inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: 0.05rem; }
.co-card-go {
  display: none;
  align-self: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border-radius: 50%;
  background: var(--lagoon-deep);
  -webkit-mask: var(--icon-more) center / contain no-repeat;
  mask: var(--icon-more) center / contain no-repeat;
  transition: transform 0.18s ease;
}
@media (min-width: 30rem) { .co-card-go { display: block; } }
.co-card:has(.card-target:hover) .co-card-go { transform: translateX(3px); -webkit-mask-image: var(--icon-more-on); mask-image: var(--icon-more-on); }
[dir="rtl"] .co-card-go { transform: scaleX(-1); }

/* ---- Featured cards ---------------------------------------------------------------------------- */

.feat-grid { display: grid; gap: var(--space-m); list-style: none; padding: 0; max-inline-size: none; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.feat-grid > li { max-inline-size: none; }
.feat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: 0 0 0 1px rgb(239 220 195 / 0.9), var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feat-card:has(.card-target:hover) { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--lagoon-line), var(--shadow-l); }
.feat-card:has(.card-target:focus-visible) { outline: var(--focus); outline-offset: 3px; }
.feat-card-cover { position: relative; aspect-ratio: 16 / 7; background: var(--foam); }
.feat-card-cover img { display: block; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; }
.feat-card-cover-plain::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 120%, rgb(255 198 92 / 0.85) 0 18%, transparent 19%),
    repeating-radial-gradient(circle at 82% 120%, transparent 0 24%, rgb(255 255 255 / 0.35) 24.5% 25.5%, transparent 26% 31%);
}
.feat-card-cover .tier-badge { position: absolute; z-index: 1; inset-block-start: 0.85rem; inset-inline-end: 0.85rem; }
.feat-card-body { position: relative; display: grid; gap: 0.5rem; padding: 0 clamp(1.2rem, 1rem + 1vw, 1.6rem) clamp(1.2rem, 1rem + 1vw, 1.6rem); flex: 1; align-content: start; }
.feat-card-body .co-logo { margin-block-start: -2.2rem; box-shadow: 0 0 0 4px var(--white), var(--shadow-s); }
.feat-card-name { margin: 0.2rem 0 0; font-size: 1.35rem; }
.feat-card-name a { color: var(--ink); text-decoration: none; }
.feat-card-name a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.feat-card-name a:focus-visible { outline: none; }
.feat-card-tagline { margin: 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.45; }
.feat-card-body > .co-chips { margin-block-end: auto; }
.feat-card-body { grid-template-rows: auto auto auto auto 1fr auto; }
.feat-card-cta { justify-self: start; align-self: end; display: inline-flex; align-items: center; gap: 0.5rem; margin-block-start: 0.35rem; font: 800 1rem/1.2 var(--display); color: var(--lagoon-deep); }
.feat-card-cta::after { content: ""; inline-size: 1.4rem; block-size: 1.4rem; background: currentColor; -webkit-mask: var(--icon-more) center / contain no-repeat; mask: var(--icon-more) center / contain no-repeat; }
[dir="rtl"] .feat-card-cta::after { transform: scaleX(-1); }

/* ---- Cities ------------------------------------------------------------------------------------ */

.city-grid { display: grid; gap: var(--space-m); list-style: none; padding: 0; max-inline-size: none; grid-template-columns: repeat(auto-fill, minmax(min(13.5rem, 100%), 1fr)); }
.city-grid > li { max-inline-size: none; }
.city-grid-small { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: var(--space-s); }
.city-card {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: 0 0 0 1px rgb(239 220 195 / 0.9), var(--shadow-s);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.city-card:has(.card-target:hover) { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--lagoon-line), var(--shadow); }
.city-card:has(.card-target:focus-visible) { outline: var(--focus); outline-offset: 3px; }
.city-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.city-card-media .frame { border-radius: 0; aspect-ratio: auto; inline-size: 100%; block-size: 100%; }
.city-card-media-plain::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 125%, rgb(255 198 92 / 0.85) 0 17%, transparent 17.5%),
    repeating-radial-gradient(circle at 80% 125%, transparent 0 23%, rgb(255 255 255 / 0.4) 23.5% 24.5%, transparent 25% 30%);
}
.city-card-pin { position: relative; display: grid; place-items: center; inline-size: 3.6rem; block-size: 3.6rem; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-s); }
.city-card-pin .icon { inline-size: 2rem; block-size: 2rem; }
.city-card:has(.card-target:hover) .city-card-media img { transform: scale(1.04); }
.city-card-media img { transition: transform 0.5s ease; }
.city-card-media-plain { display: grid; place-items: center; }
.city-card-initial { font: 900 3.4rem/1 var(--display); color: rgb(23 47 79 / 0.55); }
.city-card-body { display: grid; gap: 0.15rem; padding: 0.95rem 1.15rem 1.1rem; }
.city-card-name { margin: 0; font-size: 1.2rem; }
.city-card-name a { color: var(--ink); text-decoration: none; }
.city-card-name a:focus-visible { outline: none; }
.city-card-name .card-target::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.city-card-meta { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.city-card-count { margin: 0.35rem 0 0; font: 800 0.9rem/1.3 var(--display); color: var(--lagoon-deep); }
.city-card-count.is-empty { color: var(--coral-ink); }
.band-sand .city-card { box-shadow: var(--shadow-s); }

.region-lists { display: grid; gap: var(--space-m); margin-block: var(--space-xl) var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.region-list { padding: 1.1rem 1.25rem; border-radius: var(--radius-l); background: rgb(255 255 255 / 0.7); box-shadow: inset 0 0 0 1.5px var(--sand-deep); }
.region-list-title { margin: 0 0 0.35rem; font-size: 1.05rem; }
.region-list ul { list-style: none; padding: 0; margin: 0; }
.region-list li { max-inline-size: none; }
.region-list a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-block-size: var(--tap); padding-block: 0.2rem; border-block-end: 1px dashed var(--sand-deep); color: var(--ink); text-decoration: none; font-weight: 600; }
.region-list li:last-child a { border-block-end: 0; }
.region-list a:hover span:first-child { color: var(--lagoon-deep); text-decoration: underline; text-decoration-color: var(--lagoon-line); }
.region-count { min-inline-size: 1.9rem; padding-inline: 0.5rem; border-radius: var(--radius-pill); background: var(--foam); text-align: center; font: 800 0.85rem/1.8 var(--display); color: var(--ink-soft); }

.page-head { padding-block: var(--space-xl) 0; max-inline-size: 50rem; }
.page-head .crumbs { margin-block-end: var(--space-s); }
.region-block { padding-block-end: 0; }
.region-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; margin-block-end: var(--space-m); border-block-end: 2px dashed var(--sand-deep); padding-block-end: 0.6rem; }
.region-head h2 { margin: 0; font-size: var(--h3); }
.cities-missing { margin-block: var(--space-xl); padding-block: 1rem; }

/* ---- How it works ------------------------------------------------------------------------------ */

.how-steps { display: grid; gap: var(--space-m); list-style: none; padding: 0; max-inline-size: none; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); counter-reset: none; }
.how-step { position: relative; display: grid; gap: 0.6rem; justify-items: start; padding: 1.6rem 1.5rem 1.5rem; border-radius: var(--radius-l); background: var(--white); box-shadow: 0 0 0 1px rgb(239 220 195 / 0.9), var(--shadow-s); max-inline-size: none; }
.how-step h3 { margin: 0.2rem 0 0; }
.how-step p { margin: 0; color: var(--ink-soft); }
.how-num { position: absolute; inset-block-start: 1.1rem; inset-inline-end: 1.2rem; font: 900 2.6rem/1 var(--display); color: var(--coral-tint); -webkit-text-stroke: 1.5px var(--coral); }
.why .sunrise { max-inline-size: 26rem; justify-self: center; }

/* ---- Guides ------------------------------------------------------------------------------------ */

.guide-grid { display: grid; gap: var(--space-m); list-style: none; padding: 0; max-inline-size: none; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
.guide-grid > li { max-inline-size: none; }
.guide-card { position: relative; display: flex; flex-direction: column; block-size: 100%; overflow: hidden; border-radius: var(--radius-l); background: var(--white); box-shadow: 0 0 0 1px rgb(239 220 195 / 0.9), var(--shadow-s); }
.guide-card:has(.card-target:hover) { box-shadow: 0 0 0 2px var(--lagoon-line), var(--shadow); }
.guide-card .frame { border-radius: 0; }
.guide-card-plain { display: grid; place-items: center; background: linear-gradient(135deg, var(--foam), var(--sand)); }
.guide-card-plain .icon { inline-size: 3rem; block-size: 3rem; }
.guide-card-body { display: grid; gap: 0.35rem; padding: 1rem 1.2rem 1.25rem; }
.guide-card-body .eyebrow { margin: 0; }
.guide-card-title { margin: 0; font-size: 1.15rem; }
.guide-card-title a { color: var(--ink); text-decoration: none; }
.guide-card-title a::after { content: ""; position: absolute; inset: 0; }
.guide-card-summary { margin: 0; font-size: 0.95rem; color: var(--ink-soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.guide-card-media .frame { aspect-ratio: 16 / 9; }

/* ---- FAQ --------------------------------------------------------------------------------------- */

.faq-list { display: grid; gap: 0.75rem; max-inline-size: 52rem; margin-inline: auto; }
.faq-item { border-radius: var(--radius); background: var(--white); box-shadow: 0 1px 0 rgb(23 47 79 / 0.05), 0 0 0 1px rgb(196 235 228 / 0.9); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 3.4rem;
  padding: 0.85rem 1.2rem;
  cursor: pointer;
  list-style: none;
  font: 800 1.08rem/1.35 var(--display);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--foam) var(--icon-select) center / 1.1rem no-repeat;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item summary:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: var(--radius); }
.faq-answer { padding: 0 1.2rem 1.1rem; color: var(--ink-soft); }
.faq-answer p { margin: 0; max-inline-size: 64ch; }

/* ---- The "List your company" band (navy; no logo on it) ----------------------------------------- */

.list-band { padding-block: clamp(3rem, 2rem + 4vw, 5rem) clamp(5rem, 4rem + 4vw, 7rem); }
.list-band-inner { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 56rem) { .list-band-inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.list-band h2 { margin-block: 0.2rem var(--space-xs); }
.list-band .lead { color: var(--on-dark-soft); margin-block: 0 var(--space-s); }
.list-band-eyebrow { color: #ffb59b; }
.list-band-points { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
.list-band-points li { position: relative; padding-inline-start: 1.8rem; color: var(--on-dark); }
.list-band-points li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.25em; inline-size: 1.15rem; block-size: 1.15rem; background: #7fe0d6; -webkit-mask: var(--icon-disc-check) center / contain no-repeat; mask: var(--icon-disc-check) center / contain no-repeat; }
.list-band-actions { display: grid; gap: var(--space-s); justify-items: start; padding: clamp(1.4rem, 1rem + 2vw, 2rem); border-radius: var(--radius-xl); background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); }
.list-band-actions .button { inline-size: 100%; }
.list-band .more { color: var(--white); }

/* ---- City page --------------------------------------------------------------------------------- */

.city-intro { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 60rem) { .city-intro { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-xl); } }
.city-intro-text h2 { margin-block: 0 var(--space-s); }
.city-glance { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.city-glance h2 { margin: 0 0 0.3rem; }
.city-glance .tick-list li { font-size: 0.98rem; }

.listings-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; margin-block-end: var(--space-s); }
.listings-head h2 { margin: 0; }
.listings-count { margin: 0; font: 800 1rem/1.3 var(--display); color: var(--ink-soft); }

/* Filter chips: one scrolling row on a phone, wrapping on a computer. */
.filter-chips { margin-block-end: var(--space-m); }
.filter-chips ul { display: flex; gap: 0.5rem; list-style: none; padding: 0.15rem 0.1rem 0.6rem; margin: 0; overflow-x: auto; scrollbar-width: thin; max-inline-size: none; }
@media (min-width: 48rem) { .filter-chips ul { flex-wrap: wrap; overflow: visible; } }
.filter-chips li { flex: none; max-inline-size: none; }
.filter-chips a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: var(--tap);
  padding-inline: 1rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--sand);
  box-shadow: inset 0 0 0 1.5px var(--sand-deep);
  font: 700 0.92rem/1.2 var(--display);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.filter-chips a:hover { background: var(--foam); box-shadow: inset 0 0 0 1.5px var(--lagoon-line); color: var(--ink); }
.filter-chips a[aria-current="true"] { background: var(--lagoon-deep); color: var(--white); box-shadow: none; }
.filter-chips a[aria-current="true"] .chip-count { color: var(--lagoon-deep); }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-s); margin-block-start: var(--space-l); }
.pager-where { font: 700 0.95rem/1.2 var(--display); color: var(--ink-soft); }

.empty-state {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) clamp(1.25rem, 1rem + 2vw, 3rem);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--foam), var(--white));
  box-shadow: inset 0 0 0 2px var(--foam-deep);
  text-align: center;
}
.empty-state h3 { margin: 0.4rem 0 0; font-size: var(--h3); max-inline-size: 28ch; }
.empty-state p { margin: 0; color: var(--ink-soft); }
.empty-art { display: grid; place-items: center; inline-size: 5rem; block-size: 5rem; border-radius: 50%; background: radial-gradient(circle at 50% 110%, var(--gold) 0 34%, var(--coral-tint) 35% 100%); box-shadow: 0 0 0 8px rgb(255 255 255 / 0.8); }
.empty-art .icon { inline-size: 2.6rem; block-size: 2.6rem; }
.empty-actions { justify-content: center; margin-block-start: 0.6rem; }

.city-guide { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 60rem) { .city-guide { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: var(--space-xl); } }
.city-guide-main > h2 { margin-block: 0 var(--space-s); }
.sticky-card { display: grid; gap: 0.6rem; justify-items: start; }
.sticky-card h2 { margin: 0.3rem 0 0; }
.sticky-card p { margin: 0; }
@media (min-width: 60rem) { .sticky-card { position: sticky; inset-block-start: 7rem; } }

/* ---- Company profile --------------------------------------------------------------------------- */

.co-cover { position: relative; block-size: clamp(9rem, 5rem + 16vw, 17rem); overflow: hidden; background: var(--foam); }
.co-cover img { display: block; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; }
.co-cover-plain::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 135%, rgb(255 198 92 / 0.9) 0 16%, transparent 16.5%),
    repeating-radial-gradient(circle at 85% 135%, transparent 0 22%, rgb(255 255 255 / 0.35) 22.4% 23.2%, transparent 23.6% 28%);
}
.co-cover::after { content: ""; position: absolute; inset: auto 0 0; block-size: 40%; background: linear-gradient(to bottom, transparent, rgb(255 250 243 / 0.7)); }
.co-header { position: relative; margin-block-start: clamp(-4.5rem, -2rem - 3vw, -2.5rem); padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); border-radius: var(--radius-xl); background: var(--white); box-shadow: var(--shadow-l), 0 0 0 1px rgb(239 220 195 / 0.6); }
.co-header .crumbs { margin-block-end: var(--space-s); }
.co-header-main { display: grid; gap: var(--space-m); align-items: center; }
@media (min-width: 48rem) { .co-header-main { grid-template-columns: auto minmax(0, 1fr) auto; } }
.co-header-text h1 { margin: 0.35rem 0 0.25rem; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
.co-tagline { margin: 0; max-inline-size: 52ch; }
.co-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.co-badge-place { display: inline-flex; align-items: center; gap: 0.3rem; font: 700 0.92rem/1.2 var(--display); color: var(--ink-soft); }
.co-badge-place .icon { inline-size: 1.2rem; block-size: 1.2rem; }
.co-header-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 47.99rem) { .co-header-actions .button { flex: 1 1 10rem; } }

.co-layout { display: grid; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); align-items: start; }
@media (min-width: 62rem) { .co-layout { grid-template-columns: minmax(0, 1.75fr) minmax(20rem, 1fr); } }
.co-main h2 { margin-block: 0 var(--space-s); font-size: var(--h3); }
.co-description p { max-inline-size: 66ch; }
.co-description p + p { margin-block-start: var(--space-s); }
.co-lang-note { margin-block-start: var(--space-2xs); }

.svc-grid { display: grid; gap: 0.75rem; list-style: none; padding: 0; max-inline-size: none; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
.svc-item { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.95rem 1rem; border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px rgb(239 220 195 / 0.9); max-inline-size: none; }
.svc-name { margin: 0; font-size: 1.02rem; }
.svc-name a { color: var(--ink); text-decoration-color: var(--lagoon-line); }
.svc-desc { margin: 0.15rem 0 0; font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft); }

.gallery { display: grid; gap: 0.6rem; list-style: none; padding: 0; max-inline-size: none; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 46%), 1fr)); }
.gallery li { max-inline-size: none; }
.gallery figure { margin: 0; }
.gallery-link { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: var(--foam); }
.gallery img { display: block; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; transition: transform 0.4s ease; }
.gallery-link:hover img { transform: scale(1.04); }
.gallery figcaption { margin-block-start: 0.35rem; font-size: 0.88rem; color: var(--ink-soft); }

.co-facts { display: grid; gap: 0; margin: 0; border-radius: var(--radius-l); background: var(--white); box-shadow: 0 0 0 1px rgb(239 220 195 / 0.9); }
.co-facts > div { display: grid; gap: 0.15rem 1rem; padding: 0.85rem 1.2rem; border-block-end: 1px dashed var(--sand-deep); }
.co-facts > div:last-child { border-block-end: 0; }
@media (min-width: 36rem) { .co-facts > div { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; } }
.co-facts dt { font: 800 0.92rem/1.3 var(--display); color: var(--ink-soft); }
.co-facts dd { margin: 0; }
.inline-links { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; list-style: none; padding: 0; margin: 0; }
.inline-links li { max-inline-size: none; }
.socials { margin-block-start: var(--space-s); list-style: none; padding: 0; gap: 0.5rem; }
.socials .chip { min-block-size: var(--tap); padding-inline: 1rem; text-decoration: none; color: var(--lagoon-deep); }
.claim-note .more { min-block-size: 2.4rem; }

.co-aside { min-inline-size: 0; }

.contact-card { padding: clamp(1.25rem, 1rem + 1.5vw, 1.9rem); border-radius: var(--radius-xl); box-shadow: 0 0 0 1px rgb(239 220 195 / 0.9), var(--shadow-l); }
.contact-card h2 { margin: 0 0 var(--space-s); }
.contact-buttons { display: grid; gap: 0.6rem; list-style: none; padding: 0; margin: 0 0 var(--space-s); }
.contact-buttons li { max-inline-size: none; }
.contact-buttons .button { justify-content: center; }
.contact-whatsapp { --button-bg: #1fa855; --button-bg-hover: #23b95e; --button-ink: var(--white); --button-shadow: 0 4px 0 #13803f, 0 12px 22px -12px rgb(19 128 63 / 0.9); --button-shadow-pressed: 0 1px 0 #13803f; }
.contact-whatsapp:hover { color: var(--white); }
.contact-form-title { margin: var(--space-m) 0 var(--space-xs); padding-block-start: var(--space-s); border-block-start: 2px dashed var(--sand-deep); font-size: 1.1rem; }
.contact-buttons:empty + .contact-form-title, .contact-card > h2 + .contact-form-title { border-block-start: 0; padding-block-start: 0; margin-block-start: 0; }
.inquiry-form .field, .contact-form-card .field { max-inline-size: none; margin-block-end: 1rem; }
.inquiry-form :is(input, select, textarea), .contact-form-card :is(input, select, textarea) { inline-size: 100%; }
.field-row { display: grid; gap: 0 0.75rem; }
@media (min-width: 26rem) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.optional { font-weight: 600; color: var(--ink-soft); font-size: 0.9em; }
/* The honeypot: present for bots, never seen or reached by people (no display:none, which some
   bots skip). */
.hp-field { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.inquiry-form .fine, .contact-form-card .fine { margin-block-start: var(--space-xs); }
.contact-card .notice { margin-block-end: var(--space-s); }

.sent-page { display: grid; justify-items: center; gap: 0.6rem; padding-block: var(--space-2xl) var(--space-l); }
.sent-page .lead { margin-block: 0; }
.sent-page .cluster { justify-content: center; margin-block-start: var(--space-s); }
.sent-art { display: grid; place-items: center; inline-size: 5.5rem; block-size: 5.5rem; border-radius: 50%; background: var(--ok-tint); color: var(--ok); box-shadow: 0 0 0 10px rgb(230 244 234 / 0.5); }
.sent-art .icon { inline-size: 3rem; block-size: 3rem; stroke-width: 3; }

/* ---- /list-your-company ------------------------------------------------------------------------ */

.lyc-hero { padding-block: var(--space-xl) var(--space-l); }
.lyc-hero .crumbs { margin-block-end: var(--space-s); }
.lyc-hero .sunrise, .about-hero .sunrise { max-inline-size: 26rem; justify-self: center; inline-size: 100%; }
.lyc-hero .cluster { margin-block: var(--space-s) var(--space-xs); }
.benefit { display: grid; gap: 0.5rem; justify-items: start; }
.benefit h3 { margin: 0.4rem 0 0; }
.benefit p { margin: 0; color: var(--ink-soft); }

.plan-grid { display: grid; gap: var(--space-m); list-style: none; padding: 0; max-inline-size: 70rem; margin-inline: auto; align-items: stretch; }
@media (min-width: 56rem) { .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); border-radius: var(--radius-xl); background: var(--white); box-shadow: 0 0 0 1px rgb(239 220 195 / 0.9), var(--shadow); max-inline-size: none; }
.plan-popular { box-shadow: 0 0 0 3px var(--lagoon-deep), var(--shadow-l); }
@media (min-width: 56rem) { .plan-popular { transform: translateY(-0.75rem); } }
.plan-flag { position: absolute; inset-block-start: -0.95rem; inset-inline-start: 50%; transform: translateX(-50%); margin: 0; padding: 0.3rem 0.9rem; border-radius: var(--radius-pill); background: var(--lagoon-deep); color: var(--white); font: 800 0.85rem/1.2 var(--display); white-space: nowrap; }
[dir="rtl"] .plan-flag { transform: translateX(50%); }
.plan-name { margin: 0.3rem 0 0; font-size: 1.4rem; }
.plan-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.plan-price strong { font: 900 2.3rem/1 var(--display); letter-spacing: -0.02em; }
.plan-price span { font: 700 0.95rem/1.2 var(--display); color: var(--ink-soft); }
.plan-tagline { margin: 0; color: var(--ink-soft); }
.plan-benefits { flex: 1; margin-block: 0.4rem 0.8rem; }
.plan-benefits ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.plan-benefits li { position: relative; padding-inline-start: 1.8rem; font-size: 0.98rem; }
.plan-benefits li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.2em; inline-size: 1.2rem; block-size: 1.2rem; background: var(--lagoon-deep); -webkit-mask: var(--icon-disc-check) center / contain no-repeat; mask: var(--icon-disc-check) center / contain no-repeat; }
.plan-featured .plan-name::after { content: ""; display: inline-block; inline-size: 1rem; block-size: 1rem; margin-inline-start: 0.4rem; border-radius: 50%; background: linear-gradient(var(--gold), var(--coral)); }
.lp-badge-demo { display: grid; justify-items: center; gap: 0.5rem; text-align: center; }
.how-steps-4 { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

/* ---- /link-partner ----------------------------------------------------------------------------- */

.snippet-city { max-inline-size: 22rem; }
.snippet-city select { inline-size: 100%; }
.snippet-grid { margin-block-start: var(--space-m); }
.snippet-card { display: grid; gap: 0.6rem; align-content: start; }
.snippet-card h3 { margin: 0; }
.snippet-card .hint { margin: 0; }
.snippet-preview { margin: 0.3rem 0; padding: 1rem; border-radius: var(--radius); background: var(--sand); font-weight: 700; }
.snippet-code { margin: 0; padding: 0.9rem 1rem; border-radius: var(--radius); background: var(--ink); color: var(--on-dark); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.85rem; line-height: 1.5; }
.snippet-code code { font-size: inherit; }
.snippet-card .button { justify-self: start; }
.copy-status { min-block-size: 1.6em; margin-block-start: var(--space-xs); font-weight: 700; color: var(--ok); }
.lp-rules { align-items: start; }
.lp-rules h2 { margin-block-start: 0; }

/* ---- /about and /contact ----------------------------------------------------------------------- */

.about-hero { padding-block: var(--space-xl) var(--space-l); }
.about-hero .crumbs { margin-block-end: var(--space-s); }
.about-cols .card { display: grid; gap: 0.5rem; justify-items: start; }
.about-cols h2 { margin: 0.4rem 0 0; }
.about-text h2 { font-size: var(--h3); }

.contact-layout { display: grid; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); align-items: start; }
@media (min-width: 60rem) { .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.contact-intro .crumbs { margin-block-end: var(--space-s); }
.contact-tip { margin-block-start: var(--space-l); display: grid; gap: 0.4rem; justify-items: start; }
.contact-tip h2 { margin: 0; }
.contact-tip p { margin: 0; }
.contact-form-card { padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); border-radius: var(--radius-xl); box-shadow: 0 0 0 1px rgb(239 220 195 / 0.9), var(--shadow-l); }
.contact-form-card h2 { margin: 0 0 var(--space-s); }
.contact-form-card .notice { margin-block-end: var(--space-s); }

/* ---- Motion and print -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .co-card, .feat-card, .city-card, .city-card-media img, .gallery img { transition: none; transform: none !important; }
}
@media print {
  .dir-hero-media, .co-cover, .list-band, .filter-chips, .hero-search, .co-aside form { display: none !important; }
  .dir-hero { padding-block-start: 0; }
  .dir-hero-panel, .co-header { box-shadow: none; }
}

/* ---- Hues (last, so they win over the plain backgrounds above) ------------------------------------ */

/* Six soft sea-and-sunset washes, picked from the slug: the same company always gets the same. */
.co-hue-0 { background: linear-gradient(135deg, #d8f3ef, #a9e3da); }
.co-hue-1 { background: linear-gradient(135deg, #ffe7dd, #ffc6ad); }
.co-hue-2 { background: linear-gradient(135deg, #fff2d4, #ffd98f); }
.co-hue-3 { background: linear-gradient(135deg, #e1ecfb, #b9d2f2); }
.co-hue-4 { background: linear-gradient(135deg, #e5f4e1, #bfe3b5); }
.co-hue-5 { background: linear-gradient(135deg, #f3e6f5, #dcc2e3); }
.feat-card .co-monogram { background: var(--white); color: var(--lagoon-deep); }
.co-cover.co-cover-plain { block-size: clamp(6.5rem, 4rem + 8vw, 11rem); }

/* ---- Phones: a shorter photo and a tighter panel, so the search or the companies show sooner ---- */
@media (max-width: 40rem) {
  .dir-hero { padding-block-start: 8.5rem; }
  .dir-hero-media { block-size: 13rem; }
  .dir-hero-home > .dir-hero-inner .eyebrow { display: none; }
  .dir-hero-panel { padding: 1.25rem 1.15rem 1.4rem; border-radius: var(--radius-l); }
  .dir-hero-panel .lead { font-size: 1.05rem; margin-block-end: var(--space-s); }
  .dir-hero-home .display { font-size: 2.05rem; }
  .hero-facts li { padding-inline: 0.7rem; }
  .hero-facts strong { font-size: 1.15rem; }
  .co-card { gap: 0.85rem; }
  .co-logo-m { inline-size: 3.6rem; block-size: 3.6rem; font-size: 1.2rem; border-radius: 14px; }
}
@media (max-width: 40rem) {
  .hero-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0.4rem; }
  .hero-facts li { flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.5rem 0.6rem; font-size: 0.8rem; }
  .hero-actions .button { flex: 1 1 100%; }
}
.co-chip { padding-block: 0.2rem; }
/* Narrow phones: the logo beside the name, everything else at full width under them. */
@media (max-width: 29.99rem) {
  .co-card { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.55rem; align-items: center; }
  .co-card-body { display: contents; }
  .co-card-body > :not(.co-card-head) { grid-column: 1 / -1; }
  .co-card .co-logo-m { inline-size: 3.2rem; block-size: 3.2rem; font-size: 1.1rem; }
}

/* ---- Admin -> Analytics (templates/admin/analytics; this file is linked from its head) ---------- */
.an-ranges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: var(--space-s) var(--space-m); }
.an-totals .admin-card h2 { font-size: 1rem; }
.an-chart-card { margin-block: var(--space-m); }
.an-chart { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 720 / 220; }
.an-grid { display: grid; gap: var(--space-l); }
@media (min-width: 60rem) { .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.an-bars { list-style: none; padding: 0; margin: 0 0 var(--space-l); display: grid; gap: 0.35rem; }
.an-bars li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(4rem, 1fr) 3.5rem; gap: 0.75rem; align-items: center; max-inline-size: none; padding-block: 0.25rem; border-block-end: 1px dashed var(--sand-deep); }
.an-bar-label { overflow-wrap: anywhere; font-size: 0.95rem; }
.an-bar { display: block; inline-size: 100%; block-size: 0.7rem; }
.an-bar-value { text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Hero layout v2 (2026-10-02): no dead photo band above the words ----------------------------
   Home, computers: the photo fills the whole hero (screen height, capped) and the headline, lead,
   search and trust points sit on it in a frosted panel, vertically centred, all in the first
   screen. Phones and tablets: a shorter photo strip with the panel overlapping it. City pages: the
   same panel-over-photo idea with a much smaller offset. */
.dir-hero-home { padding-block: clamp(7.5rem, 4.5rem + 16vw, 11rem) var(--space-l); }
.dir-hero-home .dir-hero-media { block-size: clamp(10rem, 6rem + 22vw, 15rem); }
@media (min-width: 64rem) {
  .dir-hero-home {
    display: grid;
    align-items: center;
    min-block-size: min(calc(100svh - 4.5rem), 46rem);
    padding-block: clamp(2rem, 1rem + 3vw, 3.5rem);
  }
  .dir-hero-home .dir-hero-media { inset-block: 0; block-size: auto; }
  .dir-hero-home .dir-hero-media .dir-hero-photo img { object-position: center 45%; }
  /* A light wash behind the panel (left) and a fade into the page (bottom). */
  .dir-hero-home .dir-hero-shade {
    inset: 0;
    block-size: auto;
    background:
      linear-gradient(to bottom, rgb(255 250 243 / 0) 72%, var(--shell)),
      linear-gradient(to right, rgb(255 250 243 / 0.55), rgb(255 250 243 / 0.15) 45%, rgb(255 250 243 / 0) 70%);
  }
  .dir-hero-home .dir-hero-panel {
    max-inline-size: 42rem;
    background: rgb(255 255 255 / 0.9);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    box-shadow: 0 24px 60px rgb(23 43 77 / 0.22), 0 0 0 1px rgb(255 255 255 / 0.6);
  }
  .dir-hero-home .display { font-size: clamp(2.3rem, 1.2rem + 2.2vw, 3.25rem); line-height: 1.05; }
  .dir-hero-home .dir-hero-panel .lead { margin-block-end: var(--space-s); font-size: 1.12rem; line-height: 1.5; max-inline-size: 46ch; }
  .dir-hero-home .hero-search { padding: 0.6rem 0.6rem 0.6rem 0.9rem; }
  .dir-hero-city { padding-block-start: 5rem; }
  .dir-hero-city h1 { font-size: clamp(2rem, 1.2rem + 1.9vw, 2.75rem); }
  .dir-hero-city .dir-hero-media { block-size: 15rem; }
}
@media (min-width: 64rem) and (max-height: 50rem) {
  /* Laptop screens: keep the search above the fold. */
  .dir-hero-home .display { font-size: clamp(2.1rem, 1rem + 2vw, 2.8rem); }
  .dir-hero-home .dir-hero-panel { padding: clamp(1.2rem, 0.8rem + 1.6vw, 2rem); }
  .dir-hero-home .hero-trust { margin-block-start: var(--space-xs); }
  .dir-hero-home .dir-hero-panel .lead { font-size: 1.02rem; margin-block-end: var(--space-xs); }
  .dir-hero-home .dir-hero-panel h1 { margin-block-end: var(--space-2xs); }
  .dir-hero-home .hero-search-field label { font-size: 0.82rem; }
}
@media (max-width: 63.99rem) {
  .dir-hero-city { padding-block-start: clamp(7rem, 4rem + 16vw, 10rem); }
  .dir-hero-city .dir-hero-media { block-size: clamp(9.5rem, 6rem + 20vw, 14rem); }
}