/* ============================================================================
   hostme.ie — the services layer
   Nav dropdown, /services/ hub, the two-track block, the audience pages.

   Everything here is NEW surface. It extends marketing.css and home-v2.css
   and overrides nothing in them: the Service areas dropdown, the homepage
   cards and the action block all still resolve exactly as they did.
   ============================================================================ */

/* ---- Nav dropdown ------------------------------------------------------
   Six rows in one column is a 320px-tall menu that overshoots the fold on a
   laptop. Two columns keeps it inside the viewport and lets the menufoot sit
   as a pair rather than a stack. */
.mk-nav__menu--svc { min-width: 420px; }

.mk-nav__menugrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* "All services" is the grid's 7th item — an odd count against 2 columns —
   so it spans both and reads as its own row above the six. grid-column is
   uncontested (nothing else sets it), but padding-bottom is not: marketing.css's
   `.mk-nav__menu a { padding: 9px 12px; }` is (0,1,1) and this link is also a
   `.mk-nav__menu a`, so a bare `.mk-nav__menugrid-all` (0,1,0) would silently
   lose padding-bottom to that shorthand's implicit 9px regardless of source
   order — the same specificity trap flagged during Task 5. Qualifying with
   the grid ancestor makes it (0,2,0), which outranks (0,1,1). */
.mk-nav__menugrid-all {
  grid-column: 1 / -1;
}
.mk-nav__menugrid .mk-nav__menugrid-all {
  border-bottom: 1px solid var(--hm-hairline);
  margin-bottom: 4px;
  padding-bottom: 10px;
}

/* Nineteen areas need three columns — two would make a ten-row drawer that
   runs off a laptop screen. Same grid component as the services menu, one
   more column. */
.mk-nav__menu--areas { min-width: 480px; }
.mk-nav__menugrid--areas { grid-template-columns: 1fr 1fr 1fr; }

.mk-nav__menufoot--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.mk-nav__menufoot--pair a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
  color: var(--hm-purple-text);
}

/* The mobile nav stacks everything; two columns inside a 320px drawer is
   unreadable, and marketing.css already restyles .mk-nav__menu flat there. */
@media (max-width: 900px) {
  .mk-nav__menu--svc,
  .mk-nav__menu--areas { min-width: 0; }
  .mk-nav__menugrid,
  .mk-nav__menugrid--areas,
  .mk-nav__menufoot--pair { grid-template-columns: 1fr; }
}

/* ---- The audience router -----------------------------------------------
   Two cards, identical treatment. The purple top rule is the only ornament
   and both carry it: the sole-trader path is a real offer, not a fallback,
   and any asymmetry here would say otherwise. */
.hm-router {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 52px;
}

.hm-router__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--hm-hairline);
  border-top: 3px solid var(--hm-purple);
  padding: 26px 28px;
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.hm-router__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.hm-router__kick {
  font-family: var(--hm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hm-purple-text);
  margin-bottom: 10px;
}

.hm-router__card h2,
.hm-router__card h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--hm-ink);
  margin: 0 0 6px;
}

.hm-router__card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--hm-muted);
  margin: 0;
}

.hm-router__go {
  font-size: 20px;
  color: var(--hm-purple-text);
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .hm-router { grid-template-columns: 1fr; margin-bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-router__card, .hm-router__card:hover { transition: none; transform: none; }
}

/* ---- The trust bar ------------------------------------------------------
   Three facts, directly under the hero, on white so it reads as a shelf
   under the sand band rather than as part of it. What it says and does not
   say is ruled in template-parts/trust-bar.php. */
.hm-trust {
  background: #fff;
  border-bottom: 1px solid var(--hm-hairline);
}

.hm-trust__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 44px;
}

.hm-trust__item { display: flex; gap: 14px; align-items: flex-start; }

.hm-trust__ic {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 99px;
  background: var(--v2-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hm-purple-text);
}
.hm-trust__ic .ic { width: 17px; height: 17px; }

.hm-trust__h {
  font-size: 15px;
  font-weight: 600;
  color: var(--hm-ink);
  margin: 1px 0 3px;
}
.hm-trust__p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--hm-muted);
  margin: 0;
}

@media (max-width: 900px) {
  .hm-trust__inner { grid-template-columns: 1fr; padding: 22px 24px; gap: 16px; }
}

