/* Galt Industry brand tokens, source: CustomerDevelopment/salesDeck/colors.css
   House rule from that handoff: copper is the ONLY accent. Steel blue stays
   supporting (links, self-serve quote flags) so copper never has to compete.
   Copper on light uses the text-safe #A84F20 (5.5:1); #C2612E is fills only.

   Scoped to .ms-page rather than :root so these tokens cannot redefine the
   site's own --ink and --muted. */
.ms-page {
    --color-primary:        #C2612E;
    --color-primary-strong: #A84F20;
    --color-secondary-text: #1F63B8;
    --color-page:      #F0F1EE;
    --color-surface:   #FBFBFA;
    --color-surface-2: #F6F6F3;
    --color-border:    #E2E3DE;
    --color-border-2:  #D5D6D0;
    --color-text:      #15181C;
    --color-text-2:    #565A5F;
    --color-muted:     #8A8D90;

    /* page roles mapped onto the brand scale */
    --ground:      var(--color-page);
    --surface:     var(--color-surface);
    --surface-alt: var(--color-surface-2);
    --ink:         var(--color-text);
    --ink-soft:    var(--color-text-2);
    --muted:       var(--color-muted);
    --rule:        var(--color-border);
    --rule-strong: var(--color-border-2);
    --accent:      var(--color-primary-strong);
    --accent-fill: var(--color-primary-strong);
    --accent-soft: #F6E7DC;
    --accent-ink:  #8A4019;
    --on-accent:   #FFFFFF;
    --link:        var(--color-secondary-text);
    --blue-soft:   #E4EDF9;
    --blue-ink:    #1B558F;
    --land:        #E4E5E0;
    --coast:       #B5B7B1;
    --dot:         var(--color-primary);

    /* Clearance for a host site's fixed header. 0 when the page stands alone;
       the Squarespace embed overrides this with the height of your header. */
    --ge-header-offset: 0px;

    --font-display: "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body:    Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
    --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  }


.ms-page, .ms-page * { box-sizing: border-box; }
.ms-page {
    background: var(--ground); color: var(--ink);
    font-family: var(--font-body); font-size: 16.5px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
.ms-page a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ms-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.ms-page .page {
    max-width: 1280px; margin: 0 auto;
    padding: calc(3rem + var(--ge-header-offset)) 1.5rem 4rem;
  }
.ms-page /* ---- masthead ---- */

  .masthead {
    display: grid; gap: 1.25rem 2rem; align-items: start;
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-areas: "intro map";
    margin-bottom: 2rem;
  }
.ms-page .intro { grid-area: intro; display: flex; flex-direction: column; gap: 0.9rem; }
.ms-page .mapwrap { grid-area: map; }
@media (max-width: 900px) {
.ms-page .masthead { grid-template-columns: 1fr; grid-template-areas: "intro" "map"; }
}
.ms-page .eyebrow {
    font-family: var(--font-mono); font-size: 0.7rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  }
.ms-page h1 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.5vw, 2.9rem);
    font-weight: 700; letter-spacing: -0.025em; line-height: 1.05;
    text-wrap: balance; margin: 0;
  }
.ms-page .standfirst { font-size: 1.05rem; color: var(--ink-soft); margin: 0; }
.ms-page .notes {
    max-width: 74ch; margin: 0.3rem 0 0; padding: 0 0 0 0.9rem;
    border-left: 2px solid var(--accent-fill); list-style: none;
    display: flex; flex-direction: column; gap: 0.45rem;
    font-family: var(--font-mono); font-size: 0.73rem; line-height: 1.55; color: var(--ink-soft);
  }
.ms-page .notes .lead { color: var(--ink); font-weight: 600; }
.ms-page .notes .cta { color: var(--ink); }
.ms-page .notes .mail { padding-top: 0.1rem; }
.ms-page .notes a { color: var(--accent-ink); font-weight: 600; }
.ms-page /* ---- layout ---- */

  .shell {
    display: grid; gap: 1.5rem; align-items: start;
    grid-template-columns: 262px minmax(0, 1fr);
  }
