/* ============================================================
   INNER PAGES, PRESS PROOF LANGUAGE (pages-lab, 2026-09-24)
   Every page below the homepage uses the homepage components
   (hero-x.css + home-x.css). This file only holds the variants:
   the inner hero, method cards, the sticky intro rail, county
   color coding, the post hero and the minimal hero.
   Rest state is always the finished state. Motion only runs while
   html.hx-armed is set, and a head timer always removes it.
   ============================================================ */

/* ---------- inner hero ---------- */
.hx--in {
  min-height: min(calc(100svh - var(--nav-h)), 940px);
}
.hx--in .hx-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.hx--in .hero-copy {
  container-type: inline-size;
  min-width: 0;
  width: 100%;
}
.hx--in .crumb {
  margin-bottom: min(18px, 2.2svh);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
}
.hx--in .crumb em {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34ch;
}
/* headline size follows its longest line, so a long city name never overflows */
.hx--in .hx-h1 {
  font-size: clamp(30px, 5vw, 80px);
  font-size: clamp(30px, min(calc(100cqi / (var(--n) * 0.4)), 11svh), 88px);
}
.hx--in .hx-ln {
  position: relative;
  display: inline-block;
}
.hx--in .hx-key > .hx-ln {
  color: var(--paper);
  text-shadow: 0.028em 0.022em 0 rgba(150, 255, 0, 0.5);
}
.hx--in .hx-key em {
  display: inline-block;
}
.hx--in .hx-key em > .hx-ln {
  color: inherit;
}
.hx--in .hx-ln::before,
.hx--in .hx-ln::after {
  content: attr(data-t);
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  text-shadow: none;
  mix-blend-mode: screen;
}
.hx--in .hx-ln::before {
  color: #e6007e;
}
.hx--in .hx-ln::after {
  color: #00b4d8;
}
/* entrance: plates fly in and lock, the white key inks up, the second line floods lime */
@keyframes hxInInk {
  0%,
  44% {
    color: transparent;
  }
  62%,
  100% {
    color: var(--paper);
  }
}
@keyframes hxInLime {
  0%,
  18% {
    text-shadow: -0.42em -0.16em 0 rgba(150, 255, 0, 1);
  }
  52% {
    text-shadow: 0 0 0 rgba(150, 255, 0, 1);
  }
  100% {
    text-shadow: 0.028em 0.022em 0 rgba(150, 255, 0, 0.5);
  }
}
@keyframes hxInFlood {
  0%,
  30% {
    background-size:
      0% 100%,
      0% 100%;
  }
  42%,
  65% {
    background-size:
      0% 100%,
      100% 100%;
  }
  100% {
    background-size:
      100% 100%,
      100% 100%;
  }
}
html.hx-armed .hx--in .hx-h1 .hx-key {
  animation: none;
}
html.hx-armed .hx--in .hx-key > .hx-ln {
  animation:
    hxInInk 1.25s linear both,
    hxInLime 1.25s cubic-bezier(0.65, 0, 0.25, 1) both;
}
html.hx-armed .hx--in .hx-ln::before {
  --x: 0.46em;
  --y: 0.1em;
  animation: hxReg 1.25s cubic-bezier(0.65, 0, 0.25, 1) 0.05s both;
}
html.hx-armed .hx--in .hx-ln::after {
  --x: -0.2em;
  --y: 0.3em;
  animation: hxReg 1.25s cubic-bezier(0.65, 0, 0.25, 1) 0.1s both;
}
html.hx-armed .hx--in .hx-h1 .hx-key em {
  animation: hxInFlood 1.85s cubic-bezier(0.6, 0, 0.3, 1) both;
}
html.hx-done .hx--in .hx-ln,
html.hx-done .hx--in .hx-ln::before,
html.hx-done .hx--in .hx-ln::after,
html.hx-done .hx--in .hx-h1 .hx-key em {
  animation: none !important;
}

