/* ---------------------------------------------------------------------------
   Business profile — the storefront layout.

   Rewritten from an editorial treatment that read as a newspaper. Six things
   were doing that, and it is worth naming them so they do not come back:

     * Georgia/Times body type. Serif reads as journalism or luxury heritage;
       almost no operating business sets its own site in it.
     * A 124px display headline at weight 400 — a broadsheet masthead.
     * A cream #f4f1e9 ground, which is newsprint.
     * A three-column sticky masthead with the brand centred.
     * Full-bleed hairlines between every section, the way a paper separates
       columns.
     * A narrow label column beside each section, which is an article layout.

   What replaces it follows how business and SaaS pages are actually built:

     * A system sans stack. Neutral, current, and it disappears — the reader
       looks at what is written rather than at the typeface.
     * A headline that tops out near 56px. Confidence is not volume, and an
       oversized headline pushes the one thing a visitor should do below the
       fold.
     * One primary action, in the accent, with everything else quieter. Two
       equally weighted calls to action is the same as none.
     * Cards on a light ground with real borders and a soft shadow, instead of
       rules across the page. Bounded surfaces read as a product; hairlines
       read as a publication.
     * An 8px spacing scale and a 68ch measure, because scannability is a
       layout property, not a copy one.
     * Accent used only where a decision happens. Colour spread everywhere
       stops meaning anything.
--------------------------------------------------------------------------- */