.ms-page .results { min-width: 0; }
@media (max-width: 900px) {
.ms-page .shell { grid-template-columns: 1fr; }
}
.ms-page /* ---- filter rail ---- */

  .rail, .ms-page .mapwrap {
    background: var(--surface); border: 1px solid var(--rule); border-radius: 2px;
    display: flex; flex-direction: column;
  }
.ms-page .rail {
    position: sticky; top: calc(1.25rem + var(--ge-header-offset));
    max-height: calc(100vh - 2.5rem - var(--ge-header-offset)); overflow-y: auto;
  }
@media (max-width: 900px) {
.ms-page .rail { position: static; max-height: none; }
}
.ms-page .panel-head {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule);
    position: sticky; top: 0; background: var(--surface); z-index: 2;
  }
.ms-page .panel-head h2 {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 500; color: var(--muted); margin: 0;
  }
.ms-page .reset {
    margin-left: auto; font-family: var(--font-mono); font-size: 0.7rem;
    background: none; border: 1px solid var(--rule); border-radius: 2px;
    color: var(--ink-soft); padding: 0.22rem 0.5rem; cursor: pointer;
  }
.ms-page .reset:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ms-page .reset:disabled { opacity: 0.4; cursor: default; }
.ms-page .search-wrap { padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule); }
.ms-page #q {
    width: 100%; font-family: var(--font-mono); font-size: 0.8rem;
    padding: 0.5rem 0.6rem; color: var(--ink);
    background: var(--ground); border: 1px solid var(--rule); border-radius: 2px;
  }
.ms-page #q::placeholder { color: var(--muted); }
.ms-page .facet { border-bottom: 1px solid var(--rule); }
.ms-page .facet:last-child { border-bottom: none; }
.ms-page .facet > summary {
    list-style: none; cursor: pointer;
    padding: 0.7rem 1rem; display: flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-soft);
  }
.ms-page .facet > summary::-webkit-details-marker { display: none; }
.ms-page .facet > summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 0.85rem; line-height: 1; }
.ms-page .facet[open] > summary::after { content: "\2212"; }
.ms-page .facet.lead > summary { color: var(--accent-ink); background: var(--accent-soft); }
.ms-page .facet > summary .tally {
    font-size: 0.65rem; color: var(--on-accent); background: var(--accent-fill);
    border-radius: 2px; padding: 0.05rem 0.3rem; letter-spacing: 0;
  }
.ms-page .facet-note {
    margin: 0; padding: 0 1rem 0.6rem;
    font-family: var(--font-mono); font-size: 0.66rem; line-height: 1.55; color: var(--muted);
  }
