/**
 * For Businesses.
 *
 * From businesses-simple.html, mock hex mapped onto theme tokens.
 * 1280px container, matching the rest of the site.
 */

.cul-biz {
    --bz-navy:      var(--cul-brand, #1B3A5C);
    --bz-navy-dk:   var(--cul-brand-hover, #152e4a);
    --bz-head:      var(--cul-brand, #1B3A5C);
    --bz-ink:       var(--cul-g700, #444);
    --bz-ink-soft:  #64798c;
    --bz-line:      var(--cul-g200, #d0dce8);
    --bz-line-mid:  var(--cul-g100, #e0e8f0);
    --bz-page:      var(--cul-g50, #EEF4FB);
    --bz-accent:    #0f6b7b;
    --bz-wash:      #e6f2f4;
    --bz-orange:    var(--cul-accent, #E87722);
    --bz-orange-dk: #cf5f0a;
    --bz-orange-w:  #fff7f0;
    --bz-orange-l:  #f4d6b8;
    --bz-white:     var(--cul-white, #fff);
    --bz-r:         5px;
    --bz-col:       var(--cul-content-w, 1280px);
    --bz-gutter:    var(--cul-gutter, 24px);

    background: var(--bz-white);
    font-family: var(--cul-font, 'DM Sans', system-ui, sans-serif);
    color: var(--bz-ink);
}
.cul-biz *, .cul-biz *::before, .cul-biz *::after { box-sizing: border-box; }
.cul-biz__col { max-width: var(--bz-col); margin: 0 auto; padding: 0 var(--bz-gutter); }

/* ── Hero ────────────────────────────────────────────────────────────── */

.cul-biz__hero {
    background-color: var(--bz-navy);
    background-image:
        radial-gradient(680px 300px at 10% 6%, rgba(232,119,34,.24), transparent 62%),
        linear-gradient(160deg, #1e4266, #122c46);
    color: #fff;
    padding: 64px 0 58px;
    text-align: center;
}
.cul-biz__eyebrow {
    margin: 0 0 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #ffd0a3;
}
.cul-biz__h1 {
    max-width: 19ch;
    margin: 0 auto 16px;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
    font-size: 44px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}
.cul-biz__h1 em { font-style: normal; color: var(--bz-orange); }
.cul-biz__lede {
    max-width: 56ch;
    margin: 0 auto 30px;
    font-size: 18px;
    line-height: 1.55;
    color: #c3d6e6;
}
.cul-biz__fine { margin: 16px 0 0; font-size: 13.5px; color: #9db4c8; }

/* ── The search ──────────────────────────────────────────────────────── */

.cul-biz__find { position: relative; max-width: 620px; margin: 0 auto; text-align: left; }
.cul-biz__find-lab {
    display: block;
    text-align: center;
    margin: 0 0 10px;
    font-size: 13.5px;
    color: #9db4c8;
}
.cul-biz__fbox { display: flex; background: #fff; border-radius: var(--bz-r); overflow: hidden; }
.cul-biz__fbox input {
    flex: 1;
    min-width: 0;
    min-height: 56px;
    padding: 0 18px;
    border: 0;
    font: inherit;
    font-size: 16.5px;
    color: var(--bz-head);
}
.cul-biz__fbox input:focus { outline: none; }
.cul-biz__fbox button {
    -webkit-appearance: none; appearance: none;
    border: 0;
    padding: 0 24px;
    background: var(--bz-orange) !important;
    color: #fff !important;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.cul-biz__fbox button:hover { background: var(--bz-orange-dk) !important; }

.cul-biz__res {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    z-index: 20;
    background: #fff;
    border-radius: var(--bz-r);
    box-shadow: 0 12px 34px rgba(6,17,30,.32);
    overflow: hidden;
    text-align: left;
}
.cul-biz__res[hidden] { display: none; }

.cul-biz__row,
.cul-biz__row:link,
.cul-biz__row:visited {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--bz-line);
    color: var(--bz-ink) !important;
    text-decoration: none !important;
}
.cul-biz__row:last-child { border-bottom: 0; }
.cul-biz__row:hover { background: var(--bz-wash); }
.cul-biz__row-ini {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #f1f4f8;
    border: 1px solid var(--bz-line-mid);
    color: var(--bz-ink-soft);
    font-size: 12.5px;
    font-weight: 700;
}
.cul-biz__row-t { flex: 1; min-width: 0; }
.cul-biz__row-n {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bz-head);
    /* Long business names truncate rather than pushing the button out. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cul-biz__row-c {
    display: block;
    font-size: 12.5px;
    color: var(--bz-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cul-biz__row-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: var(--bz-r);
    background: var(--bz-navy);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}
.cul-biz__row.is-add { background: #fbfcfe; }
.cul-biz__row.is-add .cul-biz__row-ini {
    background: var(--bz-orange-w);
    border-color: var(--bz-orange-l);
    color: var(--bz-orange-dk);
    font-size: 18px;
}
.cul-biz__row.is-add .cul-biz__row-btn { background: var(--bz-orange); }

/* ── Reach ───────────────────────────────────────────────────────────── */

.cul-biz__reach { background: #fff; border-bottom: 1px solid var(--bz-line); }
.cul-biz__reach-in {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: var(--bz-col);
    margin: 0 auto;
}
.cul-biz__reach-in > div {
    padding: 20px 34px;
    text-align: center;
    border-right: 1px solid var(--bz-line);
}
.cul-biz__reach-in > div:last-child { border-right: 0; }
.cul-biz__reach-n {
    margin: 0;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bz-orange);
}
.cul-biz__reach-t { margin: 2px 0 0; font-size: 13.5px; color: var(--bz-ink-soft); }

/* ── Sections ────────────────────────────────────────────────────────── */

.cul-biz__sec { padding: 64px 0; }
.cul-biz__sec--tight { padding: 52px 0; }
.cul-biz__sec--tint { background: var(--bz-page); }
.cul-biz__h2 {
    margin: 0 0 8px;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--bz-head);
    text-align: center;
}
.cul-biz__sub {
    max-width: 56ch;
    margin: 0 auto 38px;
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--bz-ink-soft);
    text-align: center;
}

/* ── Already listed ──────────────────────────────────────────────────── */

.cul-biz__already {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
    max-width: 820px;
    margin: 0 auto;
    padding: 26px 28px;
    background: var(--bz-orange-w);
    border: 1px solid var(--bz-orange-l);
    border-radius: var(--bz-r);
}
.cul-biz__already-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--bz-orange-l);
    color: var(--bz-orange-dk);
}
.cul-biz__already > div { flex: 1; min-width: 260px; }
.cul-biz__already h2 {
    margin: 0 0 6px;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
    font-size: 19px;
    font-weight: 700;
    color: var(--bz-head);
    text-align: left;
}
.cul-biz__already p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--bz-ink); }
.cul-biz__already p:last-child { margin-bottom: 0; }
.cul-biz__already b { color: var(--bz-head); font-weight: 650; }

/* ── Package ─────────────────────────────────────────────────────────── */

.cul-biz__pack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 940px;
    margin: 0 auto;
}
.cul-biz__pk {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 22px 24px;
    background: var(--bz-white);
    border: 1px solid var(--bz-line);
    border-radius: var(--bz-r);
}
.cul-biz__pk-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: var(--bz-r);
    background: var(--bz-orange-w);
    border: 1px solid var(--bz-orange-l);
    color: var(--bz-orange-dk);
}
.cul-biz__pk h3 {
    margin: 0 0 4px;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bz-head);
}
.cul-biz__pk p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--bz-ink-soft); }

.cul-biz__packnote {
    margin: 22px 0 0;
    text-align: center;
    font-size: 15.5px;
    font-weight: 650;
    color: var(--bz-head);
}
.cul-biz__packnote span { color: var(--bz-ink-soft); font-weight: 400; }
.cul-biz__deal {
    max-width: 820px;
    margin: 26px auto 0;
    text-align: center;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--bz-ink);
}
.cul-biz__deal b { color: var(--bz-head); font-weight: 700; }

