:root {
    --pine: #14532d;
    --pine-dark: #0d3a20;
    --chinar: #ea7317;
    --bg: #f7f6f3;
    --ink: #1f2937;
    --muted: #6b7280;
    --line: #e5e2da;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Nothing may widen the document sideways on a phone; long unbroken strings in
   curated listings (URLs, notification numbers) are the usual culprit. */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; }
h1, h2, h3, p, li, .desc, .org { overflow-wrap: anywhere; }
body { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; background: var(--bg); color: var(--ink); }
a { text-decoration: none; color: inherit; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }

header { background: #fff; border-bottom: 1px solid var(--line); }
/* 72px, not 60: the brand is now the logo alone, and the logo has to be legible. */
.nav { display: flex; align-items: center; height: 72px; gap: 24px; }
.logo { font-size: 1.2rem; font-weight: 800; color: var(--pine); }
.logo span { color: var(--chinar); }

/* Header brand: the employer's logo (from Wath) IS the brand — the wordmark only
   appears when there is no logo to show. Sized to fill the 60px header row while
   leaving breathing room. Kept separate from .logo, which the footer still uses on
   a dark background. */
/* Wath crops every employer logo to a 512x512 SQUARE. A WIDE logo therefore
   arrives with large empty margins baked in — measured on the live file, the
   artwork is 3.8:1 and fills only ~25% of the image height, blank above and
   below. Scaling that square to fit the header leaves the mark ~13px tall:
   unreadable, and no re-crop fixes it, because a wide logo cannot fill a square.
   So render the image far larger than the row and CLIP the blank margins away.
   220px tall, pulled up 74px => a 72px window showing artwork ~207x55px. */
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; height: 72px; overflow: hidden; }
.brand-mark { height: 220px; width: auto; margin: -74px 0; display: block; }
.brand-word { font-size: 1.2rem; font-weight: 800; color: var(--pine); white-space: nowrap; }
.brand-word .accent { color: var(--chinar); }

.nav-links { margin-left: auto; display: flex; gap: 22px; font-size: .92rem; color: var(--muted); }
.nav-links a:hover { color: var(--pine); }

