/* ==========================================================================
   Homepage v2 components — Homepage v2.dc.html
   ==========================================================================
   The v2 document is a spec artefact: every rule is an inline style with
   {{ }} bindings, so it cannot be shipped. These are those rules lifted into
   classes, on the canonical tokens.

   Kept in its own file deliberately. marketing.css carries the pre-rebrand
   components that the rest of the site still depends on; nothing here
   overrides it, so a v2 section can be reverted by deleting its block.
   ========================================================================== */


/* --------------------------------------------------------------------------
   v2 palette branch.

   Homepage v2 binds its dark grounds through a `forest` flag that DEFAULTS TO
   TRUE — `(this.props.darkGround ?? 'forest') === 'forest'`. The literals in
   its var() fallbacks are the other branch, so reading them off the fallback
   gives you the variant the design does not ship. These four are the forest
   branch, and they are the only place to change it.

   Bible 17 mandates forest as one of four grounds; this is where it lands.
   -------------------------------------------------------------------------- */
:root {
  --v2-dark: var(--hm-forest);
  --v2-deep: var(--hm-forest-deep);
  --v2-tint: var(--hm-sage);
  --v2-tintline: rgba(21, 128, 61, 0.3);
}

/* --------------------------------------------------------------------------
   Brand lockup — wordmark, rule, tracked microlabel. Used in the header and
   the footer; the three parts are one unit and the wordmark is never bare.
   -------------------------------------------------------------------------- */
/* The lockup is now the kit's own SVG (template-parts/lockup.php), so the
   wordmark / rule / strapline rules that used to live here are gone rather
   than overridden. Leaving them would be the .hm-stance mistake again: a dead
   ruleset that still wins somewhere and paints something nobody asked for. */
.hm-lockup {
  display: inline-block;
  text-decoration: none;
  line-height: 0;      /* kill the inline-descender gap under the svg */
}

.hm-mark {
  display: block;
  height: auto;        /* the width/height attributes carry the size */
  max-width: 100%;
}

/* Header action. Forest, not green — the green action belongs to the hero,
   and two greens in one viewport is the rule this would break. */
.hm-talk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--v2-dark);
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
  border-radius: 999px;
  padding: 12px 22px;
  text-decoration: none;
  transition: transform var(--dur-1, 200ms) ease;
}

.hm-talk:hover { transform: translateY(-2px); }
.hm-talk span { font-size: 12px; }

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

.mk-nav__menufoot {
  border-top: 1px solid rgba(26, 26, 46, 0.1);
  margin-top: 8px;
  padding-top: 8px;
}

/* Areas menu rows hover to the sage ground with forest ink — v2's literal. */
.mk-nav__menu a:hover {
  background: var(--hm-sage);
  color: var(--hm-forest);
}

.mk-nav__menufoot a {
  display: block;
  padding: 7px 20px;
  font-family: var(--hm-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hm-purple-text);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Hero. v2's is a two-column composition, not a headline over a picture:
   a graph-paper ground that fades into the page, and a right column of four
   overlapping objects — a sage disc, a tilted outline, a tilted chat card,
   and two chips that break its edges. The tilt is the point; straightening
   it on hover is the reward.
   -------------------------------------------------------------------------- */
.hm-hero {
  position: relative;
  background-image:
    linear-gradient(rgba(26, 26, 46, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 26, 46, 0.05) 1px, transparent 1px);
  background-size: 78px 78px;
  background-position: center top;
}

/* Fades the grid out before it reaches the proof bar, so the two bands do
   not fight along a hard edge. */
.hm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(251, 250, 249, 0) 45%, var(--hm-page) 100%);
  pointer-events: none;
}

.hm-hero__grid {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 76px 40px 100px;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 64px;
  align-items: center;
}

.hm-hero__kick {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 30px;
  font-family: var(--hm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: #15803D;
  font-weight: 500;
}

.hm-hero__kick .dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--hm-green-mark);
  flex: 0 0 auto;
}

.hm-hero h1 {
  font-weight: 800;
  font-size: clamp(46px, 7.8vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.062em;
  margin: 0 0 28px;
  text-wrap: pretty;
}

/*
 * The one green display line the page is allowed. Green, not purple: v2
 * offers both and the acceptance criteria only make sense with the green
 * one ("green display type is allowed once per page"). #15803D on the page
 * ground measures 5.0:1 — passes AA at this size with room to spare.
 */
.hm-hero h1 .hm-accent {
  font-family: var(--hm-font-accent);
  font-style: italic;
  font-weight: 600;
  font-size: 1.13em;
  letter-spacing: -0.025em;
  color: #15803D;
}

.hm-hero__lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--hm-muted);
  margin: 0 0 34px;
  max-width: 26em;
  text-wrap: pretty;
}