/* method strip as links: same look as the homepage strip */
.hx-methods a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: inherit;
  transition: color 0.35s var(--snap);
}
.hx-methods a + a::before {
  content: "";
  width: 4px;
  height: 4px;
  margin: 0 12px;
  background: #3a4a52;
  display: inline-block;
}
.hx-methods a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--snap);
}
.hx-methods a + a::after {
  left: 28px;
}
.hx-methods a.is-on,
.hx-methods a:hover,
.hx-methods a:focus-visible {
  color: var(--c);
}
.hx-methods a.is-on::after,
.hx-methods a:hover::after,
.hx-methods a:focus-visible::after {
  transform: scaleX(1);
}
.hx--in .hx-slug span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .hx--in .hx-grid {
    grid-template-columns: 1fr;
  }
  .hx--in .hx-h1 {
    font-size: clamp(30px, min(calc(100cqi / (var(--n) * 0.4)), 11svh), 96px);
  }
}
@media (max-width: 1020px) {
  .hx--in .crumb {
    justify-content: center;
  }
  .hx--in .crumb em {
    max-width: 22ch;
  }
}
@media (max-width: 560px) {
  .hx-methods a + a::before {
    display: none;
  }
  .hx-methods a + a::after {
    left: 0;
  }
  .hx-methods a {
    justify-content: center;
    min-height: 32px;
  }
  .hx--in .hx-methods--4 {
    grid-template-columns: repeat(2, auto);
  }
  .hx--in .crumb {
    font-size: 11px;
  }
}
@media (pointer: coarse) {
  .hx-methods a {
    min-height: 36px;
  }
}

/* ---------- minimal hero (legal, quote): same language, no proofs ---------- */
.hx--min {
  min-height: 0;
}
.hx--min .hx-grid {
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(56px, 8vw, 110px) clamp(40px, 5vw, 72px);
}
.hx--min .hero-copy {
  max-width: 900px;
}
.hx--min .hx-h1 {
  font-size: clamp(30px, min(calc(100cqi / (var(--n) * 0.4)), 11svh), 84px);
}
.hx--min .hero-bg::after {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.82) 50%,
      rgba(0, 0, 0, 0.6) 100%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));
}

/* ---------- post hero: the post photo pulled as a single proof ---------- */
.hx--post {
  min-height: 0;
}
.hx--post .hx-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 72px);
}
.hx--post .hx-h1 {
  white-space: normal;
  text-wrap: balance;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 0.96;
}
.hx--post .hx-key > .hx-ln,
.hx--post .hx-key em > .hx-ln {
  display: inline;
}
.hx--post .hx-ln::before,
.hx--post .hx-ln::after {
  display: none;
}
.hx--post .hx-proofs {
  height: min(46svh, 440px);
  min-height: 300px;
}
.hx--post .hx-proof--solo {
  --w: 78%;
  --r: 3deg;
  --d: 12;
  left: 10%;
  z-index: 2;
  aspect-ratio: 4 / 3.4;
}
.hx--post .hx-proof--solo figcaption {
  opacity: 1;
}
.hx--post .post-meta {
  margin-top: 22px;
}
html.hx-armed .hx--post .hx-proof--solo {
  animation: hxDeal 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s both;
}
.hx--post .hx-bar .hx-slug {
  border-top: 0;
}
@media (max-width: 1100px) {
  .hx--post .hx-grid {
    grid-template-columns: 1fr;
  }
  .hx--post .hx-h1 {
    font-size: clamp(28px, 7vw, 54px);
  }
}
@media (max-width: 1020px) {
  .hx--post .hx-bar {
    display: none;
  }
  .hx--post .post-meta {
    justify-content: center;
  }
}