.ms-page .facet-body { padding: 0 0.75rem 0.85rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ms-page .opt {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.02em;
    padding: 0.28rem 0.5rem; border-radius: 2px; cursor: pointer;
    background: var(--surface-alt); color: var(--ink-soft);
    border: 1px solid transparent; text-align: left;
  }
.ms-page .opt:hover:not(:disabled) { border-color: var(--rule-strong); }
.ms-page .opt[aria-pressed="true"] { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.ms-page .opt .n { opacity: 0.6; margin-left: 0.3rem; }
.ms-page .opt:disabled { opacity: 0.32; cursor: default; }
.ms-page /* ---- map ---- */

  .mapfig { padding: 0.75rem 0.5rem 0.2rem; }
.ms-page .mapfig svg { display: block; width: 100%; height: auto; }
.ms-page .coast { fill: var(--land); stroke: var(--coast); stroke-width: 0.35; stroke-linejoin: round; }
.ms-page .pin { fill: var(--dot); cursor: pointer; }
.ms-page .pin:hover { fill: var(--accent-ink); }
.ms-page .pin.on { stroke: var(--ink); stroke-width: 1.1; }
.ms-page .pin.off { fill: var(--rule-strong); opacity: 0.4; cursor: default; }
.ms-page .pinlabel {
    font-family: var(--font-mono); font-size: 3.1px; letter-spacing: 0.02em;
    fill: var(--ink-soft); pointer-events: none;
  }
.ms-page .pinlabel.off { fill: var(--muted); opacity: 0.5; }
.ms-page .pincount { font-weight: 600; fill: var(--dot); }
.ms-page .pincount.off { fill: var(--muted); }
.ms-page .mapnote {
    margin: 0; padding: 0.3rem 1rem 0.9rem;
    font-family: var(--font-mono); font-size: 0.66rem; line-height: 1.6; color: var(--muted);
  }
.ms-page /* ---- results ---- */

  .results-head {
    display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
    padding-bottom: 0.6rem; margin-bottom: 1rem; border-bottom: 2px solid var(--rule-strong);
  }
.ms-page .results-head .n {
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
    letter-spacing: -0.015em; font-variant-numeric: tabular-nums;
  }
.ms-page .results-head .of {
    font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
    letter-spacing: 0.06em; text-transform: uppercase;
  }
.ms-page .groupby {
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted);
    display: inline-flex; align-items: center; gap: 0.4rem;
  }
.ms-page .groupby select {
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em;
    color: var(--ink); background: var(--surface);
    border: 1px solid var(--rule); border-radius: 2px; padding: 0.18rem 0.3rem;
  }
.ms-page .groupby.auto select { border-color: var(--accent); color: var(--accent); }
.ms-page .active-filters { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-left: auto; }
.ms-page .active-pill {
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em;
    background: var(--accent-soft); color: var(--accent-ink);
    border: none; border-radius: 2px; padding: 0.2rem 0.45rem; cursor: pointer;
  }
.ms-page .active-pill::after { content: " \00d7"; opacity: 0.7; }
.ms-page .active-pill:hover { background: var(--accent-fill); color: var(--on-accent); }
.ms-page .band {
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted);
    margin: 1.75rem 0 0.75rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--rule);
    display: flex; gap: 0.6rem; align-items: baseline;
  }
.ms-page .band:first-child { margin-top: 0; }
.ms-page .band .rc { margin-left: auto; font-variant-numeric: tabular-nums; }
.ms-page .shops { display: grid; grid-template-columns: repeat(auto-fill, minmax(282px, 1fr)); gap: 0.9rem; }
.ms-page .shop {
    background: var(--surface); border: 1px solid var(--rule); border-radius: 2px;
    padding: 1.05rem 1.15rem 0.9rem;
    display: flex; flex-direction: column; gap: 0.6rem;
  }
.ms-page .shop:hover { border-color: var(--rule-strong); }
@media (prefers-reduced-motion: no-preference) {
.ms-page .shop { transition: border-color 120ms ease; }
}
.ms-page .shop h3 {
    font-family: var(--font-display); font-size: 1.02rem; font-weight: 700;
    letter-spacing: -0.01em; line-height: 1.25; margin: 0; text-wrap: balance;
  }
.ms-page .addr {
    font-family: var(--font-mono); font-size: 0.71rem; line-height: 1.5;
    color: var(--muted); margin: -0.4rem 0 0;
  }