.business-profile-view {
  --biz-ink: #1a1512;
  --biz-body: #5c5349;
  --biz-line: #e6ddcd;
  --biz-surface: #fffdf9;
  /* Sampled from the Collective artwork's own ground. A cold grey page under a
     sepia engraving looks like two brands sharing a tab. */
  --biz-ground: #fdf7ea;
  --biz-accent: var(--business-accent, #a4122a);
  --biz-radius: 14px;
  --biz-shadow: 0 1px 2px rgb(26 21 18 / 0.05), 0 10px 30px rgb(26 21 18 / 0.06);
  --biz-measure: 68ch;

  background: var(--biz-ground);
  color: var(--biz-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

.business-site {
  min-height: 100vh;
}

/* --- Header: brand left, nav and one action right. --------------------- */

.business-header {
  align-items: center;
  background: var(--biz-surface);
  border: 1px solid var(--biz-line);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgb(26 21 18 / 0.06), 0 12px 32px rgb(26 21 18 / 0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  margin: 1rem auto 0;
  /* Wider than the body copy on purpose: the header carries a menu and two
     actions, and 1120px was not enough for a profile with either a long name
     or many pages. */
  max-width: 1240px;
  padding: 0.6875rem 0.6875rem 0.6875rem 1.25rem;
  position: sticky;
  top: 1rem;
  width: calc(100% - 3rem);
  z-index: 50;
}

.business-brand,
.business-action,
.business-nav a,
.business-link-grid a {
  color: inherit;
  text-decoration: none;
}

.business-brand {
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* The nav has to give way before the buttons do.
   A fixed 1.75rem gap cannot tighten, so a profile that grew to eight items
   pushed "Email the PAR Lab" onto a second row and left the header looking
   broken between 1100px and about 1400px -- the band where the desktop nav is
   still shown but no longer fits. It shrinks now instead: the gap and the type
   scale with the viewport, and the actions keep their size because a wrapped
   call-to-action is worse than a tighter menu. */
.business-nav {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  gap: clamp(0.8rem, 1.5vw, 1.75rem);
}

.business-header-actions {
  flex: 0 0 auto;
}



.business-nav a {
  color: var(--biz-body);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.25rem 0;
  transition: color 0.15s ease;
}

.business-nav a:hover {
  color: var(--biz-ink);
}

/* --- Actions: one primary, everything else quieter. -------------------- */

.business-action {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.business-action-primary {
  background: var(--biz-ink);
  color: #fff;
}

.business-action-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.business-action-secondary {
  background: transparent;
  border-color: var(--biz-line);
  color: var(--biz-ink);
}

.business-action-secondary:hover {
  border-color: #c9cdd6;
}

.business-action-light {
  background: rgb(255 255 255 / 0.12);
  border-color: rgb(255 255 255 / 0.28);
  color: #fff;
}

.business-action-light:hover {
  background: rgb(255 255 255 / 0.2);
}

/* --- Hero: what you do, who for, one thing to do next. ----------------- */

.business-sections,
.business-resources {
  margin-inline: auto;
  max-width: 1120px;
  padding-inline: 1.5rem;
}

.business-hero {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  margin-inline: auto;
  max-width: 1120px;
  padding: clamp(3rem, 7vw, 5.5rem) 1.5rem clamp(2.5rem, 5vw, 4rem);
}

.business-kicker {
  color: var(--biz-accent);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  margin: 0 0 0.875rem;
  text-transform: uppercase;
}

.business-hero h1 {
  font-size: clamp(2.75rem, 6.4vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
  max-width: 17ch;
  text-wrap: balance;
}

.business-summary {
  color: var(--biz-body);
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.6;
  margin: 1.25rem 0 2rem;
  max-width: var(--biz-measure);
}

.business-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-start;
}

.business-location {
  align-items: center;
  color: var(--biz-body);
  display: flex;
  font-size: 0.9375rem;
  gap: 0.4rem;
  margin-top: 1.5rem;
}

/* A mark, not a drop cap. */
.business-hero-identity {
  align-items: center;
  aspect-ratio: 1;
  background: var(--biz-ink);
  border-radius: 16px;
  color: #fff;
  display: flex;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 650;
  justify-content: center;
  margin-inline: auto;
  max-width: 220px;
  overflow: hidden;
  width: 100%;
}

.business-hero-identity img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* --- Sections: stacked cards, not ruled columns. ----------------------- */

.business-section {
  background: var(--biz-surface);
  border: 1px solid var(--biz-line);
  border-radius: var(--biz-radius);
  box-shadow: var(--biz-shadow);
  display: block;
  margin-bottom: 1.25rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}

.business-section-heading span {
  background: var(--biz-ground);
  border: 1px solid var(--biz-line);
  border-radius: 999px;
  color: var(--biz-body);
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  margin-bottom: 0.875rem;
  padding: 0.25rem 0.625rem;
  text-transform: uppercase;
}

/* A handle, a URL or a product name is one unbroken token, and a heading set
   at 30px cannot fit "linxhound.com/yourname" across a 412px phone. Without
   this it does not wrap -- it widens the whole page, so every section beside
   it is clipped and the page scrolls sideways.

   `anywhere`, not `break-word`, and the difference is the entire bug. Both
   break a word that does not fit, but only `anywhere` is counted when the
   browser works out the element's min-content size. Under `break-word` the
   heading still reports "as wide as linxhound.com/yourname" as its minimum, so
   any ancestor sized to its content grows to that width and takes the page with
   it -- the wrap rule was here, and the page was still scrolling sideways on a
   phone, because the container had already been widened before the text was
   ever asked to wrap.

   Applied to the author-supplied prose as well, not only the headings. This
   copy is written in the portal, so any of it can contain a pasted URL, and a
   customer should not be able to break their own layout by quoting one. */
.business-hero h1,
.business-hero p,
.business-section-heading h2,
.business-story,
.business-section-copy,
.business-point-card h3,
.business-point-card p,
.business-link-grid a {
  overflow-wrap: anywhere;
}

.business-section-heading h2 {
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 1.5rem;
}

.business-story,
.business-section-copy {
  color: var(--biz-body);
  font-size: 1rem;
  line-height: 1.7;
  max-width: var(--biz-measure);
  white-space: pre-line;
}

/* Product pages are read by scanning. A short promise followed by three or
   four bounded ideas communicates the same substance as a long text wall
   without making a visitor study the page. */
.business-product-lede {
  color: var(--biz-ink);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  max-width: 58ch;
}

.business-point-grid {
  display: grid;
  gap: 1rem;
  /* One per row at every width, as on a phone. These cards are a sequence the
     author ordered, not a set of equals: read across a desktop row they lose
     that order, and their prose gets squeezed into columns narrow enough to
     hyphenate. */
  grid-template-columns: minmax(0, 1fr);
  margin-top: 2rem;
}

.business-point-card {
  background: var(--biz-ground);
  border: 1px solid var(--biz-line);
  border-radius: var(--biz-radius);
  padding: 1.375rem;
}

.business-point-marker {
  align-items: center;
  background: var(--biz-surface);
  border: 1px solid var(--biz-line);
  border-radius: 999px;
  color: var(--biz-accent);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 750;
  height: 2rem;
  justify-content: center;
  margin-bottom: 1rem;
  width: 2rem;
}

/* --- A point with a face. ------------------------------------------------
   The marker is a 2rem glyph chip. A portrait needs to be a portrait: big
   enough to read as a specific dog rather than a smudge, and circular so it
   sits in the same family as the chip it replaces. */
.business-point-marker-portrait {
  background: var(--biz-ground);
  height: 4.5rem;
  overflow: hidden;
  padding: 0;
  width: 4.5rem;
}

.business-point-marker-portrait img {
  border-radius: 999px;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* A short label that names the thing, sitting under its heading. Quiet on
   purpose: it labels the card, it does not compete with it. */
.business-point-badge {
  background: var(--biz-ground);
  border: 1px solid var(--biz-line);
  border-radius: 999px;
  color: var(--biz-body);
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  margin: 0 0 0.625rem;
  padding: 0.1875rem 0.5625rem;
  text-transform: uppercase;
}

.business-point-card-portrait h3 {
  margin-top: 0;
}

.business-point-card h3 {
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

.business-point-card p {
  color: var(--biz-body);
  line-height: 1.55;
  margin: 0;
}

.business-page-cta {
  margin-top: 2rem;
}

/* --- Services: rows a customer can scan. ------------------------------- */

.business-link-grid {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 1.5rem;
}

.business-link-grid a {
  align-items: center;
  background: var(--biz-surface);
  border: 1px solid var(--biz-line);
  border-radius: var(--biz-radius);
  display: flex;
  font-size: 1.0625rem;
  font-weight: 600;
  gap: 0.875rem;
  justify-content: space-between;
  letter-spacing: -0.01em;
  min-height: 84px;
  padding: 1.25rem 1.375rem;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.business-link-grid a:hover {
  border-color: var(--biz-accent);
  box-shadow: var(--biz-shadow);
  transform: translateY(-1px);
}

.business-link-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.business-link-copy strong {
  font: inherit;
}

.business-link-copy small {
  color: var(--biz-body);
  font-size: 0.875rem;
  font-weight: 450;
  line-height: 1.45;
  margin-top: 0.25rem;
}

.business-link-grid a:first-child .business-link-copy small {
  color: rgb(255 255 255 / 0.78);
}

/* The first service is the primary action: full width, accented, and larger
   than the rest so the page has one obvious next step rather than five equal
   ones. */
.business-link-grid a:first-child {
  background: var(--biz-accent);
  border-color: var(--biz-accent);
  color: #fff;
  font-size: 1.25rem;
  grid-column: 1 / -1;
  min-height: 104px;
}

.business-link-grid a:first-child:hover {
  filter: brightness(1.07);
}

.business-image-story,
.business-feature-card {
  background: var(--biz-surface);
  border: 1px solid var(--biz-line);
  border-radius: var(--biz-radius);
  box-shadow: var(--biz-shadow);
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2rem);
}

.business-image-story img {
  border-radius: 8px;
  display: block;
  height: auto;
  width: 100%;
}

.business-feature-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

/* --- Closing band: the last chance to act. ----------------------------- */

.business-contact-band {
  background: var(--biz-ink);
  border-radius: var(--biz-radius);
  color: #fff;
  margin: 2.5rem auto 3.5rem;
  max-width: 1120px;
  padding: clamp(2.25rem, 5vw, 3.5rem);
  text-align: center;
}

/* The same band, opening the page instead of closing it. It sits above the
   hero, so it carries the page's side padding itself -- the closing band is
   inside a container that already provides it -- and it is shorter, because
   the statement here is an introduction to the page rather than the last word
   on it. */
/* The same layout as the band that closes the page, which measures as
   contained at every width. This carried its own two-column grid and did not:
   at 1024px the box came out 60px tall with 214px of children laid out below
   it, and at 1440px 80px against 240px. Only the size and spacing differ now
   -- an opening statement is shorter than a closing one, and it sits above the
   hero so it carries the page's side inset itself. */
.business-intro-band {
  margin: 1.5rem auto 0;
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  width: calc(100% - 3rem);
}

.business-intro-band h2 {
  font-size: clamp(1.625rem, 3vw, 2.375rem);
}

.business-intro-band p {
  margin: 0 0 0.75rem;
  max-width: 46ch;
}

.business-intro-copy .business-action {
  margin-top: 1.25rem;
}

/* Sized in its own column so the artwork is never cropped by the band's
   padding, and never sits behind the words. */
.business-intro-mark {
  margin: 0 auto 1.25rem;
  width: clamp(120px, 18vw, 200px);
}

.business-intro-mark img {
  border-radius: var(--biz-radius);
  display: block;
  height: auto;
  width: 100%;
}

/* Mobile and tablet: a column, not a grid.

   Measured rather than guessed. The grid version rendered a 60px band -- its
   padding and nothing else -- with the copy laid out at y=280 and the mark at
   y=138, both outside the box meant to contain them. A container whose height
   ignores its own children is not a layout worth tuning, so below this width
   the band is a plain flex column: height follows content and there is no row
   to collapse.

   overflow is visible here too: hiding it is what turned those escaping
   children into a cropped dog under a bar. */
@media (max-width: 900px) {
  .business-contact-band,
  .business-intro-band {
    align-items: center;
    display: flex;
    flex-direction: column;
    overflow: visible;
    text-align: center;
  }

  .business-contact-band p,
  .business-intro-band p {
    margin-inline: auto;
  }

  .business-band-mark,
  .business-intro-mark {
    order: -1;
    width: 120px;
  }
}

.business-contact-band p {
  color: rgb(255 255 255 / 0.72);
  margin: 0 auto 1.75rem;
  max-width: 52ch;
}

/* --- Narrow screens: one column, mark first. --------------------------- */

@media (max-width: 860px) {
  .business-hero {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .business-hero-identity {
    grid-row: 1;
    margin-inline: 0;
    max-width: 96px;
  }

  /* The pill is a one-row shape. Seven nav items plus two actions stop fitting
     on one line around here, so the header wraps to brand / nav / actions --
     and a 999px radius on a three-row box draws two huge semicircular ends
     with the content stranded between them. It reads as a broken blob rather
     than a header. Give the wrapped state a radius that suits a block, and
     stop reserving 3rem of inset on a screen that cannot spare it. */
  .business-header {
    justify-content: flex-start;
    border-radius: 1.5rem;
    gap: 0.75rem 1.5rem;
    padding: 0.875rem 1rem;
    width: calc(100% - 2rem);
  }

  .business-nav {
    width: 100%;
  }

  .business-header-actions {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .business-action,
  .business-link-grid a {
    transition: none;
  }

  .business-action-primary:hover,
  .business-link-grid a:hover {
    transform: none;
  }
}

/* --- Header brand lockup and the classes the partials rely on. ---------
   Restored after this file was rewritten: the header puts a mark beside the
   business name and its trade, and the nav carries an overflow group. Missing
   rules here do not fail loudly -- the elements simply stack wrongly -- so they
   are kept together and named. */

.business-brand {
  align-items: center;
  display: inline-flex;
  gap: 0.6875rem;
}

.business-brand-mark {
  align-items: center;
  aspect-ratio: 1;
  background: var(--biz-ink);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  flex: none;
  font-size: 0.9375rem;
  font-weight: 700;
  justify-content: center;
  overflow: hidden;
  width: 34px;
}

.business-brand-mark img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.business-brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.business-brand-copy strong {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* The trade, not a tagline: kept small so the name stays the loudest thing. */
.business-brand-copy small {
  color: var(--biz-body);
  font-size: 0.75rem;
  font-weight: 500;
}

.business-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.business-mobile-menu {
  display: none;
}

/* Secondary destinations -- policies and the like. Present, not competing. */
.business-nav-overflow {
  color: var(--biz-body);
  opacity: 0.85;
}

.business-hero-copy {
  min-width: 0;
}

/* iPad Pro portrait should use the same deliberate, touch-first composition as
   a phone. At 1024px the full header technically fits only by wrapping, which
   leaves a large sticky block over the page; available pixels are not the same
   as comfortable touch space. Landscape widths keep the desktop treatment. */
@media (max-width: 1100px) {
  .business-profile-view {
    font-size: 15px;
  }

  .business-brand-copy small {
    display: none;
  }

  .business-header > .business-nav,
  .business-header > .business-header-actions {
    display: none;
  }

  .business-header {
    flex-wrap: nowrap;
    gap: 0.75rem;
    top: 0.5rem;
    border-radius: 14px;
    padding: 0.625rem 0.625rem 0.625rem 0.75rem;
    width: calc(100% - 1rem);
  }

  .business-brand {
    min-width: 0;
  }

  .business-brand-copy {
    min-width: 0;
  }

  .business-brand-copy strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .business-mobile-menu {
    display: block;
    margin-left: auto;
    position: relative;
  }

  .business-mobile-menu summary {
    align-items: center;
    background: var(--biz-ink);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 0.8125rem;
    font-weight: 650;
    gap: 0.375rem;
    list-style: none;
    min-height: 42px;
    padding: 0.5rem 0.875rem;
  }

  .business-mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .business-mobile-menu summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--biz-accent) 35%, transparent);
    outline-offset: 2px;
  }

  .business-mobile-menu[open] summary {
    background: var(--biz-accent);
  }

  .business-mobile-menu-panel {
    background: var(--biz-surface);
    border: 1px solid var(--biz-line);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgb(26 21 18 / 0.18);
    /* dvh, not vh, and the difference is the whole bug.
       On a phone `100vh` is the viewport as it would be with the browser's
       address bar hidden -- taller than what is actually on screen. The panel's
       box therefore extended below the visible area, its own scrollbar never
       needed to engage, and the content simply ran off the bottom. With a long
       navigation the last thing in the panel is the action buttons, so they
       were the part nobody could reach.
       The vh line stays as the fallback for anything that does not know dvh. */
    /* 104px is the sticky header's own offset (0.5rem), its height, and the
       0.625rem gap below it, plus a margin so the panel ends clear of the
       bottom edge instead of flush against it. An approximation of a height
       CSS cannot measure -- erring generous, because the cost of reserving a
       few pixels too many is a slightly shorter scroll area, and the cost of
       reserving too few is the bug this is fixing. */
    max-height: calc(100vh - 104px);
    max-height: calc(100dvh - 104px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    /* Without this, reaching the end of the panel hands the scroll to the page
       underneath, which reads as the menu refusing to move. */
    overscroll-behavior: contain;
    padding: 0.5rem;
    /* Breathing room under the last control, so it is clearly the end of the
       list rather than something cut off. */
    padding-bottom: 1rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.625rem);
    width: min(310px, calc(100vw - 1rem));
  }

  .business-mobile-menu-panel nav {
    display: grid;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .business-mobile-menu-panel nav a {
    align-items: center;
    border-bottom: 1px solid var(--biz-line);
    color: var(--biz-ink);
    display: flex;
    font-size: 0.9375rem;
    font-weight: 600;
    justify-content: space-between;
    min-height: 48px;
    padding: 0.625rem 0.75rem;
    text-decoration: none;
  }

  .business-mobile-menu-panel nav a:last-child {
    border-bottom: 0;
  }

  .business-mobile-menu-panel nav i {
    color: var(--biz-body);
  }

  .business-mobile-menu-actions {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem 0.25rem 0.25rem;
    /* Only the navigation scrolls; this footer stays outside its scroll area. */
    position: relative;
    flex-shrink: 0;
    /* Opaque, or the nav scrolls visibly underneath them. */
    background: var(--biz-surface);
    /* A line only once there is something scrolled behind it would need
       script; a permanent one reads as the panel's footer either way. */
    border-top: 1px solid var(--biz-line);
    margin-top: 0.25rem;
  }

  .business-mobile-menu-actions .business-action {
    justify-content: center;
    min-height: 46px;
    width: 100%;
  }

  .business-hero {
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    padding: 2.5rem 1rem 2rem;
    text-align: left;
  }

  .business-hero-identity {
    display: none;
  }

  .business-hero h1 {
    font-size: clamp(2.25rem, 12vw, 3.5rem);
    max-width: 13ch;
  }

  .business-summary {
    font-size: 1.0625rem;
    line-height: 1.55;
    margin: 1rem 0 1.5rem;
  }

  .business-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .business-hero-actions .business-action {
    justify-content: center;
    min-height: 48px;
    width: 100%;
  }

  .business-location {
    margin-top: 1.125rem;
  }

  .business-sections,
  .business-resources {
    padding-inline: 1rem;
  }

  .business-section {
    margin-bottom: 1rem;
    padding: 1.375rem 1.125rem;
  }

  .business-section-heading h2 {
    font-size: clamp(1.625rem, 8vw, 2.125rem);
    margin-bottom: 1.125rem;
  }

  .business-point-grid,
  .business-link-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 1.25rem;
  }

  .business-point-card {
    padding: 1.125rem;
  }

  .business-link-grid a,
  .business-link-grid a:first-child {
    font-size: 1rem;
    min-height: 76px;
    padding: 1rem;
  }

  .business-image-story,
  .business-feature-card {
    padding: 1rem;
  }

  .business-contact-band {
    border-radius: 14px;
    margin: 2rem 1rem;
    padding: 2rem 1.25rem;
  }

  .business-contact-band .business-action {
    justify-content: center;
    min-height: 48px;
    width: 100%;
  }

  .business-plan {
    padding: 1.25rem 1rem;
  }

  .business-plan-head {
    align-items: flex-start;
  }

  .business-plan-badge {
    white-space: normal;
  }
}

@media (max-width: 360px) {
  .business-mobile-menu summary span {
    display: none;
  }

  .business-mobile-menu summary {
    justify-content: center;
    padding-inline: 0.75rem;
    width: 42px;
  }

  .business-brand-mark {
    width: 32px;
  }
}

/* --- Watermarks, if the profile has one. --------------------------------
   These were hardcoded to our own dog artwork in the shared stylesheet, so
   every customer's page carried the LinxHound logo behind its own content --
   Acme INC's contact band advertised us. A shared template must not ship one
   tenant's branding to another, and a background-image in a stylesheet every
   business loads is exactly how that happens.

   The image now comes from the profile, set as a CSS variable on the page. A
   profile without one gets no watermark, which is the right default for
   somebody who has not chosen a mark. */

.business-section:nth-of-type(2n),
.business-section:nth-of-type(3n) {
  background-image: var(--business-watermark, none);
  /* Inset, not bled off the corner. Negative offsets hid 48px of a 190px mark
     on each axis, so what showed was a slice of a dog cut by the card edge --
     it read as a rendering fault rather than a watermark. A mark is either
     fully present or absent; a fragment of one is neither. */
  background-position: right 1.25rem bottom 1.25rem;
  background-repeat: no-repeat;
  background-size: 150px;
}

/* Not on a section whose content is opaque cards. The cards cover the mark, so
   the only part reaching the page is whatever sticks out past them -- a sliver
   of a dog wedged between two link cards, which reads as a broken image rather
   than as branding.

   Placed after the rule above and matched on two classes on purpose:
   `.business-section:nth-of-type(2n)` is specificity (0,2,0), so a single-class
   selector here would lose no matter where it sat. */
.business-section.business-resources,
.business-section[data-page-type="link_collection"],
.business-section[data-page-type="pricing_table"] {
  background-image: none;
}

/* The artwork is opaque, so it is faded rather than layered -- a decorative
   image behind body text has to lose the contrast fight on purpose. */
.business-section {
  background-blend-mode: luminosity;
}

.business-section > * {
  position: relative;
}

.business-contact-band {
  background-image: var(--business-watermark, none);
  background-position: right -2rem center;
  background-repeat: no-repeat;
  background-size: 240px;
  background-blend-mode: soft-light;
}

@media (max-width: 720px) {
  .business-section,
  .business-contact-band {
    background-image: none;
  }
}

/* --- Plans: a comparison grid, not an unstructured text stream. --------
   The pricing template already emits semantic plan cards. Keep their layout
   here in the shared business stylesheet so a missing build step cannot turn
   four comparable choices into one long column again. */

.business-plans-intro {
  margin-bottom: 1.75rem;
}

.business-plans {
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.business-plan {
  background: var(--biz-surface);
  border: 1px solid var(--biz-line);
  border-radius: var(--biz-radius);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem 1.375rem;
}

.business-plan-recommended {
  background: color-mix(in srgb, var(--biz-accent) 4%, var(--biz-surface));
  border-color: var(--biz-ink);
  box-shadow: 0 2px 6px rgb(26 21 18 / 0.06), 0 18px 44px rgb(26 21 18 / 0.10);
  position: relative;
  transform: translateY(-6px);
}

.business-plan-head {
  align-items: center;
  display: flex;
  gap: 0.625rem;
  justify-content: space-between;
  margin-bottom: 0.875rem;
  min-height: 30px;
}

.business-plan-head h3 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.business-plan-badge {
  background: var(--biz-accent);
  border-radius: 999px;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.625rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.business-plan-price {
  align-items: baseline;
  display: flex;
  gap: 0.25rem;
  margin: 0 0 0.375rem;
}

.business-plan-price strong {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

.business-plan-price span {
  color: var(--biz-body);
  font-size: 0.9375rem;
  font-weight: 500;
}

.business-plan-note {
  color: var(--biz-body);
  font-size: 0.875rem;
  margin: 0 0 1.25rem;
  min-height: 2.5em;
}

.business-plan-cta {
  justify-content: center;
  width: 100%;
}

.business-plan-features-label {
  border-top: 1px solid var(--biz-line);
  color: var(--biz-body);
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 1.375rem 0 0.875rem;
  padding-top: 1.25rem;
}

.business-plan-features {
  display: grid;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.business-plan-features li {
  align-items: flex-start;
  color: var(--biz-ink);
  display: flex;
  font-size: 0.9375rem;
  gap: 0.5rem;
  line-height: 1.45;
}

.business-plan-features .ti-check {
  color: var(--biz-accent);
  flex: none;
  font-size: 1rem;
  margin-top: 0.125rem;
}

@media (max-width: 720px) {
  .business-plans {
    grid-template-columns: 1fr;
  }

  .business-plan-recommended {
    transform: none;
  }

  .business-plan-note {
    min-height: 0;
  }
}