/* =====================================================================
   bizhome.css — the front door of the business half of the guide.
   ---------------------------------------------------------------------
   Loads after style.css, business.css and icons.css. Every class here is
   prefixed bh- so nothing can collide with work happening on the other
   business pages at the same time.

   The job of this page is not to be read. It is to be looked at once and
   understood: here is the path, here are the tools, here is the island.
   So almost every block below is a picture with a word beside it, and the
   only long sentence on the page is the one that says nothing is sent
   anywhere.

   Six colours, three faces, radius 18. Nothing new is invented.
   ===================================================================== */

/* ------------------------------------------------------------ 1. HERO
   The shared .hero / .ph-hero pattern already carries the photograph, the
   scrim and the transparent masthead. All this does is calm it down: a
   business owner does not need most of the screen given to a picture. */

body.biz .hero:has(.ph-hero) {
  min-height: min(66vh, 580px);
}
body.biz .hero:has(.ph-hero) > .wrap {
  padding-top: 128px;
  padding-bottom: 44px;
}
/* Smaller than the visitor hero. The words have to stay inside the shaded
   left of the picture, and an owner is not here to be swept away. */
body.biz .hero:has(.ph-hero) h1 {
  font-size: clamp(2rem, 4.3vw, 3.15rem);
  line-height: 1.06;
  max-width: 15ch;
  margin: 0 0 14px;
}
/* The shared scrim clears by 48% of the width. The business headline runs
   further than the visitor one, so the shade has to run further too. */
body.biz .hero .ph-hero::after {
  background:
    linear-gradient(to right, rgba(6, 40, 52, .88) 0%, rgba(6, 40, 52, .78) 32%, rgba(6, 40, 52, .5) 56%, rgba(6, 40, 52, .18) 80%, rgba(6, 40, 52, .04) 100%),
    linear-gradient(to top, rgba(6, 40, 52, .58) 0%, rgba(6, 40, 52, .12) 32%, rgba(6, 40, 52, 0) 56%);
}
body.biz .hero:has(.ph-hero) > .wrap > p.bh-stand {
  max-width: 40ch;
  margin: 0 0 24px;
  font-size: 1.04rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .92);
}

/* One primary action, and the promise underneath it. */
.bh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin: 0 0 18px;
}
.bh-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  /* Literal, not --wash and --deep: the site remaps both of those in dark
     mode, and this chip always sits on a shaded photograph, which is dark
     in either theme. */
  background: #f7f8f6;
  color: #0a3a47;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: .97rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.bh-btn .ic { color: currentColor; }
.bh-btn:hover { transform: translateY(-2px); background: #ffffff; color: #0a3a47; }
.bh-btn:focus-visible { outline: 2px solid var(--shallow); outline-offset: 3px; }

.bh-btn.wa {
  background: var(--pine);
  color: #fff;
}
.bh-btn.wa:hover { background: #256e5a; }

.bh-pledge {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  max-width: 46ch;
  font-size: .87rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .8);
}
.bh-pledge .ic { color: var(--shallow); margin-top: .18em; flex: none; }

/* ------------------------------------------------------- 2. SECTIONS
   business.css already sets the rhythm. These only name the two surfaces
   this page uses and tighten the heads, because every head here is one
   line of type and at most one line of explanation. */

body.biz .bh-sec { padding: 62px 0; }
body.biz .bh-sec.bh-band { background: var(--biz-band); }
/* the closing band paints its own padding on the wrap, over the photograph */
body.biz section.bh-close { padding: 0; }
/* The shared footer keeps 30px above it, which reads as a seam under a
   full-bleed photograph. Closed only where this page ends on one. */
body.biz .bh-close + footer { margin-top: 0; }

/* The group caption sits above a group, with air between it and the head. */
body.biz .bh-sec .sg-cap { margin: 20px 0 0; }
/* A callout is a sentence, not a column. Keep it to a readable measure. */
body.biz .bh-sec .sg-callout { max-width: 68ch; }

.bh-h {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--biz-ink);
  max-width: 22ch;
}
.bh-sub {
  margin: 0 0 4px;
  max-width: 56ch;
  font-size: .99rem;
  line-height: 1.5;
  color: var(--biz-soft);
}

/* ---------------------------------------------------------- 3. THE PATH
   Six nodes on a line. The line is a real line, not a metaphor: it runs
   through the middle of every disc and stops at the last one.

   Phone: the line stands up and runs down the left, because six centred
   blocks in a column read as a list of six unrelated things. */

.bh-path {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 24px 16px;
  grid-template-columns: 1fr;
}
.bh-step { position: relative; }

.bh-step > a {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 0 15px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
}
.bh-step > a:focus-visible {
  outline: 2px solid var(--shallow);
  outline-offset: 6px;
}