.ms-page .blurb { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.ms-page .flags { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
.ms-page .flag {
    font-family: var(--font-mono); font-size: 0.67rem; letter-spacing: 0.03em;
    padding: 0.24rem 0.45rem; border-radius: 2px;
  }
.ms-page .flag.worked {
    color: var(--on-accent); background: var(--accent-fill); text-decoration: none;
    font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.63rem;
  }
.ms-page .flag.worked:hover { background: var(--accent-ink); text-decoration: underline; }
.ms-page .flag.lead { color: var(--accent-ink); background: var(--accent-soft); }
.ms-page .flag.quote { color: var(--blue-ink); background: var(--blue-soft); }
.ms-page .flag.quote.none { color: var(--ink-soft); background: var(--surface-alt); }
.ms-page .chips { display: flex; flex-wrap: wrap; gap: 0.28rem; margin-top: auto; padding-top: 0.15rem; }
.ms-page .chip {
    font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.045em;
    text-transform: uppercase; padding: 0.18rem 0.4rem; border-radius: 2px;
    background: var(--surface-alt); color: var(--ink-soft); white-space: nowrap;
  }
.ms-page .chip.key { background: var(--accent-soft); color: var(--accent-ink); }
.ms-page .chip.hit { background: var(--accent-fill); color: var(--on-accent); }
.ms-page .contact {
    font-family: var(--font-mono); font-size: 0.71rem; line-height: 1.7; color: var(--ink-soft);
    border-top: 1px solid var(--rule); padding-top: 0.55rem;
    display: flex; flex-direction: column; word-break: break-word;
  }
.ms-page .contact .dead { color: var(--muted); }
.ms-page .empty {
    border: 1px dashed var(--rule-strong); border-radius: 2px;
    padding: 2.5rem 1.5rem; text-align: center; color: var(--muted);
  }
.ms-page .empty p { margin: 0 0 0.9rem; }
.ms-page .empty p:last-child { margin: 0; }
.ms-page .brief {
    background: var(--surface); border: 1px solid var(--rule); border-radius: 2px;
    padding: 1.4rem 1.5rem; margin-top: 2.5rem;
  }
.ms-page .brief h2 {
    font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
    letter-spacing: -0.015em; margin: 0 0 0.8rem;
  }
.ms-page .brief ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ms-page .brief li { color: var(--ink-soft); max-width: 72ch; font-size: 0.95rem; }
.ms-page .brief li b { color: var(--ink); font-weight: 600; }
.ms-page .callout {
    background: var(--accent-soft); border: 1px solid var(--accent-fill); border-radius: 2px;
    padding: 1.4rem 1.5rem; margin-top: 1rem;
    display: flex; flex-direction: column; gap: 0.7rem;
  }
.ms-page .callout h2 {
    font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
    letter-spacing: -0.015em; margin: 0; color: var(--accent-ink);
  }
.ms-page .callout p { margin: 0; color: var(--ink-soft); max-width: 74ch; font-size: 0.95rem; }
.ms-page .callout a { color: var(--accent-ink); font-weight: 600; }
.ms-page .ms-footnote {
    border-top: 1px solid var(--rule); margin-top: 2.5rem; padding-top: 1.1rem;
    font-family: var(--font-mono); font-size: 0.71rem; line-height: 1.7;
    color: var(--muted); max-width: 80ch;
  }

/* ---------------------------------------------------------------------------
   Site tuning. Everything above is the ported Squarespace embed; the rules
   below are ours.

   In the original the intro text was capped at 74ch in ~12px mono while the map
   sat in a fixed 420px column, so on a wide screen the two ended up separated
   by a band of empty space. Both sides grow to close it.
   --------------------------------------------------------------------------- */
.ms-page {
  font-size: 18px;
}

.ms-page .masthead {
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 1.25rem 2.5rem;
}

.ms-page .standfirst {
  font-size: 1.3rem;
  line-height: 1.4;
}

/* The cap was holding the column short of the map. */
.ms-page .notes {
  max-width: none;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.6;
}

.ms-page .mapnote {
  font-size: 0.74rem;
}

.ms-page .panel-head h2 {
  font-size: 0.8rem;
}

@media (max-width: 1180px) {
  .ms-page .masthead { grid-template-columns: minmax(0, 1fr) 440px }
}

/* The embed set `word-break: break-word` on the contact block, which permits a
   break at any character. That split addresses mid-token —
   "sales@cncsolutions.co." / "nz" — rather than only when a line genuinely
   overflows.

   overflow-wrap: break-word breaks only as a last resort and, unlike
   `anywhere`, does not let the column shrink below its longest word, so the
   card stays wide enough for an ordinary address in the first place. */
.ms-page .contact {
  word-break: normal;
  overflow-wrap: break-word;
}

/* A phone number split across lines is unreadable and unusable. */
.ms-page .contact .tel {
  white-space: nowrap;
}

/* Domains and addresses wrap at their own punctuation if they must, but never
   mid-label. */
.ms-page .contact .em,
.ms-page .contact .web {
  hyphens: none;
}

/* The closing three blocks — the quoting guide, the reviewer callout and the
   compilation note — looked half-width because their contents carried ch caps
   (72ch on the guide's list items, 74ch on the callout copy, 80ch on the
   footnote) while the boxes themselves were full width. Matching the rest of
   the site, which runs full width. */
.ms-page .brief li,
.ms-page .callout p,
.ms-page .ms-footnote {
  max-width: none;
}