/* ── Listing screenshot ──────────────────────────────────────────────── */

.cul-biz__shotwrap { max-width: 520px; margin: 34px auto 0; }
.cul-biz__shot {
    background: #fff;
    border: 1px solid var(--bz-line);
    border-radius: var(--cul-radius-card);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(6,17,30,.12);
}
.cul-biz__shot-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f1f4f8;
    border-bottom: 1px solid var(--bz-line);
}
.cul-biz__shot-bar i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #cfd8e2; }
.cul-biz__shot-url {
    flex: 1;
    margin-left: 8px;
    padding: 3px 8px;
    background: #fff;
    border: 1px solid var(--bz-line);
    border-radius: 3px;
    font-size: 10.5px;
    color: var(--bz-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cul-biz__shot-img { aspect-ratio: 16 / 7; overflow: hidden; background: var(--bz-line-mid); }
.cul-biz__shot-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cul-biz__shot-img.is-grad { background: linear-gradient(140deg, #1e4266, var(--bz-orange)); }
.cul-biz__shot-in { padding: 14px 16px; }
.cul-biz__shot-in h4 {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 700;
    color: var(--bz-head);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cul-biz__shot-cat { margin: 0 0 10px; font-size: 12px; color: var(--bz-ink-soft); }
.cul-biz__shot-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    background: var(--bz-orange-w);
    border: 1px solid var(--bz-orange-l);
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bz-head);
}
.cul-biz__shot-b {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 3px;
    background: var(--bz-orange);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
}
.cul-biz__shotcap { margin: 11px 0 0; text-align: center; font-size: 13px; color: var(--bz-ink-soft); }

/* ── Steps + offer ideas ─────────────────────────────────────────────── */

.cul-biz__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 940px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.cul-biz__step { text-align: center; padding: 0 6px; }
.cul-biz__n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--bz-orange);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}
.cul-biz__step h3 {
    margin: 0 0 6px;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
    font-size: 19px;
    font-weight: 700;
    color: var(--bz-head);
}
.cul-biz__step p { max-width: 32ch; margin: 0 auto; font-size: 15px; line-height: 1.55; color: var(--bz-ink-soft); }

.cul-biz__ideas-lead { margin: 34px 0 0; text-align: center; font-size: 15px; color: var(--bz-ink-soft); }
.cul-biz__ideas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 820px;
    margin: 22px auto 0;
}
.cul-biz__idea {
    padding: 16px 18px;
    text-align: center;
    background: #fff;
    border: 1px dashed var(--bz-orange-l);
    border-radius: var(--bz-r);
}
.cul-biz__idea-v { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--bz-head); }
.cul-biz__idea-d { margin: 3px 0 0; font-size: 13px; color: var(--bz-ink-soft); }