.hm-hero__ctas {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.hm-hero__explore {
  font-weight: 600;
  font-size: 15.5px;
  color: var(--hm-purple-text);
  text-decoration: none;
  border-bottom: 1.5px solid var(--hm-purple);
  padding-bottom: 3px;
}

/* Client initials, overlapped. Three real clients, not stock faces. */
.hm-hero__who {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Client marks, not initials. v2's 36px filled circles are gone along with the
   letters: a circle is the right shape for a monogram and the wrong shape for
   a wordmark, which is what all seven of these actually are. The overlap and
   the page-coloured border stay, so it still reads as one cluster rather than
   as a second, smaller logo strip. */
.hm-avatars { display: flex; align-items: center; }

.hm-avatar {
  width: 66px;
  height: 38px;
  border-radius: 8px;
  border: 2px solid var(--hm-page);
  background: #fff;
  box-shadow: 0 2px 8px -3px rgba(26, 26, 46, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  flex: 0 0 auto;
  position: relative;
}

/* Earlier chips sit on top, so the overlap reads as a left-to-right stack
   instead of each mark being clipped by the one after it. */
.hm-avatar:nth-child(1) { z-index: 3; }
.hm-avatar:nth-child(2) { z-index: 2; }
.hm-avatar:nth-child(3) { z-index: 1; }

.hm-avatar + .hm-avatar { margin-left: -10px; }

/* Same ceiling logic as the strip, one size down: the cap is set by the
   weakest source file, not by the space available (ISSUES.md D6). */
.hm-avatar img {
  max-height: 20px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.hm-hero__whotext {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--hm-muted);
}

.hm-hero__whotext b {
  font-weight: 600;
  color: var(--hm-ink);
  display: block;
}

/* ---- right column ---- */
.hm-hero__stage {
  position: relative;
  padding: 18px 0;
}

.hm-hero__disc,
.hm-hero__tilt {
  position: absolute;
  pointer-events: none;
}

.hm-hero__disc {
  width: 400px;
  height: 400px;
  right: -26px;
  top: -46px;
  background: var(--v2-tint);
  border-radius: 99px;
}

.hm-hero__tilt {
  left: -34px;
  top: -14px;
  right: 52px;
  bottom: 44px;
  border: 1px solid var(--v2-tintline);
  border-radius: 14px;
  transform: rotate(-3.2deg);
}

.hm-chip {
  position: absolute;
  z-index: 3;
}

.hm-chip--avail {
  top: -26px;
  right: -34px;
  background: var(--v2-dark);
  border-radius: 8px;
  padding: 12px 17px;
  box-shadow: 0 14px 30px -14px rgba(26, 26, 46, 0.5);
}

.hm-chip--avail .hd {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
}

.hm-chip--avail .dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--hm-green-mark);
  flex: 0 0 auto;
}

/* Closed is stated, not hidden — an amber dot and the return time. */
.hm-chip--avail.is-closed .dot { background: var(--hm-amber); }

.hm-chip--avail .sub {
  color: #9997AC;
  font-size: 11.5px;
  margin-top: 3px;
}

.hm-chip--years {
  left: -46px;
  bottom: -16px;
  width: 124px;
  height: 124px;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 16px 34px -16px rgba(26, 26, 46, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.hm-chip--years .n {
  font-family: var(--hm-font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 46px;
  line-height: 1;
  color: var(--hm-purple);
  /* LINING, not tabular. Cormorant Garamond's default figures are old-style:
     the 9 drops below the baseline while the 1 sits on it, so "19" rendered
     as two digits at two different heights and read as a font error rather
     than as a numeral. `tabular-nums` did not correct that — it only equalises
     widths. Lining figures put both digits on the baseline at cap height,
     which is what a number set as display type needs. */
  font-variant-numeric: lining-nums;
}

.hm-chip--years .l {
  font-family: var(--hm-font-mono);
  font-size: 7.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--hm-muted);
  line-height: 1.7;
}

/* ---- the chat card ---- */
.hm-chat {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 1px solid rgba(26, 26, 46, 0.1);
  border-radius: 14px;
  box-shadow: 0 26px 56px -26px rgba(26, 26, 46, 0.42);
  overflow: hidden;
  transform: rotate(-1.4deg);
  transition: transform var(--dur-3, 420ms) var(--ease, cubic-bezier(.2, .7, .2, 1)),
              box-shadow var(--dur-3, 420ms) ease;
}

.hm-chat:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 36px 70px -28px rgba(26, 26, 46, 0.5);
}

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

.hm-chat__head {
  background: var(--v2-dark);
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hm-chat__av {
  width: 34px;
  height: 34px;
  border-radius: 99px;
  background: var(--hm-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.hm-chat__who { flex: 1; }

.hm-chat__who .nm {
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.02em;
}

.hm-chat__who .on {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: #9997AC;
  font-size: 11.5px;
}

.hm-chat__who .on::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--hm-green-mark);
}

.hm-chat__dots {
  color: var(--hm-muted);
  letter-spacing: 2px;
  font-size: 16px;
}

.hm-chat__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--hm-page);
}

/*
 * Conversation surface. Green here is CONVERSATION, not action — ground
 * #DCFCE7 with ink #14532D, never the button green. This is the one place
 * green may appear without counting against the one-action rule.
 */
.hm-bub {
  max-width: 88%;
  padding: 12px 15px;
  font-size: 14.5px;
  line-height: 1.5;
}

.hm-bub--in {
  align-self: flex-start;
  background: #fff;
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: 12px 12px 12px 3px;
  color: var(--hm-ink);
}

.hm-bub--out {
  align-self: flex-end;
  background: var(--hm-green-ground);
  border-radius: 12px 12px 3px 12px;
  color: var(--hm-green-ink);
}

.hm-stamp {
  font-family: var(--hm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #9997AC;
}

.hm-stamp--in { align-self: flex-start; padding-left: 2px; }
.hm-stamp--out { align-self: flex-end; padding-right: 2px; }

/* The payoff. Without it the mock is a picture of a chat; with it, it is a
   claim about how long the chat took. */
.hm-chat__foot {
  border-top: 1px solid rgba(26, 26, 46, 0.08);
  /* The years roundel overlaps this corner of the card — the left inset is
     what stops it landing on the label. Keep them in step. */
  padding: 14px 20px 14px 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
}

.hm-chat__foot .l {
  font-size: 13px;
  color: var(--hm-muted);
}

.hm-chat__foot .v {
  font-family: var(--hm-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: #15803D;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1040px) {
  .hm-hero__grid {
    grid-template-columns: 1fr;
    gap: 72px;
    padding: 56px 24px 80px;
  }
  .hm-hero__stage { margin-right: 8px; }
  .hm-hero__disc { width: 300px; height: 300px; }
}

@media (max-width: 620px) {
  /* The chips break the card's edges by design; below this width there is no
     margin left to break into, so they come inside and the disc goes. */
  .hm-hero__disc,
  .hm-hero__tilt { display: none; }

  .hm-chip--avail {
    position: static;
    display: inline-block;
    margin-bottom: 16px;
  }

  .hm-chip--years {
    position: static;
    width: auto;
    height: auto;
    margin-top: 16px;
    padding: 12px 18px;
    border-radius: 99px;
    box-shadow: none;
    border: 1px solid var(--hm-hairline);
    justify-content: flex-start;
  }

  .hm-chip--years .n { font-size: 34px; }
  .hm-chat { transform: none; }
  /* Roundel is out of the corner now, so the inset that cleared it goes too. */
  .hm-chat__foot { padding-left: 20px; }
}

/* --------------------------------------------------------------------------
   Proof bar — four claims on forest, hairline-divided.
   -------------------------------------------------------------------------- */
.hm-proof {
  background: var(--v2-dark);
}

.hm-proof__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.hm-proof__item {
  padding: 36px 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
}

.hm-proof__item:first-child { padding-left: 0; }

.hm-proof__item:last-child {
  padding-right: 0;
  border-right: 0;
}

.hm-proof__n {
  color: #fff;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.03em;
  margin-bottom: 5px;
}

.hm-proof__l {
  color: #9997AC;
  font-size: 13px;
}

@media (max-width: 900px) {
  .hm-proof__inner { grid-template-columns: repeat(2, 1fr); }
  .hm-proof__item {
    padding: 26px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }
  .hm-proof__item:nth-child(2n) { padding-right: 0; border-right: 0; }
  .hm-proof__item:nth-child(2n+1) { padding-left: 0; }
  .hm-proof__item:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 560px) {
  .hm-proof__inner { grid-template-columns: 1fr; }
  .hm-proof__item {
    padding: 20px 0;
    border-right: 0;
  }
  .hm-proof__item:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Section shell — mono kicker, asymmetric head, mono rule above the grid.
   -------------------------------------------------------------------------- */
.hm-sec {
  max-width: 1180px;
  margin: 0 auto;
  padding: 100px 40px 0;
}

.hm-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;
  margin-bottom: 22px;
}

.hm-sechead {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 52px;
}

.hm-sechead h2 {
  font-weight: 600;
  font-size: 54px;
  line-height: 1.02;
  letter-spacing: -0.05em;
  margin: 0;
  text-wrap: pretty;
}

.hm-sechead p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--hm-muted);
  margin: 0 0 8px;
}

/* The rule reads as a caption pair, not a divider — both ends carry text. */
.hm-secrule {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(26, 26, 46, 0.14);
  padding-top: 14px;
  margin-bottom: 26px;
  font-family: var(--hm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--hm-muted);
}

@media (max-width: 900px) {
  .hm-sec { padding: 72px 24px 0; }
  .hm-sechead {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 36px;
  }
  .hm-sechead h2 { font-size: 38px; }
  .hm-secrule span + span { text-align: right; }
}

@media (max-width: 560px) {
  .hm-sechead h2 { font-size: 31px; }
  .hm-secrule { font-size: 8.5px; }
}

/* --------------------------------------------------------------------------
   Service cards — 12-column asymmetric grid, four grounds, seven parts each.
   The parts are load-bearing: the counter says how many there are, the
   "Saves you from" line is the only place on the page that names a
   consequence rather than a feature.
   -------------------------------------------------------------------------- */
.hm-svcs {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.hm-svc {
  grid-column: span var(--span, 6);
  /* The glyph sizes off the CARD, not the viewport — a span-4 card at 1440px
     is narrower than a span-12 card at 820px, and only the card knows. */
  container-type: inline-size;
  padding: 36px 36px 30px;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  transition: transform var(--dur-2, 260ms) var(--ease, cubic-bezier(.2, .7, .2, 1)),
              box-shadow var(--dur-2, 260ms) ease;
}

.hm-svc:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 52px -26px rgba(18, 48, 36, 0.45);
}

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

/* Grounds. Four of them, alternating so no two neighbours match. */
.hm-svc--dark {
  background: var(--v2-dark);
  color: #fff;
}

.hm-svc--tint {
  background: var(--v2-tint);
  background-image:
    linear-gradient(rgba(26, 26, 46, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 26, 46, 0.035) 1px, transparent 1px);
  background-size: 62px 62px;
}

.hm-svc--paper { background: #fff; }
.hm-svc--sand { background: var(--hm-sand); }

.hm-svc__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 30px;
}

.hm-svc__n {
  font-family: var(--hm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.17em;
  color: var(--hm-purple);
}

.hm-svc--dark .hm-svc__n { color: #9997AC; }

.hm-svc__tag {
  font-family: var(--hm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hm-purple-text);
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

.hm-svc--dark .hm-svc__tag {
  color: var(--hm-lilac);
  border-color: rgba(255, 255, 255, 0.3);
}

.hm-svc__body {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 0 0 auto;
}

.hm-svc__copy {
  flex: 1;
  min-width: 0;
}

.hm-svc__copy h3 {
  font-weight: 600;
  font-size: 29px;
  letter-spacing: -0.035em;
  margin: 0 0 12px;
}

.hm-svc--dark .hm-svc__copy h3 { color: #fff; }

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

.hm-svc--dark .hm-svc__copy p { color: #B9B7C6; }

/* Glyph disc — concentric rings plus three green marks. Decorative: the
   glyph repeats the card title, so it is hidden from assistive tech. */
.hm-glyph {
  position: relative;
  width: 158px;
  height: 158px;
  flex: 0 0 auto;
}

.hm-glyph i {
  position: absolute;
  border-radius: 99px;
}

.hm-glyph i:nth-child(1) { inset: 0; }
.hm-glyph i:nth-child(2) { inset: 19px; }
.hm-glyph i:nth-child(3) { inset: 38px; }

.hm-glyph b {
  position: absolute;
  border-radius: 99px;
  background: var(--hm-green-mark);
  width: 6px;
  height: 6px;
}

.hm-glyph b:nth-of-type(1) {
  top: 6px;
  left: 50%;
  margin-left: -3.5px;
  width: 7px;
  height: 7px;
}

.hm-glyph b:nth-of-type(2) { bottom: 22px; left: 19px; }
.hm-glyph b:nth-of-type(3) { bottom: 22px; right: 19px; }

/* Holds the artwork, centred in the innermost ring. The mono text sizes that
   used to live here (`is-long`, `is-mark`, `is-serif`) are gone with the text
   glyphs they sized — see hostme_svc_icon() for why the text went.

   ON THE CLASS, not on `span`. `.hm-glyph span` was a descendant selector, so
   the moment the disc held anything richer than a word it also matched the
   spans INSIDE it — the two vendor chips were each given `position:absolute;
   inset:0` and stacked exactly on top of each other in the corner. A bare
   element selector inside a component is a trap that springs later. */
.hm-glyph__art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hm-green-mark);
  line-height: 1;
}

/* 54px inside an 82px inner ring — big enough to read at a glance, with the
   ring still reading as a ring rather than as a border on the icon. */
.hm-glyph .hm-ic {
  width: 54px;
  height: 54px;
  display: block;
}

/* On the forest disc the green mark is the readable one; on lilac the disc is
   purple-tinted and a green icon would be the only green in the card for no
   reason. */
.hm-glyph--dark .hm-ic { color: var(--hm-green-mark); }
.hm-glyph--lilac .hm-glyph__art { color: var(--hm-purple); }

/* The two mail platforms. White chips because both marks are drawn for a light
   ground and this disc is forest — Microsoft's blue square and Google's blue
   arc both lose their edge against it. */
.hm-vendors {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hm-vendor {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px -3px rgba(26, 26, 46, 0.4);
}

.hm-vendor svg {
  width: 21px;
  height: 21px;
  display: block;
}

/* On ink the disc is a green wash; on light grounds it is ink or lilac. */
.hm-glyph--green i:nth-child(1) { background: rgba(34, 197, 94, 0.11); }
.hm-glyph--green i:nth-child(2) { border: 1px solid rgba(34, 197, 94, 0.34); }
.hm-glyph--green i:nth-child(3) { border: 1px solid rgba(34, 197, 94, 0.2); }

.hm-glyph--dark i:nth-child(1) { background: var(--v2-dark); }
.hm-glyph--ink i:nth-child(2) { border: 1px solid rgba(255, 255, 255, 0.22); }
.hm-glyph--ink i:nth-child(3) { border: 1px solid rgba(255, 255, 255, 0.14); }

.hm-glyph--ring i:nth-child(1) { border: 1px solid rgba(34, 197, 94, 0.3); }
.hm-glyph--ring i:nth-child(2) { border: 1px solid rgba(34, 197, 94, 0.22); }
.hm-glyph--ring i:nth-child(3) { background: rgba(34, 197, 94, 0.09); }

.hm-glyph--lilac i:nth-child(1) { background: var(--v2-tint); }
.hm-glyph--lilac i:nth-child(2) { border: 1px solid rgba(124, 58, 237, 0.28); }
.hm-glyph--lilac i:nth-child(3) { border: 1px solid rgba(124, 58, 237, 0.18); }
.hm-glyph--lilac b { background: var(--hm-purple); }

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

.hm-svc--dark .hm-svc__foot { border-top-color: rgba(255, 255, 255, 0.15); }

/* The consequence line. Cormorant italic, and the only accent on the card. */
.hm-svc__saves {
  font-family: var(--hm-font-accent);
  font-style: italic;
  font-size: 21px;
  line-height: 1.3;
  margin-bottom: 16px;
}

.hm-svc--dark .hm-svc__saves { color: #fff; }

.hm-svc__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hm-svc__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hm-svc__pill {
  font-family: var(--hm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hm-muted);
  background: rgba(124, 58, 237, 0.1);
  border-radius: 4px;
  padding: 6px 10px;
}

.hm-svc--dark .hm-svc__pill {
  color: #B9B7C6;
  background: rgba(255, 255, 255, 0.08);
}

/*
 * ACCEPTANCE DEVIATION, deliberate. "Every text link #6D28D9" cannot hold on
 * the ink cards — #6D28D9 on #1A1A2E measures 1.6:1. v2 sets these white and
 * v2 wins on disagreement. Every link on a light ground is #6D28D9.
 */
.hm-svc__ask {
  color: var(--hm-purple-text);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1.5px solid var(--hm-purple);
  padding-bottom: 2px;
  transition: padding var(--dur-1, 200ms) ease, border-color var(--dur-1, 200ms) ease;
}

.hm-svc__ask:hover {
  padding-bottom: 6px;
  border-bottom-color: var(--hm-green-mark);
}

.hm-svc--dark .hm-svc__ask {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* Narrow cards: shrink the disc so the copy is not squeezed into a column.
   Below 300px of card width it wins nothing and the words take the space. */
@container (max-width: 460px) {
  .hm-glyph { width: 112px; height: 112px; }
  .hm-glyph i:nth-child(2) { inset: 14px; }
  .hm-glyph i:nth-child(3) { inset: 27px; }
  /* Inner ring is 58px here, so the artwork comes down with it. */
  .hm-glyph .hm-ic { width: 38px; height: 38px; }
  .hm-vendor { width: 27px; height: 27px; border-radius: 6px; }
  .hm-vendor svg { width: 15px; height: 15px; }
  .hm-vendors { gap: 6px; }
}

@container (max-width: 340px) {
  .hm-glyph { display: none; }
}

@media (max-width: 1040px) {
  .hm-svc { grid-column: span 6; }
}

@media (max-width: 820px) {
  .hm-svc {
    grid-column: span 12;
    min-height: 0;
    padding: 28px 24px 24px;
  }
  .hm-svc__copy h3 { font-size: 24px; }
  .hm-svc__saves { font-size: 19px; }
}

@media (max-width: 560px) {
  /* The disc competes with the copy at this width — the words win. */
  .hm-glyph { display: none; }
}

/* --------------------------------------------------------------------------
   The difference — ink band. Claim on the left with the one green action,
   proof on the right as two adjacent columns that share an edge: the bad one
   outlined and grey, the good one a raised lilac card. The comparison is the
   composition, not a table.
   -------------------------------------------------------------------------- */
/* v2 sets a 100px gap above this band so it reads as a new argument,
   not as the last row of the services grid. */
.hm-band {
  background: var(--v2-dark);
  margin-top: 100px;
}

.hm-band--deep {
  background: var(--v2-deep);
  /* Runs straight on from pricing — one continuous dark close. */
  margin-top: 0;
}

.hm-band__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 96px 40px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 70px;
  align-items: center;
}

/* Mono kicker on ink is the green MARK, not the button green — it is a label,
   not something to press. */
.hm-kick--on-ink { color: var(--hm-green-mark); }

.hm-band h2 {
  color: #fff;
  font-weight: 600;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  margin: 0 0 24px;
  text-wrap: pretty;
}

.hm-band__lead {
  color: #B9B7C6;
  font-size: 17px;
  line-height: 1.65;
  margin: 0 0 34px;
  max-width: 27em;
}

.hm-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hm-vs__col {
  padding: 30px 26px;
}

.hm-vs__col--bad {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-right: none;
  border-radius: 8px 0 0 8px;
}

.hm-vs__col--good {
  background: var(--hm-lilac);
  border-radius: 8px;
  box-shadow: 0 20px 46px -20px rgba(0, 0, 0, 0.5);
}

.hm-vs__h {
  font-family: var(--hm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  margin: 0 0 24px;
}

.hm-vs__col--bad .hm-vs__h { color: #9997AC; }
.hm-vs__col--good .hm-vs__h { color: var(--hm-purple-text); }

.hm-vs__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-size: 14.5px;
}

.hm-vs__col--bad .hm-vs__row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #9997AC;
}

.hm-vs__col--good .hm-vs__row {
  border-bottom: 1px solid rgba(124, 58, 237, 0.2);
  font-weight: 500;
}

.hm-vs__row:last-child { border-bottom: 0; }

.hm-vs__row i {
  width: 20px;
  height: 20px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-style: normal;
  flex: 0 0 auto;
}

.hm-vs__col--bad .hm-vs__row i {
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #9997AC;
}

.hm-vs__col--good .hm-vs__row i {
  background: var(--hm-purple);
  color: #fff;
}

/* --------------------------------------------------------------------------
   About — the years figure set as a plate, and Konrad's line beside the photo.
   -------------------------------------------------------------------------- */
.hm-about {
  max-width: 1180px;
  margin: 0 auto;
  padding: 96px 40px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  align-items: center;
}

/*
 * v2 gives this column a bare lilac circle and nothing else, which reads as
 * empty next to the rest of the page. The years plate becomes a chip breaking
 * the corner of a photograph instead — the same device the hero already uses
 * for its roundel, so it is the page's own vocabulary rather than a new one.
 */
.hm-about__media {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.hm-about__media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: 8px;
}

.hm-about__plate {
  position: absolute;
  right: -34px;
  bottom: -26px;
  width: 168px;
  height: 168px;
  /* 50%, not v2's literal 99px — at this size that value is a squircle, and a
     squircle is not one of the brand's shapes. */
  border-radius: 50%;
  background: var(--hm-lilac);
  border: 1px solid rgba(124, 58, 237, 0.25);
  box-shadow: 0 16px 34px -16px rgba(26, 26, 46, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hm-about__plate .n {
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--hm-purple);
  font-variant-numeric: tabular-nums;
}

.hm-about__plate .l {
  font-family: var(--hm-font-mono);
  font-size: 7.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--hm-muted);
  text-align: center;
  margin-top: 8px;
  line-height: 1.7;
}

.hm-about h2 {
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.05em;
  margin: 0 0 22px;
  text-wrap: pretty;
}

.hm-about p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--hm-muted);
  margin: 0 0 16px;
  max-width: 34em;
}

.hm-about__by {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}

.hm-about__by img,
.hm-about__ph {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

/* Dashed while the photograph is outstanding — visibly a gap, not a design. */
.hm-about__ph {
  background: var(--hm-lilac);
  border: 1px dashed rgba(124, 58, 237, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hm-font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hm-purple);
  text-align: center;
  line-height: 1.4;
}

.hm-about__by .nm {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.hm-about__by .rl {
  font-size: 13.5px;
  color: var(--hm-muted);
}

/* --------------------------------------------------------------------------
   Security stance — lilac, a 2px purple rule on the LEFT EDGE ONLY, square on
   that edge and 8px on the other three. Identical wording on all three
   surfaces; never reword one alone.
   -------------------------------------------------------------------------- */
.hm-stance {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px 96px;
}

.hm-stance__box {
  background: var(--hm-lilac);
  border-left: 2px solid var(--hm-purple);
  border-radius: 0 8px 8px 0;
  padding: 32px 36px;
  max-width: 62em;
}

.hm-stance__kicker {
  font-family: var(--hm-font-mono);
  font-size: 10px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--hm-purple-text);
  font-weight: 500;
  margin: 0 0 14px;
}

.hm-stance__box p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--hm-ink-2);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Reviews — three cards, initials not logos, and the rating as a figure.
   -------------------------------------------------------------------------- */
.hm-reviews {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px 100px;
}

.hm-reviews__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

.hm-reviews__head h2 {
  font-weight: 600;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  margin: 0;
}

.hm-rating { text-align: right; }

.hm-rating__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  justify-content: flex-end;
}

.hm-rating__n {
  font-weight: 600;
  font-size: 44px;
  letter-spacing: -0.05em;
  color: var(--hm-purple);
  font-variant-numeric: tabular-nums;
}

.hm-rating__stars {
  color: var(--hm-purple);
  font-size: 19px;
  letter-spacing: 2px;
}

.hm-rating__sub {
  font-size: 13px;
  color: var(--hm-muted);
  margin: 4px 0 0;
}

.hm-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.hm-card {
  background: #fff;
  border: 1px solid rgba(26, 26, 46, 0.12);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-2, 260ms) var(--ease, cubic-bezier(.2, .7, .2, 1)),
              box-shadow var(--dur-2, 260ms) ease,
              border-color var(--dur-2, 260ms) ease;
}

.hm-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 24px 46px -24px rgba(18, 48, 36, 0.35);
}

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

.hm-card__mark {
  font-size: 34px;
  line-height: 1;
  color: var(--hm-purple);
  margin-bottom: 18px;
}

.hm-card blockquote {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--hm-ink-2);
  margin: 0 0 auto;
}