.bh-node {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  color: var(--ic-key);
  position: relative;
  z-index: 1;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.bh-node .ic { width: 1.35em; height: 1.35em; vertical-align: 0; }
.bh-step > a:hover .bh-node {
  border-color: var(--shallow);
  transform: translateY(-2px);
}

.bh-num {
  display: block;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--biz-soft);
  margin: 4px 0 3px;
}
.bh-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.2;
  color: var(--biz-ink);
  margin-bottom: 3px;
}
.bh-step > a:hover .bh-name { color: var(--ic-key); }
.bh-line {
  display: block;
  font-size: .88rem;
  line-height: 1.42;
  color: var(--biz-soft);
}

/* the connector, standing up on a phone */
.bh-step::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 50px;
  bottom: -28px;
  width: 1px;
  background: var(--biz-line);
}
.bh-step:last-child::after { display: none; }

@media (min-width: 700px) {
  .bh-path { grid-template-columns: repeat(3, 1fr); gap: 34px 20px; }
  .bh-step > a {
    display: block;
    text-align: center;
  }
  .bh-node { margin: 0 auto; }
  .bh-name { font-size: 1.02rem; }
  .bh-line { font-size: .86rem; }
  /* the connector lies down and runs between the discs */
  .bh-step::after {
    left: 50%;
    right: -50%;
    top: 23px;
    bottom: auto;
    width: auto;
    height: 1px;
    margin-left: 30px;
    margin-right: 30px;
  }
  .bh-step:nth-child(3n)::after { display: none; }
  .bh-step:last-child::after { display: none; }
}

@media (min-width: 1000px) {
  .bh-path { grid-template-columns: repeat(6, 1fr); gap: 0 12px; }
  .bh-step:nth-child(3n)::after { display: block; }
  .bh-step:last-child::after { display: none; }
  .bh-name { font-size: .99rem; }
  .bh-line { font-size: .82rem; }
}

/* ------------------------------------------------------- 4. THE TOOLS
   Three cards, each opening with a picture of what the tool does. The
   picture is decorative: the heading and the one line under it carry the
   meaning, so the SVGs are hidden from a screen reader. */

.bh-tools {
  display: grid;
  /* 224 not 260, so a tablet gets three across instead of two and a widow. */
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.bh-tool {
  display: flex;
  flex-direction: column;
  background: var(--biz-panel);
  border: 1px solid var(--biz-line);
  border-radius: 18px;
  padding: 0 0 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.bh-tool:hover {
  transform: translateY(-4px);
  border-color: var(--shallow);
  box-shadow: var(--shadow-lg);
}
.bh-tool:focus-visible { outline: 2px solid var(--shallow); outline-offset: 3px; }

.bh-fig {
  display: block;
  width: 100%;
  height: auto;
  background: var(--biz-quiet);
  border-bottom: 1px solid var(--biz-line);
  padding: 16px 18px;
  color: var(--ic-key);
}
.bh-tool-b { padding: 18px 20px 0; }
.bh-tool h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.16rem;
  line-height: 1.2;
  color: var(--biz-ink);
}
.bh-tool h3 .ic { color: var(--ic-key); vertical-align: 0; flex: none; }
.bh-tool p {
  margin: 0 0 14px;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--biz-soft);
}
.bh-go {
  margin-top: auto;
  padding: 0 20px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  /* --ic-key, not --pine: pine is fixed and disappears on a dark card. */
  color: var(--ic-key);
}
.bh-tool:hover .bh-go { text-decoration: underline; text-underline-offset: 3px; }

/* SVG parts shared by the three tool pictures */
.bh-fig .bh-b { fill: currentColor; opacity: .3; }
.bh-fig .bh-b.bh-peak { fill: var(--bougie); opacity: 1; }
.bh-fig .bh-rule { stroke: currentColor; stroke-width: 1; opacity: .35; }
.bh-fig .bh-box { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .5; }
.bh-fig .bh-slab { fill: currentColor; opacity: .22; }
.bh-fig .bh-mark { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bh-fig .bh-rung { fill: currentColor; opacity: .18; }
.bh-fig .bh-rung.bh-on { opacity: .85; }
.bh-fig .bh-t {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: currentColor;
  opacity: .65;
}
.bh-fig .bh-t.bh-hot { fill: var(--bougie); opacity: 1; }

/* -------------------------------------------------------- 5. THE GUIDES
   Two groups, six rows. A row is an icon, a name and one line. Nothing
   here is a card, because six cards would out-shout the three tools. */

.bh-guides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px 40px;
  margin-top: 22px;
}
.bh-gh {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--biz-soft);
}
.bh-glist { list-style: none; margin: 0; padding: 0; }
.bh-glist li { border-bottom: 1px solid var(--biz-line); }
.bh-glist li:last-child { border-bottom: 0; }
.bh-guide {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0 12px;
  align-items: start;
  padding: 14px 0;
  text-decoration: none;
  color: inherit;
}
.bh-guide:focus-visible { outline: 2px solid var(--shallow); outline-offset: 3px; }
.bh-guide > .ic {
  color: var(--ic-key);
  width: 1.4em;
  height: 1.4em;
  vertical-align: 0;
  margin-top: 1px;
}
.bh-guide b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--biz-ink);
}
.bh-guide span {
  display: block;
  font-size: .87rem;
  line-height: 1.4;
  color: var(--biz-soft);
  margin-top: 2px;
}
.bh-guide:hover b { color: var(--ic-key); }