/* ── Quote ───────────────────────────────────────────────────────────── */

.cul-biz__quote {
    max-width: 820px;
    margin: 0 auto;
    padding: 28px 30px;
    background: #fff;
    border: 1px solid var(--bz-line);
    border-left: 3px solid var(--bz-orange);
    border-radius: var(--bz-r);
}
.cul-biz__quote p { margin: 0 0 14px; font-size: 19px; font-weight: 650; line-height: 1.5; color: var(--bz-head); }
.cul-biz__quote footer { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--bz-ink-soft); }
.cul-biz__quote-in {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--bz-wash);
    border: 1px solid #cfe4e7;
    color: var(--bz-accent);
    font-size: 12.5px;
    font-weight: 700;
}
.cul-biz__quote footer b { display: block; color: var(--bz-head); font-weight: 650; }

/* ── Timeline ────────────────────────────────────────────────────────── */

.cul-biz__after {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--bz-line);
    border-radius: var(--bz-r);
    overflow: hidden;
}
.cul-biz__r {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bz-line);
}
.cul-biz__r:last-child { border-bottom: 0; }
.cul-biz__when {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: var(--bz-r);
    background: var(--bz-wash);
    border: 1px solid #cfe4e7;
    color: var(--bz-accent);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.cul-biz__r p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--bz-ink); }
.cul-biz__r b { color: var(--bz-head); font-weight: 650; }

/* ── Price ───────────────────────────────────────────────────────────── */

.cul-biz__price {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    max-width: 820px;
    margin: 0 auto;
    padding: 22px 26px;
    background: var(--bz-page);
    border: 1px solid var(--bz-line);
    border-radius: var(--bz-r);
}
.cul-biz__price > div:first-child { flex: 1; min-width: 240px; }
.cul-biz__price h3 {
    margin: 0 0 4px;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--bz-head);
}
.cul-biz__price p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--bz-ink-soft); }
.cul-biz__price-r { text-align: right; font-size: 14px; color: var(--bz-ink-soft); }
.cul-biz__price-r b {
    display: block;
    font-family: var(--cul-font-display, 'Poppins', sans-serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--bz-head);
}