.intro { background: #fff; border-bottom: 1px solid var(--line); padding: 34px 0 26px; }
.intro h1 { font-size: 1.55rem; color: var(--pine-dark); }
.intro p { color: var(--muted); margin-top: 6px; max-width: 640px; font-size: .95rem; }
.searchbar { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.searchbar input, .searchbar select { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: .95rem; background: #fff; }
.searchbar input { flex: 1 1 260px; }
.searchbar select { flex: 0 1 180px; color: var(--muted); }
.searchbar button { background: var(--pine); color: #fff; border: none; border-radius: 8px; padding: 10px 22px; font-weight: 700; font-size: .95rem; cursor: pointer; }

.notice { background: #fdf1e6; border: 1px solid #f3d9bd; color: #9a5210; border-radius: 10px; padding: 10px 16px; font-size: .85rem; margin-top: 20px; }
.notice.warn { background: #fdecea; border-color: #f5c6c2; color: #b02a20; }
.notice code { background: #fff; border: 1px solid #f3d9bd; border-radius: 5px; padding: 1px 6px; font-size: .8rem; }
.empty { background: #fff; border: 1px dashed var(--line); border-radius: 10px; padding: 34px 20px; text-align: center; color: var(--muted); font-size: .92rem; }
.ico img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.listhead { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px; }
.listhead h2 { font-size: 1.05rem; }
.listhead span { font-size: .85rem; color: var(--muted); }
.listhead .sort { margin-left: auto; font-size: .85rem; color: var(--muted); }

.job { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin-bottom: 12px; display: flex; gap: 16px; align-items: flex-start; transition: .12s; }
.job:hover { border-color: var(--pine); box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.job .ico { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.job h3 { font-size: 1.05rem; color: var(--pine-dark); }
.job .org { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.job .meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.job .desc { font-size: .84rem; color: var(--muted); margin-top: 10px; max-width: 620px;
             display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pill { font-size: .76rem; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 3px 11px; color: var(--muted); }
.pill.pay { color: var(--pine); font-weight: 700; background: #eef6f0; border-color: #cfe3d6; }
.pill.new { color: var(--chinar); font-weight: 700; background: #fdf1e6; border-color: #f3d9bd; }
.job .right { margin-left: auto; text-align: right; flex-shrink: 0; }
.job .date { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.job .view { display: inline-block; margin-top: 12px; font-size: .85rem; font-weight: 700; color: var(--chinar); }

.pager { display: flex; justify-content: center; gap: 8px; margin: 26px 0 40px; }
.pager a { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; font-size: .88rem; color: var(--muted); }
.pager a.on { background: var(--pine); border-color: var(--pine); color: #fff; font-weight: 700; }

/* ── Job detail page ── */
.crumb { font-size: .84rem; color: var(--muted); margin: 20px 0 14px; }
.crumb a { color: var(--pine); font-weight: 600; }
.detail { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 44px; }
.detail-main { flex: 1 1 560px; min-width: 0; }
.detail-side { flex: 1 1 260px; max-width: 320px; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; margin-bottom: 14px; }
.detail-head { display: flex; gap: 16px; align-items: flex-start; }
.detail-head .ico { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.detail-head h1 { font-size: 1.35rem; color: var(--pine-dark); line-height: 1.25; }
.detail-head .org { font-size: .9rem; color: var(--muted); margin-top: 3px; }
.detail-head .meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

.card h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pine); margin-bottom: 12px; }
.card p.body { font-size: .92rem; line-height: 1.65; }
.card ul { padding-left: 20px; }
.card li { font-size: .9rem; line-height: 1.7; }
.skills { display: flex; flex-wrap: wrap; gap: 8px; }
.skill { font-size: .8rem; background: #eef6f0; border: 1px solid #cfe3d6; color: var(--pine); border-radius: 20px; padding: 4px 13px; font-weight: 600; }

.facts { list-style: none; padding: 0 !important; }
.facts li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .86rem; }
.facts li:last-child { border-bottom: none; }
.facts .k { color: var(--muted); }
.facts .v { font-weight: 600; text-align: right; }
.facts .v.pay { color: var(--pine); }

.apply-card { border-color: #f3d9bd; background: #fffdf9; }
.apply-card .btn-apply { display: block; text-align: center; background: var(--chinar); color: #fff; font-weight: 800; border-radius: 9px; padding: 12px; margin-top: 12px; font-size: .98rem; }
.apply-card .btn-apply:hover { background: #c95b0c; }
.apply-card .how { font-size: .85rem; line-height: 1.6; color: var(--ink); }
.apply-card .contact { font-size: .84rem; color: var(--muted); margin-top: 10px; }
.deadline { font-size: .82rem; color: #b91c1c; font-weight: 600; margin-top: 10px; }

footer { background: var(--pine-dark); color: #b9cec1; padding: 28px 0; font-size: .84rem; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer .logo { color: #fff; font-size: 1rem; }
.mock-note { text-align: center; font-size: .74rem; color: var(--muted); padding: 12px; }

@media (max-width: 620px) {
    .job { flex-wrap: wrap; }
    .job .right { margin-left: 62px; text-align: left; width: 100%; }
    .job .view { margin-top: 6px; }

    /* Narrow screens: same clipping, smaller window, so the links still fit. */
    /* A legible logo plus three links doesn't fit one row on a phone, so let the
       links drop to a second line instead of shrinking the logo back to nothing. */
    .nav { height: auto; min-height: 60px; flex-wrap: wrap; gap: 2px 12px; padding: 6px 0; }
    .brand { gap: 8px; height: 56px; }
    .brand-mark { height: 150px; margin: -47px 0; }
    /* flex-basis 100% puts the links on their own row; margin-left:auto from the
       desktop rule would otherwise keep them clinging to the logo and overflow. */
    .nav-links { flex: 1 0 100%; margin-left: 0; gap: 18px; font-size: .88rem; padding-bottom: 4px; }
    .brand-word { font-size: 1rem; }
}

/* ── Job attachments: scanned notices, adverts, official PDFs ───────────────
   Curated listings are transcribed from a source document, so the document
   itself is often what a seeker actually wants. Images render inline at full
   width; other files become a clearly tappable row. */
.attachments { display: flex; flex-direction: column; gap: 14px; }

.attach-img { margin: 0; }
.attach-img img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.attach-img figcaption { margin-top: 6px; font-size: .85rem; color: var(--muted); }

.attach-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-decoration: none; color: var(--ink); }
.attach-file:hover { border-color: var(--pine); background: #f7fbf8; }
.attach-icon { font-size: 1.4rem; line-height: 1; }
.attach-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attach-meta strong { color: var(--pine-dark); font-size: .95rem; }
.attach-note { font-size: .8rem; color: var(--muted); word-break: break-word; }
.attach-open { margin-left: auto; font-size: .85rem; font-weight: 700; color: var(--pine); white-space: nowrap; }

/* Listing banner (the "bannerAdvt" attachment) — sits above the description as
   artwork for the post, so no card padding fighting the image edges. */
.job-banner { padding: 0; overflow: hidden; }
.job-banner img { width: 100%; height: auto; display: block; }

/* Category chip — leads the row on every card, so it reads as the primary
   classification rather than one more attribute. */
.pill.cat { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; font-weight: 700; }

/* Jump-link to the attached notice, at the top of a job that has documents. */
.docs-jump { display: flex; align-items: center; gap: 12px; background: #fffdf9; border: 1px solid #f3d9bd;
             border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; color: var(--ink); }
.docs-jump:hover { border-color: var(--chinar); background: #fdf6ec; }
.docs-jump-icon { font-size: 1.5rem; line-height: 1; }
.docs-jump-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.docs-jump-text strong { color: #9a5210; font-size: .95rem; }
.docs-jump-text span { font-size: .82rem; color: var(--muted); }
.docs-jump-go { margin-left: auto; font-weight: 800; color: var(--chinar); font-size: .88rem; white-space: nowrap; }
/* The jump lands on a card whose heading would otherwise sit under the header. */
#documents { scroll-margin-top: 16px; }

/* ── Mobile ───────────────────────────────────────────────────────────────
   The board is read on phones far more than on desktops, so these are not
   afterthought tweaks: the job card stops being a 3-column row, the detail
   page stops being two columns, and every tappable thing keeps a finger-sized
   target. */
@media (max-width: 900px) {
    /* Sidebar drops under the main column well before it gets cramped. */
    .detail { flex-direction: column; gap: 0; }
    .detail-main, .detail-side { flex: 1 1 auto; max-width: 100%; width: 100%; }
}

@media (max-width: 620px) {
    .wrap { padding: 0 14px; }

    .intro { padding: 22px 0 20px; }
    .intro h1 { font-size: 1.25rem; line-height: 1.3; }
    .intro p { font-size: .88rem; }

    /* Search: full-width stacked controls, and a button you can actually hit.
       flex:none matters — the desktop rules set flex-basis 260px/180px, which in a
       COLUMN container is read as height, giving 260px-tall input boxes. */
    .searchbar { flex-direction: column; gap: 8px; margin-top: 14px; }
    .searchbar input, .searchbar select, .searchbar button {
        flex: none; width: 100%; padding: 12px 14px; font-size: 1rem; }

    .listhead { flex-wrap: wrap; gap: 4px 10px; margin: 18px 0 10px; }
    .listhead .sort { margin-left: auto; }

    /* Job card: icon + text on one row, everything else stacked underneath.
       The old rule left .right floating with a 62px indent that no longer
       matched anything once the card reflowed. */
    .job { flex-wrap: wrap; padding: 14px 15px; gap: 12px; }
    .job .ico { width: 40px; height: 40px; flex: 0 0 40px; font-size: 1.05rem; }
    .job > div:not(.ico):not(.right) { flex: 1 1 200px; min-width: 0; }
    .job h3 { font-size: .98rem; line-height: 1.35; }
    .job .org { font-size: .8rem; }
    .job .desc { -webkit-line-clamp: 3; font-size: .82rem; }
    .job .meta { gap: 6px; }
    .pill { font-size: .72rem; padding: 3px 9px; }
    .job .right { width: 100%; margin-left: 0; display: flex; align-items: center;
                  justify-content: space-between; text-align: left;
                  border-top: 1px dashed var(--line); padding-top: 10px; }
    .job .view { margin-top: 0; }

    /* Detail page */
    .crumb { margin: 14px 0 10px; font-size: .8rem; }
    .card { padding: 16px 16px; border-radius: 10px; }
    .detail-head { gap: 12px; }
    .detail-head .ico { width: 44px; height: 44px; flex: 0 0 44px; }
    .detail-head h1 { font-size: 1.12rem; }
    .detail-head .org { font-size: .84rem; }
    .card h2 { font-size: .85rem; }
    .card p.body, .card li { font-size: .88rem; }

    .docs-jump { padding: 12px 14px; gap: 10px; }
    .docs-jump-text strong { font-size: .88rem; }
    .docs-jump-go { font-size: .8rem; }

    .attach-file { padding: 12px; }
    .attach-open { font-size: .78rem; }

    .facts li { font-size: .82rem; }
    .apply-card .btn-apply { padding: 14px; font-size: 1rem; }

    /* Pager: wraps instead of overflowing once there are several pages. */
    .pager { flex-wrap: wrap; gap: 6px; }
    .pager a { padding: 9px 14px; }

    footer .wrap { flex-direction: column; gap: 14px; }
}

@media (max-width: 380px) {
    /* Very small phones: the meta row is the first thing to overflow. */
    .job .ico { display: none; }
    .pill { font-size: .7rem; }
    .detail-head h1 { font-size: 1.05rem; }
}

/* ── "Powered by wath.in" invitation ───────────────────────────────────────
   This board is a notice service; the platform is wath.in. The invitation is
   deliberately styled apart from the listings — it is a different offer, and
   dressing it up as a job would be a dark pattern. */
.wath-kicker { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em;
               text-transform: uppercase; color: var(--chinar); margin-bottom: 6px; }

.wath-invite { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--chinar);
               border-radius: 12px; padding: 24px; margin: 26px 0 18px; }
.wath-head h2 { font-size: 1.15rem; color: var(--pine-dark); }
.wath-head p { font-size: .9rem; color: var(--muted); margin-top: 6px; max-width: 680px; line-height: 1.6; }

.wath-usps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 4px; }
.wath-usp { display: flex; gap: 10px; background: var(--bg); border: 1px solid var(--line);
            border-radius: 10px; padding: 14px; }
.wath-usp-icon { font-size: 1.3rem; line-height: 1.2; }
.wath-usp strong { display: block; font-size: .92rem; color: var(--pine-dark); line-height: 1.35; }
.wath-usp p { font-size: .82rem; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.wath-proof { display: block; font-size: .78rem; color: var(--pine); font-weight: 700; margin-top: 6px; }

.wath-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.wath-btn { display: inline-block; background: var(--chinar); color: #fff; font-weight: 800;
            border-radius: 9px; padding: 12px 20px; font-size: .95rem; text-align: center; }
.wath-btn:hover { background: #c95b0c; }
.wath-btn.ghost { background: #fff; color: var(--pine); border: 1px solid var(--pine); }
.wath-btn.ghost:hover { background: #eef6f0; }
.wath-link { font-size: .86rem; font-weight: 700; color: var(--pine); text-decoration: underline; }

.wath-emp { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px;
            padding-top: 16px; border-top: 1px dashed var(--line); }
.wath-emp-head { display: flex; gap: 10px; flex: 1 1 320px; }
.wath-emp-head strong { display: block; font-size: .92rem; color: var(--pine-dark); }
.wath-emp-head p { font-size: .82rem; color: var(--muted); margin-top: 3px; line-height: 1.55; }

/* Sidebar variant on the job page */
.wath-side { border-left: 4px solid var(--chinar); }
.wath-side h2 { margin-bottom: 10px; }
.wath-side-usp { display: flex; gap: 10px; margin-bottom: 12px; }
.wath-side-usp strong { display: block; font-size: .88rem; color: var(--pine-dark); line-height: 1.35; }
.wath-side-usp p { font-size: .8rem; color: var(--muted); line-height: 1.5; margin-top: 3px; }
.wath-side .wath-btn { display: block; margin-top: 4px; }
.wath-side .wath-link { display: block; text-align: center; margin-top: 10px; }
.wath-side.emp strong { display: block; font-size: .92rem; color: var(--pine-dark); margin-top: 6px; }
.wath-side.emp p { font-size: .82rem; color: var(--muted); line-height: 1.55; margin: 4px 0 12px; }

/* /why-wath */
.why-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 26px 0; align-items: start; }
.why-h { font-size: 1.05rem; color: var(--pine-dark); margin-bottom: 12px; }
.why-h span { font-weight: 500; color: var(--muted); font-size: .88rem; }
.why-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.why-item { display: flex; gap: 12px; background: #fff; border: 1px solid var(--line);
            border-radius: 10px; padding: 14px 16px; }
.why-item strong { display: block; font-size: .93rem; color: var(--pine-dark); line-height: 1.35; }
.why-item p { font-size: .84rem; color: var(--muted); line-height: 1.55; margin-top: 4px; }

@media (max-width: 900px) {
    .wath-usps { grid-template-columns: 1fr 1fr; }
    .why-split { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 620px) {
    .wath-invite { padding: 18px 16px; margin: 20px 0 14px; }
    .wath-head h2 { font-size: 1.05rem; }
    .wath-usps { grid-template-columns: 1fr; gap: 10px; }
    .wath-cta { flex-direction: column; align-items: stretch; gap: 10px; }
    .wath-cta .wath-btn { width: 100%; padding: 14px; }
    .wath-link { text-align: center; }
    .wath-emp .wath-btn { width: 100%; }
}

/* ── Header: professional on a phone ───────────────────────────────────────
   Previously the links wrapped to a bare second row that read as leftover
   markup. Now they sit in their own bar under the mark: separated, centred,
   evenly spaced, with real tap targets. */
.nav-links a { padding: 2px 0; }
.nav-links a:hover { color: var(--pine); }

/* Share row */
.share-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn { display: inline-flex; align-items: center; justify-content: center;
             border-radius: 8px; padding: 9px 14px; font-weight: 700; font-size: .84rem;
             border: 1.5px solid transparent; cursor: pointer; color: #fff; }
.share-btn.wa { background: #25d366; }
.share-btn.fb { background: #1877f2; }
.share-btn.tg { background: #229ed9; }
.share-btn.tw { background: #0f1419; }
.share-btn.li { background: #0a66c2; }
.share-btn.em { background: var(--pine); }
.share-btn.copy { background: #fff; color: var(--ink); border-color: var(--line); }
.share-btn:hover { filter: brightness(1.08); }
.share-btn.copy:hover { border-color: var(--pine); background: #f7fbf8; filter: none; }

/* Legal pages — long-form reading, wider measure, clear hierarchy */
.legal { max-width: 780px; padding-bottom: 46px; }
.legal .lead { font-size: 1rem; line-height: 1.7; color: var(--ink); background: #fff;
               border: 1px solid var(--line); border-left: 4px solid var(--pine);
               border-radius: 10px; padding: 16px 18px; margin: 22px 0 8px; }
.legal h2 { font-size: 1rem; color: var(--pine-dark); margin: 24px 0 8px; }
.legal p { font-size: .92rem; line-height: 1.75; color: var(--ink); margin-bottom: 10px; }
.legal ul, .legal ol { padding-left: 22px; margin-bottom: 12px; }
.legal li { font-size: .92rem; line-height: 1.75; margin-bottom: 6px; }
.legal a { color: var(--pine); font-weight: 600; text-decoration: underline; }
.legal-foot { margin-top: 26px; padding-top: 14px; border-top: 1px dashed var(--line);
              font-size: .88rem; color: var(--muted); }
.legal-cta { background: #fffdf9; border: 1px solid #f3d9bd; border-radius: 12px;
             padding: 18px 20px; margin: 18px 0 6px; }
.legal-cta strong { display: block; font-size: .82rem; text-transform: uppercase;
                    letter-spacing: .05em; color: #9a5210; margin-bottom: 6px; }
.legal-mail { display: inline-block; font-size: 1.12rem; font-weight: 800; color: var(--pine) !important;
              text-decoration: none !important; word-break: break-all; }
.legal-cta span { display: block; font-size: .84rem; color: var(--muted); margin-top: 8px; line-height: 1.6; }

/* Contact map */
.map-card { margin-bottom: 14px; }
.map-frame { width: 100%; height: 300px; border: 0; border-radius: 10px; display: block; margin-bottom: 10px; }

/* Footer link row */
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.foot-links a { color: #b9cec1; font-size: .82rem; }
.foot-links a:hover { color: #fff; }

@media (max-width: 620px) {
    /* The nav becomes its own centred bar rather than a stray wrapped row. */
    .nav { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 0; min-height: 0; }
    .brand { justify-content: center; height: 52px; }
    .brand-mark { height: 140px; margin: -44px 0; }
    .nav-links { margin: 6px 0 0; justify-content: space-around; gap: 0;
                 border-top: 1px solid var(--line); padding: 2px 0; width: 100%; }
    .nav-links a { flex: 1; text-align: center; padding: 11px 2px; font-size: .82rem; font-weight: 600; }

    .share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .share-btn { padding: 12px 10px; font-size: .82rem; }
    .share-btn.copy { grid-column: 1 / -1; }

    .legal .lead { font-size: .94rem; padding: 14px 15px; }
    .legal-mail { font-size: 1rem; }
    .map-frame { height: 230px; }
}