/* ---------- method / stage cards ---------- */
.mx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: 8px;
}
.mx-grid--2,
.mx-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mx-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mx-grid--8 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mx {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(19, 30, 36, 0.96),
    rgba(11, 17, 22, 0.96)
  );
  color: var(--paper);
  isolation: isolate;
  transition: border-color 0.25s linear;
}
.mx::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--c);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 0.5s var(--snap);
}
.mx:hover,
.mx:focus-visible {
  border-color: #33424c;
}
.mx:hover::before,
.mx:focus-visible::before {
  transform: scaleX(1);
}
.mx-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--panel-2);
  border-bottom: 2px solid var(--rule);
}
.mx-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2) contrast(1.06) brightness(0.84);
  transition:
    transform 1.2s var(--snap),
    filter 0.4s linear;
}
.mx:hover .mx-media img {
  transform: scale(1.05);
  filter: grayscale(0) contrast(1.06) brightness(0.95);
}
.mx-media.vf > .c4 {
  border-color: var(--c);
}
.mx-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 26px;
  flex: 1;
}
.mx-n {
  font-family: "Staatliches", sans-serif;
  font-size: 34px;
  line-height: 1;
  color: var(--c);
}
.mx h3 {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1;
}
.mx-p {
  font-size: 15.5px;
  color: #aab5af;
  text-wrap: pretty;
}
.mx .more {
  margin-top: auto;
  padding-top: 6px;
  color: var(--c);
  border-bottom: 0;
}
@media (max-width: 1180px) {
  .mx-grid--4,
  .mx-grid--8 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .mx-grid,
  .mx-grid--4,
  .mx-grid--8 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mx-grid--3 > .mx:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .mx-grid--3 > .mx:last-child:nth-child(odd) .mx-media {
    aspect-ratio: 16 / 7;
  }
}
@media (max-width: 1020px) {
  .mx-body {
    align-items: center;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .mx-grid,
  .mx-grid--2,
  .mx-grid--4,
  .mx-grid--8 {
    grid-template-columns: 1fr;
  }
  .mx-grid--3 > .mx:last-child:nth-child(odd) .mx-media {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- intro: long copy with a sticky photo + board rail ---------- */
.ix .copy > h2 {
  margin-bottom: 22px;
}
.ix .copy > h2 + p,
.ix .copy > .sep-head + p {
  font-size: clamp(17px, 1.45vw, 19.5px);
  color: #dbe4de;
  line-height: 1.6;
}
.ix .copy {
  padding-left: clamp(0px, 2vw, 26px);
  border-left: 2px solid var(--rule);
  position: relative;
}
.ix .copy::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 110px;
  background: var(--volt);
}
.ix-side {
  align-self: start;
}
@media (min-width: 1021px) {
  .ix-side {
    position: sticky;
    top: 104px;
  }
}
@media (max-width: 1020px) {
  .ix .copy {
    padding-left: 0;
    border-left: 0;
  }
  .ix .copy::before {
    display: none;
  }
}

/* ---------- process band: timeline beside a photo and the board ---------- */
.px-band .two {
  align-items: start;
}
.px-band .px-lead {
  margin-top: 16px;
  max-width: 46ch;
}
.px-side {
  align-self: start;
}
.figbox.vf img {
  display: block;
}
@media (min-width: 1021px) {
  .px-side {
    position: sticky;
    top: 104px;
  }
}
@media (max-width: 1020px) {
  .px-band .px-lead {
    margin-inline: auto;
  }
  .px-band .px-steps {
    max-width: 560px;
    margin-inline: auto;
    text-align: left;
  }
}

/* ---------- counties and city chips ---------- */
.ax-counties--in {
  margin: 4px 0 22px;
  max-width: 720px;
}
.ax-counties a.is-on {
  border-color: var(--c);
  color: var(--c);
}
.chips a:hover,
.chips a:focus-visible {
  border-color: var(--c, var(--volt));
  color: var(--c, var(--volt));
}
.chips a.is-here {
  background: var(--c, var(--volt));
  border-color: var(--c, var(--volt));
  color: #000;
}
.county {
  --c: var(--volt);
  position: relative;
}
.county:nth-of-type(3n + 2) {
  --c: #e6007e;
}
.county:nth-of-type(3n + 3) {
  --c: #00b4d8;
}
.county#palm-beach {
  --c: #96ff00;
}
.county#broward {
  --c: #e6007e;
}
.county#miami-dade {
  --c: #00b4d8;
}
.county h3 {
  border-bottom-color: #22303a;
  position: relative;
}
.county h3::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--c);
  align-self: center;
  flex: 0 0 12px;
}
.county h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 90px;
  height: 2px;
  background: var(--c);
}
.county .chips a:hover {
  border-color: var(--c);
  color: var(--c);
}
@media (max-width: 1020px) {
  .ax-counties--in {
    margin-inline: auto;
  }
  .county h3::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ---------- cards picked up from the homepage ---------- */
.why-grid--4.wx-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.why-grid--3.wx-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flush .why-c.wx {
  flex: 1 1 250px;
}
.why-c.wx .more {
  margin-top: 8px;
  color: var(--c);
}
@media (max-width: 1020px) {
  .why-grid--4.wx-grid,
  .why-grid--3.wx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .why-grid--4.wx-grid,
  .why-grid--3.wx-grid {
    grid-template-columns: 1fr;
  }
}
/* supplier catalogs + service areas get the channel bar */
.cat-c {
  position: relative;
  overflow: hidden;
}
.cat-c::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--c, var(--volt));
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 0.5s var(--snap);
}
.cat-c:hover::before {
  transform: scaleX(1);
}
.cat-c .cat-c__n {
  color: var(--c, var(--muted));
}
.cat-c em {
  color: var(--c, var(--volt));
}
.loc-c {
  position: relative;
  border-left: 4px solid var(--c, var(--volt));
}
.loc-c__l a {
  color: var(--c, var(--volt));
}
.loc-head .ax-counties {
  margin-top: 16px;
}
/* gallery: channel color on the live corner */
.gal__it.vf > .c4 {
  border-color: var(--c, var(--volt));
}