/* Two actions and the call line, on the town heroes. The pair wraps rather
   than shrinking: two buttons at half width each read as one split control,
   which is not what they are. */
.hm-shero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hm-shero__call {
  font-size: 14.5px;
  color: var(--hm-muted);
  margin: 16px 0 0;
}
.hm-shero__call a { color: var(--hm-purple-text); font-weight: 500; text-decoration: none; }
.hm-shero__call a:hover { color: var(--hm-ink); }

/* ---- Photographs on the audience surfaces -------------------------------
   Every rule here only matters once a featured image exists on
   /for-sole-traders/ or /for-small-businesses/. Until then the router cards
   keep their original text-only shape and these pages render no figure —
   the modifier class is not emitted at all, so nothing below applies. */
.hm-router__card--photo {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.hm-router__photo {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--v2-tint);
}
.hm-router__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hm-router__card--photo .hm-router__text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px 26px;
}

/* The text-only card keeps the flex row it always had; `.hm-router__text` is
   a new wrapper, so it must not change that shape when there is no photo. */
.hm-router__card:not(.hm-router__card--photo) .hm-router__text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.hm-audience__photo {
  margin: 0 0 52px;
  max-width: 860px;
}
.hm-audience__photo img { display: block; width: 100%; height: auto; border-radius: 2px; }
/* aspect-ratio and object-fit are set with the town photo above — same
   reason, same rule: the crop lives in CSS so the file stays original. */
.hm-audience__photo .hm-credit {
  font-family: var(--hm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hm-faint);
  margin-top: 10px;
}

/* ---- The coverage map ---------------------------------------------------
   Drawn from the registry, so it cannot disagree with the list beneath it.
   Colours come from tokens rather than being baked into the SVG: the map has
   to work on the sand hero and would have to be re-exported for any other
   ground if they were. */
.hm-map { margin: 0; width: 460px; max-width: 100%; }
/* Clipped, not visible: the coast runs past the frame on every side and the
   window already carries margin for the labels. Left visible, the Atlantic
   would spill across the hero.

   The frame is drawn rather than left bare. Land is near-white and fills most
   of the window, so its clipped edge makes a hard rectangle against the sand
   band whatever we do — a map of a place has to stop somewhere. Unframed that
   read as an unstyled white box; a hairline and a small radius make the same
   rectangle read as an inset, which is what it is. */
.hm-map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  border: 1px solid var(--hm-hairline);
  border-radius: 6px;
}

/* Land is the page colour and water is the ground the map sits on, which is
   why there is no fill for the sea — the hero shows through. That ties the map
   to the sand band: move it onto a page-coloured section and land and water
   swap over. Change these two rules together, or not at all. */
.hm-map__land {
  fill: var(--hm-page);
  stroke: var(--hm-hairline);
  stroke-width: 0.75;
  stroke-linejoin: round;
}
.hm-map__lake {
  fill: var(--hm-sand);
  stroke: var(--hm-hairline);
  stroke-width: 0.5;
}

/* The on-site band's ring, ruler and label all lived here until 0.13.5.
   The map states no price now — see template-parts/area-map.php. */

.hm-map__pt circle { fill: var(--hm-faint); }
.hm-map__pt text {
  font-family: var(--hm-font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--hm-muted);
}

/* The four with a page of their own, and the city, are the ones worth
   picking out — same distinction the list makes with its links. */
.hm-map__pt.has-page circle { fill: var(--hm-green-button); }
.hm-map__pt.has-page text { fill: var(--hm-ink-2); }
.hm-map__pt.is-hub circle { fill: var(--hm-purple); }
.hm-map__pt.is-hub text { fill: var(--hm-ink); font-weight: 500; }

.hm-map figcaption,
figcaption.hm-map__cap {
  font-size: 13px;
  line-height: 1.6;
  color: var(--hm-muted);
  margin-top: 14px;
  max-width: 42em;
}

@media (max-width: 900px) {
  .hm-map { width: 100%; }
  .hm-map__pt text { font-size: 11px; }
  .hm-map__bandlabel { font-size: 10px; }
}

/* ---- Town pages ---------------------------------------------------------
   The photograph in the hero. §11 allows exactly one per town page and it is
   the only thing that makes the page look like it is about that town, so it
   takes the art column the service pages give their glyph. */