.hm-card__by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(26, 26, 46, 0.1);
}

.hm-card__av {
  width: 38px;
  height: 38px;
  border-radius: 99px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex: 0 0 auto;
}

.hm-card:nth-child(3n+1) .hm-card__av { background: var(--v2-dark); }
.hm-card:nth-child(3n+2) .hm-card__av { background: var(--hm-purple); }
.hm-card:nth-child(3n+3) .hm-card__av { background: var(--hm-muted); }

.hm-card__by .nm { display: block; font-weight: 600; font-size: 14px; }
.hm-card__by .rl { display: block; font-size: 12.5px; color: var(--hm-muted); }

/* --------------------------------------------------------------------------
   Pricing — ink band. The published figure is underlined in purple, and the
   VAT and per-unit basis sit directly beneath it, never in a footnote.
   -------------------------------------------------------------------------- */
.hm-band--price .hm-band__inner { grid-template-columns: 1.1fr 0.9fr; }

.hm-price__fig {
  color: var(--hm-lilac);
  border-bottom: 2px solid var(--hm-purple);
  font-variant-numeric: tabular-nums;
}

.hm-price__basis {
  color: #9997AC;
  font-size: 14px;
  margin: 0;
}

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

.hm-price__ticks li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  font-size: 15px;
}