/* ---------- proof band on inner pages ---------- */
#proof .proof-head {
  max-width: 58ch;
}

/* ---------- closer: link card sits on the lime ---------- */
.closer.cl-x .closer-card {
  position: relative;
}
.closer.cl-x .closer-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    #96ff00 0 16.66%,
    #f5b841 16.66% 33.33%,
    #e6007e 33.33% 50%,
    #00b4d8 50% 66.66%,
    #7a4dff 66.66% 83.33%,
    #ff6b35 83.33% 100%
  );
}

/* ---------- blog posts ---------- */
.post-body .wrap > h2 {
  position: relative;
  padding-top: 18px;
  margin-top: 46px;
}
.post-body .wrap > h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 4px;
  background: var(--volt);
}
.post-body .wrap > h2:nth-of-type(6n + 2)::before {
  background: #f5b841;
}
.post-body .wrap > h2:nth-of-type(6n + 3)::before {
  background: #e6007e;
}
.post-body .wrap > h2:nth-of-type(6n + 4)::before {
  background: #00b4d8;
}
.post-body .wrap > h2:nth-of-type(6n + 5)::before {
  background: #7a4dff;
}
.post-body .wrap > h2:nth-of-type(6n + 6)::before {
  background: #ff6b35;
}
.post-body .wrap > p:first-child {
  font-size: clamp(17.5px, 1.5vw, 20px);
  color: #dbe4de;
}
.post-body .post-cta {
  position: relative;
  overflow: hidden;
}
.post-body .post-cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    #96ff00 0 16.66%,
    #f5b841 16.66% 33.33%,
    #e6007e 33.33% 50%,
    #00b4d8 50% 66.66%,
    #7a4dff 66.66% 83.33%,
    #ff6b35 83.33% 100%
  );
}
@media (max-width: 1020px) {
  .post-body .wrap > h2::before {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx::before,
  .mx-media img,
  .cat-c::before {
    transition: none;
  }
}

/* ---------- 2026-09-24 additions ---------- */
.hows-x {
  grid-template-columns: 1fr;
  margin-top: 26px;
}
.hows-x .why-c.wx {
  padding: 24px 24px 24px;
}
.hows-x .wx-n {
  font-size: 32px;
}
.loc-hubs-x {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
}
@media (max-width: 560px) {
  .loc-hubs-x {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.hx--min .hx-h1 {
  white-space: normal;
  text-wrap: balance;
}
.hx--min .hx-ln {
  display: inline;
}
.hx--min .hx-ln::before,
.hx--min .hx-ln::after {
  display: none;
}
.hx--min .post-meta {
  margin-top: 22px;
}
.hx--min .scrollcue {
  margin-top: 26px;
}
.hx-bar--thin .hx-slug {
  border-top: 0;
}
@media (max-width: 1020px) {
  .hx-bar--thin {
    display: none;
  }
  .hx--min .post-meta {
    justify-content: center;
  }
}
/* blog cards: channel color tag on the photo, bar on hover */
.blog-card {
  position: relative;
}
.blog-card__img {
  position: relative;
}
.blog-card__tag {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  font-style: normal;
  font-family: "Barlow", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #000;
  background: var(--c, var(--volt));
  padding: 5px 9px;
  border-radius: 4px;
}
.blog-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--c, var(--volt));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--snap);
}
.blog-card:hover::before {
  transform: scaleX(1);
}

.hx .hx-h1 .nw {
  display: inline;
  color: inherit;
  white-space: nowrap;
}
/* long emails and URLs in article copy wrap instead of widening the page on phones */
.post-body p,
.post-body li,
.post-body td {
  overflow-wrap: break-word;
}
/* the few very long headline lines (contract, service areas, DTG, DTF hubs) wrap on small phones instead of overflowing */
@media (max-width: 560px) {
  .hx--in .hx-h1 {
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(34px, min(calc(100cqi / (var(--n) * 0.4)), 11svh), 96px);
  }
  .hx--in .hx-ln::before,
  .hx--in .hx-ln::after {
    white-space: normal;
    width: 100%;
  }
}
/* intro headings sit in a half-width column: size them to the column so a two-line title never breaks to three */
.ix .copy > h2,
.ix .copy .sep-head h2 {
  font-size: clamp(32px, 3.5vw, 52px);
}
/* joined words in headings (hyphenated city names, the last two words of a title) */
h2 .nw,
h3 .nw,
.pull .nw {
  display: inline;
  color: inherit;
  white-space: nowrap;
}