.hm-shero__photo {
  margin: 0;
  width: 420px;
  max-width: 100%;
}
/* THE CROP IS DONE HERE, NOT IN THE FILE, and that is a licensing decision
   as much as a layout one. Three of the four town photographs are CC BY-SA.
   Cropping and duotoning the FILE would create an adaptation, which BY-SA
   requires be released under BY-SA in turn. Cropping with object-fit and
   duotoning with a CSS filter means the file served is the photographer's
   own, unmodified, with the credit visible underneath — attribution, which
   is all BY-SA asks of an unmodified copy.

   So: never bake a crop or a colour treatment into these files. Resizing for
   delivery is the only change made to them. (Not legal advice — but the
   distinction between distributing an original and distributing an
   adaptation is the whole of it, and it costs nothing to stay on the right
   side.) */
.hm-shero__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  height: auto;
  border-radius: 2px;
}

.hm-audience__photo img { aspect-ratio: 16 / 9; object-fit: cover; }
.hm-shero__photo .hm-credit {
  font-family: var(--hm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hm-faint);
  margin-top: 10px;
}

/* The neighbours sentence. §11 is explicit that it is a sentence in the body
   and not a widget, so it is styled as prose that has finished rather than as
   a component: a rule above it, and nothing else. */
.hm-town-near {
  border-top: 1px solid var(--hm-hairline);
  padding-top: 22px;
  margin-top: 34px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--hm-ink-2);
}
.hm-town-near a { color: var(--hm-purple-text); }
.hm-town-near a:hover { color: var(--hm-ink); }

/* The rail's covers list carries links on this template and plain text on the
   service pages, so the anchor is styled here rather than in the list. */
.hm-detail__covers a { color: var(--hm-ink-2); text-decoration: none; }
.hm-detail__covers a:hover { color: var(--hm-purple-text); }

.hm-detail__railfoot { margin: 18px 0 0; font-size: 14px; }
.hm-detail__railfoot a { color: var(--hm-purple-text); text-decoration: none; font-weight: 500; }
.hm-detail__railfoot a:hover { color: var(--hm-ink); }

/* ---- Service areas ------------------------------------------------------
   The coverage page. Reuses the service hero without its glyph — there is no
   one mark that means "nineteen towns", and an invented one would be
   decoration pretending to be information. */
.hm-shero--plain .hm-shero__inner { grid-template-columns: minmax(0, 1fr); }
.hm-shero--plain .hm-shero__saves { max-width: 30em; }

/* Names, not cards. Nineteen cards would claim nineteen destinations, and
   fifteen of these are not destinations — they are places served. The four
   that do have a page are the only ones that read as links. */
.hm-areas {
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0 32px;
}

.hm-areas__item {
  border-top: 1px solid var(--hm-hairline);
  font-size: 17px;
  line-height: 1.4;
}
.hm-areas__item > a,
.hm-areas__item > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 0;
  color: var(--hm-ink-2);
  text-decoration: none;
}
.hm-areas__item > a {
  color: var(--hm-purple-text);
  font-weight: 500;
  transition: color 200ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.hm-areas__item > a:hover { color: var(--hm-ink); }
.hm-areas__go { font-size: 15px; }

.hm-areas__note {
  border-top: 1px solid var(--hm-hairline);
  padding-top: 24px;
  margin-bottom: 72px;
  max-width: 660px;
}
.hm-areas__note p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--hm-ink-2);
  margin: 0 0 14px;
}
.hm-areas__note p:last-child { margin-bottom: 0; }
.hm-areas__note strong { color: var(--hm-ink); font-weight: 600; }

/* ---- The gap before the closing band ------------------------------------
   `.hm-band--deep` sets `margin-top: 0` (home-v2.css) and says why: on the
   homepage it runs straight on from the dark pricing band as one continuous
   dark close. Two bands meeting is the intended effect there.

   The service and audience pages end on a plain `.hm-sec`, and `.hm-sec`
   has no bottom padding at all — so the last row of related cards ended at
   exactly the pixel the dark band began, and read as cut in half.

   Written as an adjacent-sibling rule rather than as bottom padding on the
   pages: `.hm-audience` is carried by SEVERAL sections on those templates,
   so padding the class would open a gap in the middle of the page as well
   as at the end. This matches only where a plain section actually meets the
   closing band, which is the real condition. (0,2,0) beats the (0,1,0) it
   overrides, independent of load order. */