.hm-price__ticks i {
  color: var(--hm-green-mark);
  font-style: normal;
}

/* Lilac, not green: a green action on this band would be the second one in
   the viewport. */
.hm-price__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--hm-lilac);
  color: var(--hm-ink);
  font-weight: 600;
  font-size: 16px;
  border-radius: 6px;
  padding: 16px 28px;
  text-decoration: none;
  transition: background var(--dur-1, 200ms) ease;
}

.hm-price__link:hover { background: #fff; }

/* --------------------------------------------------------------------------
   Action block — three channels sharing one edge. The panels ARE the action;
   there is no button inside a panel. One per page.
   -------------------------------------------------------------------------- */
.hm-contact {
  max-width: 1180px;
  margin: 0 auto;
  padding: 96px 40px;
}

.hm-contact__head {
  text-align: center;
  margin-bottom: 52px;
}

.hm-contact__head h2 {
  color: #fff;
  font-weight: 600;
  font-size: clamp(31px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.05em;
  margin: 0 auto;
  max-width: 16em;
  text-wrap: pretty;
}

.hm-channels {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  max-width: 960px;
  margin: 0 auto;
}

.hm-channel {
  padding: 28px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background var(--dur-2, 220ms) ease;
}

.hm-channel + .hm-channel { border-left: none; }
.hm-channel:last-child { border-radius: 0 8px 8px 0; }
.hm-channel:hover { background: rgba(255, 255, 255, 0.07); }

/* The one green action in the page's last viewport. */
.hm-channel--wa {
  background: var(--hm-green-button);
  border-color: var(--hm-green-button);
  border-radius: 8px 0 0 8px;
}

.hm-channel--wa:hover { background: #166534; }

.hm-channel .nm {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.hm-channel .sub {
  display: block;
  color: #9997AC;
  font-size: 13px;
  margin-top: 3px;
}

.hm-channel--wa .sub { color: var(--hm-green-ground); }

.hm-channel .arrow {
  color: #fff;
  font-size: 18px;
}

.hm-contact__hours {
  text-align: center;
  margin: 26px 0 0;
  font-size: 13.5px;
  color: #9997AC;
}

@media (max-width: 1040px) {
  .hm-band__inner,
  .hm-band--price .hm-band__inner,
  .hm-about {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 64px 24px;
  }
  .hm-stance, .hm-reviews { padding-left: 24px; padding-right: 24px; }
  .hm-contact { padding: 64px 24px; }
  .hm-cards { grid-template-columns: 1fr; }
  .hm-channels { grid-template-columns: 1fr; }
  .hm-channel + .hm-channel { border-top: none; border-left: 1px solid rgba(255, 255, 255, 0.15); }
  .hm-channel--wa { border-radius: 8px 8px 0 0; }
  .hm-channel:last-child { border-radius: 0 0 8px 8px; }
}

@media (max-width: 620px) {
  .hm-vs { grid-template-columns: 1fr; }
  .hm-vs__col--bad { border-right: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px 8px 0 0; }
  .hm-vs__col--good { border-radius: 0 0 8px 8px; }
  /* No margin left for the plate to break into — bring it inside. */
  .hm-about__plate { right: 12px; bottom: 12px; width: 132px; height: 132px; }
  .hm-about__plate .n { font-size: 36px; }
  .hm-rating { text-align: left; }
  .hm-rating__row { justify-content: flex-start; }
}

/* The inline WhatsApp mark sits beside a text label; match the lucide icons
   it replaced so button padding does not shift. */
.hm-wa {
  flex: 0 0 auto;
  vertical-align: -0.18em;
}

/* v2's nav: 24px gaps, no icons in the row, and a small grey caret. */
.mk-nav__droptoggle .mk-caret {
  font-size: 9px;
  color: #9997AC;
  line-height: 1;
}

/* v2's header is 76px with 24px nav gaps and a 1180px measure. */
.mk-header__inner {
  max-width: 1180px;
  height: 76px;
  gap: 32px;
}

.mk-nav { gap: 24px; }

.mk-nav > a,
.mk-nav__droptoggle {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hm-ink-2);
}

.mk-nav__droptoggle .mk-caret {
  /* Sits on the text baseline, not raised like a footnote marker. */
  position: relative;
  top: 1px;
  margin-left: 6px;
}

/* ---- review card: the client's logo leads ----
   Tried as a large watermark behind the quote first. It does not work: these
   marks are wordmarks, and a wordmark at 11% opacity behind body copy reads
   as a printing fault, not as branding. Crisp and small beats large and
   smudged. */
.hm-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  min-height: 30px;
}

/* Sized by HEIGHT. The marks are a roundel, a wordmark and a rectangle — at
   equal WIDTH the tall ones shrink to nothing. Equal cap height is the only
   thing that makes a mixed set look like a set. */
.hm-card__logo {
  max-height: 30px;
  max-width: 62%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.hm-card__by {
  display: block;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(26, 26, 46, 0.1);
}

/* Trust strip on the /trim/ assets. Sized by height and never enlarged past
   the source: Quigley's mark is only 20px tall in the file, and stretching it
   to match the others is what made that row look broken.
   Scoped to .mk-trust now that the markup is a marquee — it was scoped to
   .mk-trust__row, which no longer exists, so this rule had stopped applying
   and the strip was silently back on marketing.css's looser 38px cap. */
.mk-trust .mk-logo img {
  max-height: 30px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}