/* ---------------------------------------------- 6. THE ISLAND ONLINE
   Five real figures. The bar is the picture, the mono number beside it is
   the fact, and the caption above the group is said once. Never colour
   alone: every bar prints its own count. */

.bh-bars { list-style: none; margin: 18px 0 0; padding: 0; }
.bh-bar {
  display: grid;
  grid-template-columns: 26px minmax(150px, 13rem) 1fr auto;
  align-items: center;
  gap: 0 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--biz-line);
}
.bh-bar:last-child { border-bottom: 0; }
.bh-bar > .ic { color: var(--ic-key); width: 1.25em; height: 1.25em; vertical-align: 0; }
.bh-bar-k {
  font-size: .95rem;
  line-height: 1.3;
  color: var(--biz-ink);
}
.bh-bar-t {
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--biz-ink) 9%, transparent);
  overflow: hidden;
  min-width: 60px;
}
.bh-bar-f {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--pine);
}
.bh-bar-v {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: .92rem;
  color: var(--biz-ink);
  white-space: nowrap;
}
.bh-bar-v i {
  font-style: normal;
  font-size: .78em;
  color: var(--biz-soft);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bh-bar-f { background: var(--shallow); }
  :root:not([data-theme="light"]) .bh-bar-t { background: color-mix(in srgb, var(--biz-ink) 16%, transparent); }
}
:root[data-theme="dark"] .bh-bar-f { background: var(--shallow); }
:root[data-theme="dark"] .bh-bar-t { background: color-mix(in srgb, var(--biz-ink) 16%, transparent); }

@media (max-width: 640px) {
  .bh-bar {
    grid-template-columns: 26px 1fr auto;
    gap: 6px 12px;
    padding: 14px 0;
  }
  .bh-bar-k { grid-column: 2; }
  .bh-bar-v { grid-column: 3; grid-row: 1; }
  .bh-bar-t { grid-column: 2 / span 2; grid-row: 2; }
}

/* --------------------------------------------------------- 7. THE CLOSE
   One photograph, one question, one number. Nothing else. */

.bh-close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0a3a47;
  color: #fff;
}
.bh-close .bh-ph {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.bh-close .bh-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bh-close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(7, 40, 51, .93) 0%,
    rgba(7, 40, 51, .82) 38%,
    rgba(7, 40, 51, .5) 70%,
    rgba(7, 40, 51, .34) 100%
  );
}
.bh-close > .wrap {
  position: relative;
  z-index: 2;
  padding-top: 66px;
  padding-bottom: 66px;
}
.bh-close h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  line-height: 1.12;
  color: #fff;
  max-width: 18ch;
}
body.biz .bh-close p {
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}
.bh-close .bh-num-wa {
  font-family: var(--font-mono);
  font-size: .88rem;
  color: rgba(255, 255, 255, .82);
}
.bh-close .bh-credit {
  position: absolute;
  right: 18px;
  bottom: 9px;
  z-index: 3;
  margin: 0;
  font-size: .58rem;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .38);
}
body.biz .bh-close .bh-credit a {
  color: rgba(255, 255, 255, .46);
  text-decoration-color: rgba(255, 255, 255, .22);
}

/* ------------------------------------------------------ 8. SMALL SCREENS */

@media (max-width: 700px) {
  body.biz .hero:has(.ph-hero) { min-height: min(72vh, 540px); }
  body.biz .hero:has(.ph-hero) > .wrap { padding-top: 118px; padding-bottom: 38px; }
  body.biz .bh-sec { padding: 46px 0; }
  .bh-h { font-size: clamp(1.45rem, 6.4vw, 1.9rem); max-width: none; }
  .bh-actions { gap: 12px; }
  .bh-btn { width: 100%; justify-content: center; }
  .bh-close > .wrap { padding-top: 50px; padding-bottom: 54px; }
  /* On a phone the words fill the width, so the shade goes top to bottom and
     lets the last of the sunset through under them. */
  .bh-close::before {
    background: linear-gradient(to bottom, rgba(7, 40, 51, .94) 0%, rgba(7, 40, 51, .88) 52%, rgba(7, 40, 51, .6) 100%);
  }
}

@media (max-width: 380px) {
  .bh-step > a { grid-template-columns: 40px 1fr; gap: 0 12px; }
  .bh-node { width: 40px; height: 40px; }
  .bh-step::after { left: 20px; top: 44px; }
  .bh-name { font-size: 1rem; }
  .bh-bar-k { font-size: .9rem; }
}

/* --------------------------------------------------------- 9. MOTION */

@media (prefers-reduced-motion: reduce) {
  .bh-btn, .bh-tool, .bh-node { transition: none !important; }
  .bh-btn:hover, .bh-tool:hover, .bh-step > a:hover .bh-node { transform: none; }
}

/* --------------------------------------------------- 10. FORCED COLOURS */

@media (forced-colors: active) {
  .bh-node, .bh-tool, .bh-fig, .bh-bar-t { border: 1px solid CanvasText; }
  .bh-bar-f { background: CanvasText; }
}