.hm-sec + .hm-band--deep { margin-top: 96px; }

/* And the same again where a section meets the security stance: `.hm-stance`
   opens with `padding: 0 40px 96px` — no top padding — so on /services/ the
   last row of cards ended exactly where the stance box began, with the
   card's own -6px hover lift moving into it. Matches only there: on the
   homepage `.hm-stance` follows `.hm-about`, which already pads its bottom. */
.hm-sec + .hm-stance { margin-top: 96px; }

@media (max-width: 900px) {
  .hm-sec + .hm-band--deep { margin-top: 64px; }
}

/* ---- Reveal on scroll ---------------------------------------------------
   Every rule here is scoped under `.hm-motion`, which marketing.js puts on
   <html> and ONLY when it has both IntersectionObserver and permission to
   move. Nothing below can hide content on its own: with JS off, or the
   script 404ing, or reduced motion asked for, none of these selectors match
   and the page is simply visible. Never unscope these.

   14px and 620ms: enough to read as arrival, short enough that a reader
   scrolling at speed never waits for the page to catch up. */
.hm-motion .hm-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 620ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: opacity, transform;
}
.hm-motion .hm-reveal.is-in {
  opacity: 1;
  transform: none;
}
/* Dropped once the element has arrived — a permanent will-change keeps a
   compositor layer alive for the life of the page, on every revealed
   element, for an animation that already finished. */
.hm-motion .hm-reveal.is-in { will-change: auto; }

/* The stagger. Cards in a row arriving together read as one block sliding;
   arriving 90ms apart reads as a hand dealing them. */
.hm-motion .hm-reveal--2 { transition-delay: 90ms; }
.hm-motion .hm-reveal--3 { transition-delay: 180ms; }

/* Belt and braces: a print or reduced-motion context must never inherit a
   hidden element, even if `.hm-motion` somehow survived onto the element. */
@media (prefers-reduced-motion: reduce) {
  .hm-motion .hm-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- The service hero band ----------------------------------------------
   Full-bleed sand — the one ground the tokens allow exactly once a page
   (colors_and_type.css) — so a service page opens on something other than
   the same warm off-white as every section under it.

   NOT forest, and the reason is load-bearing: the header is transparent
   until you scroll (marketing.css) and its wordmark and nav are dark ink,
   so a dark band here would hide the navigation at the exact scroll
   position every visitor arrives at. See the note in page-service.php. */
.hm-shero {
  background: var(--hm-sand);
  border-bottom: 1px solid rgba(26, 26, 46, 0.09);
}

.hm-shero__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 40px 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 60px;
  align-items: center;
}

.hm-shero .hm-crumbs { margin-bottom: 26px; }

.hm-shero__meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--hm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.hm-shero__tag { color: var(--hm-purple-text); font-weight: 500; }
.hm-shero__n { color: var(--hm-faint); }

.hm-shero__h1 {
  font-weight: 600;
  font-size: clamp(46px, 6.2vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  margin: 14px 0 18px;
  text-wrap: pretty;
}

/* The consequence line in the accent face. A plain class selector is enough
   here — unlike the old `.hm-sechead .hm-detail__saves`, nothing
   element-qualified reaches into this block. */
.hm-shero__saves {
  font-family: var(--hm-font-accent);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.28;
  color: var(--hm-ink);
  margin: 0 0 30px;
  max-width: 22em;
}

/* The glyph is a fixed 158px component. Scaling the box rather than its
   internals keeps the ring spacing in proportion — the insets are absolute
   pixels, so widening it alone would thin the rings out. */
.hm-shero__art {
  width: 214px;
  height: 214px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hm-shero__art .hm-glyph { transform: scale(1.35); }

/* The hero already carries the top of the page, so the section under it
   opens closer than the 100px `.hm-sec` default. */
.hm-detail { padding-top: 64px; }

/* ---- Breadcrumb and detail head ---------------------------------------- */
.hm-crumbs {
  display: flex;
  gap: 10px;
  font-family: var(--hm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--hm-faint);
  margin-bottom: 34px;
}
.hm-crumbs a { color: var(--hm-faint); text-decoration: none; }
.hm-crumbs a:hover { color: var(--hm-purple-text); }

/* Shared with the audience pages (Task 6) — same 72px display head, so the
   rule is extended rather than repeated under a second selector. */
.hm-detail .hm-sechead h1,
.hm-audience .hm-sechead h1 {
  font-weight: 600;
  font-size: 72px;
  line-height: 1.02;
  letter-spacing: -0.05em;
  margin: 0;
}

/* The detail pages' standfirst moved into the hero band as
   `.hm-shero__saves`. The rule that used to sit here fought
   `.hm-sechead p` (home-v2.css:705) for every property and had to be
   restated at (0,2,0) to win them back; out of `.hm-sechead`, that fight
   is gone. The trap itself is not — an element-qualified ancestor rule
   silently outweighing a single-class one is live wherever a component
   sits inside `.hm-sechead`. See `.hm-new__card p` (new.css:311). */

/* ---- Prose + rail -------------------------------------------------------
   The prose used to be a bare 660px block in a 1180px container, which left
   the right half of the page empty for the whole read. It is now the left
   column of a two-column band, with the rail holding the page's only piece
   of artwork. The measure is unchanged — it is the right measure, it was
   just sitting in the wrong container. */
.hm-detail__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 72px;
  align-items: start;
  margin-bottom: 72px;
}

.hm-detail__prose { max-width: 660px; }
.hm-detail__prose p {
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--hm-ink-2);
  margin: 0 0 22px;
}
.hm-detail__prose p:last-child { margin-bottom: 0; }