/* ── Ambassador ──────────────────────────────────────────────────────── */

.cul-biz__amb-k {
    max-width: 820px;
    margin: 0 auto 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bz-accent);
}

/* ── Mission ─────────────────────────────────────────────────────────── */

.cul-biz__mission { max-width: 720px; margin: 0 auto; text-align: center; }
.cul-biz__mission p { margin: 0 0 16px; font-size: 19px; line-height: 1.6; color: var(--bz-ink); }
.cul-biz__mission p:last-child { margin-bottom: 0; }
.cul-biz__mission b { color: var(--bz-head); font-weight: 700; }

/* ── Closing ─────────────────────────────────────────────────────────── */

.cul-biz__final {
    background: linear-gradient(160deg, #1e4266, #122c46);
    color: #fff;
    padding: 60px 0;
    text-align: center;
}
.cul-biz__final .cul-biz__h2 { color: #fff; font-size: 30px; }
.cul-biz__final .cul-biz__sub { color: #c3d6e6; max-width: 50ch; margin-bottom: 26px; }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 820px) {
    .cul-biz__hero { padding: 46px 0 42px; }
    .cul-biz__h1 { font-size: 30px; }
    .cul-biz__lede { font-size: 16.5px; }
    .cul-biz__sec { padding: 48px 0; }
    .cul-biz__sec--tight { padding: 40px 0; }
    .cul-biz__h2 { font-size: 25px; }
    .cul-biz__final .cul-biz__h2 { font-size: 24px; }

    .cul-biz__pack,
    .cul-biz__steps,
    .cul-biz__ideas { grid-template-columns: minmax(0, 1fr); }
    .cul-biz__steps { gap: 30px; }

    .cul-biz__fbox { flex-direction: column; }
    .cul-biz__fbox button { min-height: 52px; }

    /* On a narrow column the results should not float over the page — they
       sit in the flow so the whole list is reachable with the keyboard up. */
    .cul-biz__res {
        position: static;
        margin-top: 8px;
        box-shadow: none;
        border: 1px solid var(--bz-line);
    }

    .cul-biz__reach-in > div { padding: 16px 20px; border-right: 0; }
    .cul-biz__price-r { text-align: left; }
}
@media (max-width: 420px) {
    .cul-biz__h1 { font-size: 26px; }
    .cul-biz__row { gap: 10px; padding: 11px 12px; }
    .cul-biz__row-btn { padding: 0 11px; font-size: 12.5px; }
}

/* ── Hero photo mosaic ────────────────────────────────────────────────────
   Real listing photos behind the hero, the same treatment as the homepage.
   Markup comes from cul_hero_mosaic_markup() so the tiles, srcset and mobile
   `sizes` are defined in one place for all three heroes.

   The scrim has to be heavier here than on the homepage's desktop hero: this
   copy is centred across the full width rather than sitting in a left column,
   so it crosses the busiest part of the grid at every size. It keeps the
   hero's own orange glow on top of the photos so the page still looks like
   itself.

   Scoped to --has-mosaic, which is only added when the city actually has
   enough photos. Without it the section keeps its plain gradient.
   ────────────────────────────────────────────────────────────────────────── */
.cul-biz__hero--has-mosaic { position: relative; overflow: hidden; }
.cul-biz__hero--has-mosaic .cul-hero-mosaic {
    position: absolute; inset: 0; z-index: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2px;
}
.cul-biz__hero--has-mosaic .cul-hero-mosaic__tile { display: block; overflow: hidden; min-height: 0; }
.cul-biz__hero--has-mosaic .cul-hero-mosaic__tile img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.cul-biz__hero--has-mosaic .cul-hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(680px 300px at 10% 6%, rgba(232,119,34,.20), transparent 62%),
        linear-gradient(160deg, rgba(30,66,102,.90), rgba(18,44,70,.88));
}
.cul-biz__hero--has-mosaic .cul-biz__col { position: relative; z-index: 2; }

@media (max-width: 899px) {
    /* Two columns, three rows. Six columns over a hero this tall makes each
       tile a letterbox slice with nothing recognisable in it, and only the
       first six tiles are requested. Matches the homepage. */
    .cul-biz__hero--has-mosaic .cul-hero-mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    .cul-biz__hero--has-mosaic .cul-hero-mosaic__tile:nth-child(n+7) { display: none; }
}