/* The opening paragraph carries the reader in, so it gets full ink and a
   size step. Everything after it settles back to reading weight. */
.hm-detail__prose p:first-child {
  font-size: 21px;
  line-height: 1.55;
  color: var(--hm-ink);
  margin-bottom: 30px;
}

/* Subheads. 300 words is the floor the spec sets for these pages, so the
   answer to "this is a lot to read" is landing points, not cuts. Three per
   page turns one wall into four short reads and gives someone who is
   skimming a way to find the paragraph they came for.

   The hairline is what makes them scannable at a glance — a bolder line of
   text alone reads as an emphasised sentence, not as a new section. */
.hm-detail__prose h2 {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--hm-ink);
  border-top: 1px solid var(--hm-hairline);
  margin: 42px 0 16px;
  padding-top: 22px;
  text-wrap: pretty;
}
.hm-detail__prose h2:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* Sticky so it stays with the reader down a long page; `top` clears the
   sticky header in marketing.css. */
.hm-detail__rail {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hm-detail__kick {
  font-family: var(--hm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--hm-faint);
  margin-bottom: 14px;
}

/* Same check mark and the same green as the two-track scope lists below, on
   purpose: one page should not have two ways of saying "you get this". */
.hm-detail__covers {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.hm-detail__covers li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border-top: 1px solid var(--hm-hairline);
  padding: 13px 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--hm-ink-2);
}
.hm-detail__covers li svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--hm-green-button);
}

/* ---- The two-track block ------------------------------------------------
   Identical treatment on both tracks, and that is the whole design. The
   moment one gets a fill or a heavier rule, the other reads as the lesser
   option — and for a sole trader the left-hand track IS the offer. */
.hm-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 76px;
}

.hm-track {
  background: #fff;
  border: 1px solid var(--hm-hairline);
  border-top: 3px solid var(--hm-purple);
  padding: 34px 34px 30px;
  display: flex;
  flex-direction: column;
  transition: transform 260ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              box-shadow 260ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* The card is not a link — the CTA inside it is — so the lift is a response
   to attention, not a promise that the whole card is clickable. Hence the
   shadow and no cursor change. */
.hm-track:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(26, 26, 46, 0.32);
}
@media (prefers-reduced-motion: reduce) {
  .hm-track, .hm-track:hover { transition: none; transform: none; }
}

.hm-track__kick {
  font-family: var(--hm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--hm-purple-text);
  font-weight: 500;
}

.hm-track__title {
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -0.03em;
  margin: 12px 0 20px;
}

.hm-track__scope {
  list-style: none;
  padding: 0;
  margin: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hm-track__scope li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hm-ink-2);
}

.hm-track__scope li svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--hm-green-button);
}

.hm-track__basis {
  border-top: 1px solid rgba(124, 58, 237, 0.25);
  margin-top: 26px;
  padding-top: 18px;
}

/* A figure standing as a figure is mono in this brand — §1. */
.hm-track__fig {
  font-family: var(--hm-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--hm-ink);
  margin: 0 0 8px;
}

.hm-track__note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--hm-muted);
  margin: 0 0 18px;
}

.hm-track__cta {
  display: inline-block;
  color: var(--hm-purple-text);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1.5px solid var(--hm-purple);
  padding-bottom: 2px;
  transition: padding var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hm-track__cta:hover { padding-bottom: 6px; border-bottom-color: var(--hm-green-mark); }

/* Fix round 1 — the two-door block on the small-business page. The base
   .hm-track__cta above is an underline link, right for the lower-stakes CTA
   on a service detail page, but this page's entire job is routing a visitor
   into one of two doors: that IS the primary action and an underline link
   does not read as one. Modifiers, not a rebuilt component — same
   .hm-track markup, same base class, same 15px/600 label. Specificity note:
   both modifiers are single-class selectors, (0,1,0), the same as the base
   `.hm-track__cta` rule above and its `:hover` — tied specificity resolves
   by source order, and these come later in the file, so they win on every
   contested property (display, color, border, padding) without needing a
   heavier selector. Buttons in this theme are 6px radius
   (colors_and_type.css:536) — matched here rather than reusing `.btn`
   directly, since `.btn`'s own flex/pill base would need as much overriding
   as it saves. Same padding and radius on both, so neither door reads as
   the consolation prize; only the fill differs. */
.hm-track__cta--solid,
.hm-track__cta--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 22px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  border-bottom: 0;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
/* Cancel the base rule's hover growth — a filled button doesn't gain an
   underline on hover, it changes fill (below). */
.hm-track__cta--solid:hover,
.hm-track__cta--outline:hover { padding-bottom: 15px; }

.hm-track__cta--solid { background: var(--hm-green-button); color: #fff; }
.hm-track__cta--solid:hover { background: #166534; }

.hm-track__cta--outline { background: transparent; color: var(--hm-ink); border: 1px solid var(--hm-hairline); }
.hm-track__cta--outline:hover { background: var(--wash); }

/* ---- Related ------------------------------------------------------------ */
.hm-related {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.hm-related .hm-router__card { border-top: 1px solid var(--hm-hairline); }

/* Six cards rather than two, on the small-business page. Three up so the
   grid does not become one long column of near-identical rows. */
.hm-related--all { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 8px; }
@media (max-width: 900px) {
  .hm-related--all { grid-template-columns: 1fr; }
}
.hm-related h2,
.hm-related h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--hm-ink);
  margin: 0 0 6px;
}
.hm-related p { font-size: 14.5px; line-height: 1.6; color: var(--hm-muted); margin: 0; }

@media (max-width: 900px) {
  .hm-detail .hm-sechead h1,
  .hm-audience .hm-sechead h1 { font-size: 44px; }
  .hm-shero__inner { grid-template-columns: 1fr; gap: 36px; padding: 40px 24px 48px; }
  .hm-shero__art { width: 158px; height: 158px; }
  .hm-shero__photo { width: 100%; }
  .hm-shero__art .hm-glyph { transform: none; }
  .hm-detail { padding-top: 48px; }
  .hm-detail__body { grid-template-columns: 1fr; gap: 44px; margin-bottom: 56px; }
  /* Sticky is meaningless once the rail is stacked under the prose, and it
     would pin the block to the viewport as the reader scrolls past it. */
  .hm-detail__rail { position: static; }
  .hm-detail__prose p:first-child { font-size: 19px; }
  /* `.hm-costs__head` below restates margin-bottom at this breakpoint and
     is also (0,1,0), so it beat the deliberate zero on `--start` purely by
     coming later in the file. Restated here for the same reason the
     standfirst rule used to be. */
  .hm-costs__head--start { margin-bottom: 0; }
  .hm-tracks, .hm-related { grid-template-columns: 1fr; }
  .hm-tracks { margin-bottom: 48px; }
}

/* ---- The audience pages (Task 6) ----------------------------------------
   /for-sole-traders/ and /for-small-businesses/, one template, branching
   markup. Grounds discipline: each page uses exactly four —
   `--hm-page` (body, and the "four things" cards below — same token, not a
   second ground), `#fff` (the two-door cards, via .hm-track, and the floor
   panel on the small-business page), `--hm-forest` (the full-bleed band) and
   `--hm-lilac` (the action block). The sole-trader cross-link panel is
   `--hm-sage`, which REPLACES `#fff` on that page rather than adding a
   fifth — the "four things" cards below are deliberately `--hm-page`, not
   `#fff`, so sole-trader stays at four grounds with sage included. */

/* The full-bleed forest band — the constraint statement on the sole-trader
   page, the response commitments on the small-business page. A new class
   rather than reusing `.hm-band`: that component's fixed 1fr/1.05fr
   comparison grid and 56px heading don't fit either of this page's layouts. */
.hm-audience__band {
  background: var(--hm-forest);
  margin-top: 36px;
  margin-bottom: 88px;
  padding: 68px 0;
}
.hm-audience__band-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
}
.hm-audience__band-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 64px;
  align-items: center;
}
.hm-audience__band-lede {
  font-size: 26px;
  line-height: 1.45;
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
}
.hm-audience__band-sub {
  font-size: 17px;
  line-height: 1.7;
  color: #B9B7C6;
  margin: 0;
  max-width: 640px;
}
.hm-audience__band-fig {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: 40px;
}
.hm-audience__band-fig-label {
  font-family: var(--hm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #9997AC;
  margin-bottom: 14px;
}
/* The one figure on this page that earns the accent face — §1's ceiling of
   three per page is nowhere near touched by a single "Nothing". */
.hm-audience__band-fig-num {
  display: block;
  font-size: 76px;
  line-height: 1;
  color: #fff;
  margin-bottom: 16px;
}
.hm-audience__band-fig-note {
  font-size: 14.5px;
  line-height: 1.65;
  color: #B9B7C6;
  margin: 0;
}

/* Response band — small-business page only. Its own head/table/foot rather
   than `.hm-sechead`, because `.hm-sechead h2` carries no color and would
   render dark-on-dark on this ground. */
.hm-audience__band--response { padding: 76px 0; margin-top: 90px; }
.hm-response__head {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 46px;
}
.hm-response__head h2 {
  font-weight: 600;
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0;
}
.hm-response__head p {
  font-size: 16px;
  line-height: 1.65;
  color: #B9B7C6;
  margin: 0 0 6px;
}

/* The table scrolls inside this wrapper on narrow screens rather than
   widening the page — the wrapper, not the table, carries the overflow. */
.hm-response__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hm-response__table { width: 100%; min-width: 640px; border-collapse: collapse; }
.hm-response__table th {
  font-family: var(--hm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #9997AC;
  font-weight: 500;
  text-align: left;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.hm-response__table td {
  padding: 17px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 15px;
  color: #B9B7C6;
  vertical-align: top;
}
.hm-response__table td:first-child {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  padding-right: 28px;
}
/* Committed figures only — no "typical" column. PRICING.md §3.4's evidence
   rule bars that claim from the public site until it can be measured. */
.hm-response__table td.fig {
  font-family: var(--hm-font-mono);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hm-response__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-top: 40px;
}
.hm-response__foot p { font-size: 15px; line-height: 1.7; color: #B9B7C6; margin: 0; }
.hm-response__foot strong { color: #fff; font-weight: 600; }

/* The four things — sole-trader page. `--hm-page` ground, not `#fff` — see
   the grounds-discipline note above. */
.hm-need-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 88px;
}
.hm-need {
  background: var(--hm-page);
  border: 1px solid var(--hm-hairline);
  padding: 30px 30px 26px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.hm-need__n {
  font-family: var(--hm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.17em;
  color: var(--hm-purple-text);
  margin-bottom: 22px;
}
.hm-need h2,
.hm-need h3 {
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.03em;
  color: var(--hm-ink);
  margin: 0 0 10px;
}
.hm-need p { font-size: 14.5px; line-height: 1.65; color: var(--hm-muted); margin: 0 0 auto; }
.hm-need__go {
  font-weight: 600;
  font-size: 14px;
  color: var(--hm-purple-text);
  border-bottom: 1.5px solid var(--hm-purple);
  padding-bottom: 2px;
  align-self: flex-start;
  margin-top: 26px;
  transition: padding var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hm-need:hover .hm-need__go { padding-bottom: 6px; border-color: var(--hm-green-mark); }

/* What it costs (sole-trader) / How a managed agreement starts (small-team) —
   the same row shape, `what · figure · note` or `figure · note`. */
.hm-costs__head {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 34px;
}
.hm-costs__headline {
  font-weight: 600;
  font-size: 40px;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--hm-ink);
}
.hm-costs__intro { font-size: 16.5px; line-height: 1.7; color: var(--hm-muted); margin: 0; align-self: end; }

.hm-costs__row {
  display: grid;
  grid-template-columns: 1.1fr 0.55fr 1.35fr;
  gap: 32px;
  border-top: 1px solid var(--hm-hairline);
  padding: 17px 0;
  align-items: baseline;
}
.hm-costs__what { font-size: 16px; font-weight: 500; color: var(--hm-ink); }
.hm-costs__fig {
  font-family: var(--hm-font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--hm-ink);
  font-variant-numeric: tabular-nums;
}
.hm-costs__note { font-size: 14px; line-height: 1.55; color: var(--hm-muted); }
.hm-costs__vat {
  font-family: var(--hm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hm-faint);
  border-top: 1px solid var(--hm-hairline);
  padding-top: 16px;
  margin: 0;
}

/* "How a managed agreement starts" — two columns, not three, and the figure
   sits wider because "Quoted" and "Monthly" are words, not tabular numbers. */
.hm-costs__row--start { grid-template-columns: 0.9fr 1.5fr; }
.hm-costs__row--start .hm-costs__fig { font-size: 17px; }
.hm-costs__row--start .hm-costs__note { font-size: 15px; line-height: 1.6; }
.hm-costs__row--start .hm-costs__note strong { color: var(--hm-ink); font-weight: 600; }
.hm-costs__row--start:last-child { border-bottom: 1px solid var(--hm-hairline); }
.hm-costs__rows--start { margin-bottom: 16px; }
/* The rows sit in the head's right-hand column here, not below it — see the
   comment in page-audience.php. No trailing gap needed under the last row. */
.hm-costs__head--start { margin-bottom: 0; }

/* The floor, said plainly — small-business page. `#fff`, the same ground as
   the two door cards, not a new one. */
.hm-floor {
  border-left: 3px solid var(--hm-purple);
  background: #fff;
  border-top: 1px solid var(--hm-hairline);
  border-right: 1px solid var(--hm-hairline);
  border-bottom: 1px solid var(--hm-hairline);
  padding: 26px 30px;
  margin: 34px 0 96px;
}
.hm-floor p { font-size: 17px; line-height: 1.65; color: var(--hm-ink-2); margin: 0; }
.hm-floor strong { font-weight: 600; color: var(--hm-ink); }

/* The cross-link — sole-trader page only, `--hm-sage`. */
.hm-audience__cross {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--hm-sage);
  border: 1px solid rgba(21, 128, 61, 0.3);
  padding: 34px 36px;
  text-decoration: none;
  margin-top: 76px;
}
.hm-audience__cross .hm-kick { color: var(--hm-forest); margin-bottom: 10px; }
.hm-audience__cross-head { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; color: var(--hm-forest); }
.hm-audience__cross-go { font-size: 15px; font-weight: 600; color: var(--hm-forest); white-space: nowrap; flex: 0 0 auto; }

@media (max-width: 900px) {
  .hm-audience__band { padding: 48px 0; margin-bottom: 56px; }
  .hm-audience__band-grid { grid-template-columns: 1fr; gap: 32px; }
  .hm-audience__band-fig { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 24px; }
  .hm-audience__band-fig-num { font-size: 56px; }
  .hm-audience__band--response { padding: 56px 0; }
  .hm-response__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
  .hm-response__head h2 { font-size: 32px; }
  .hm-response__foot { grid-template-columns: 1fr; gap: 24px; }

  .hm-need-grid { grid-template-columns: 1fr 1fr; margin-bottom: 56px; }
  .hm-costs__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
  .hm-costs__row,
  .hm-costs__row--start { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .hm-costs__fig { order: -1; }

  .hm-audience__cross { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 48px; }
}

@media (max-width: 560px) {
  .hm-need-grid { grid-template-columns: 1fr; }
}

/* The homepage's one-line audience route, above the service cards — Task 7.
   Sits inside .hm-sec but outside .hm-sechead, so home-v2.css's
   `.hm-sechead p` (0,1,1) never sees it; a plain class selector is enough. */
.hm-svcs__route {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--hm-muted);
  margin: 0 0 26px;
}
.hm-svcs__route a {
  color: var(--hm-purple-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hm-svcs__route a:hover { color: var(--hm-purple); }