/* ELYISIUS SEO page engine, the three components site.css does not carry.
 *
 * Loaded ONLY by the generated pages under /services. It lives in its own
 * file rather than in site.css because site.css belongs to every client in
 * the house library, and a breadcrumb shape invented for Elyisius is not a
 * change to make on all of them. Every value here is a theme token, so the
 * accent stays Horizon blue and nothing sets a colour of its own.
 *
 * NO INDEX NUMBERS anywhere in this file. Seth cut 01 to 09 off every card,
 * tile and step on 2026-08-05 and again on 2026-08-07. The accent hairline
 * is what separates these lists, because it separates without counting.
 */

/* -------------------------------------------------------------- breadcrumbs */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--head-justify, center);
  gap: 0.5rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* A breadcrumb is short text, so its natural box is about 21px tall and it
 * fails a 44px tap target on a phone. The height goes on the LINK and the
 * row's own gap absorbs it, same fix the footer links took. */
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.crumbs a:hover,
.crumbs a:focus-visible {
  color: var(--accent-on-dark);
  border-bottom-color: var(--accent-on-dark);
}

.crumbs__sep { color: var(--rule-strong); }

.crumbs [aria-current="page"] { color: var(--paper); }

/* ------------------------------------------------------------ the link mesh
 * Bands 5 and 6 of the stack. Every crossed page links its thirteen siblings
 * and its nine cousins, so a crawler landing anywhere reaches the whole set.
 * These are the only route Google has into the 140, since nothing on the
 * visible site links to them.
 *
 * TRAP, paid for on Northern Horizons: a hairline grid that works by showing
 * a coloured wrapper through 1px gaps only looks right when the cells fill
 * every row. A thirteen item list in a three wide grid leaves a lit
 * rectangle in the last row. So this uses a REAL gap and a REAL border on
 * each item, never a lit wrapper. Item count can be anything.
 */

.mesh {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.75rem;
}

.mesh li { margin: 0; }

.mesh a {
  display: block;
  height: 100%;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-btn);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--paper-soft);
  text-align: left;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.mesh a:hover,
.mesh a:focus-visible {
  border-color: var(--accent);
  background: var(--prob-bg-lit);
  color: var(--paper);
}

/* ------------------------------------------------------------- the link bar
 * Replaces the two full mesh bands that used to close every town and trade
 * page, Seth's call 2026-08-11: "those pages look stupid and in poor taste."
 * He was right about the cause. Forty three bordered chips stacked in two
 * grids is the visual signature of a doorway page, and it was the tallest
 * thing on the page.
 *
 * The LINKS stay, every one of them, because the mesh is the only route a
 * crawler has into these 570 pages, nothing on the visible site links to
 * them. What changed is the weight: plain text at 0.875rem in two labelled
 * rows instead of buttons in two grids. Costs about 1400px of page height.
 *
 * Anchor text got shorter at the same time. "AI automation in Kenai" forty
 * three times over is keyword stuffing that Google reads as the same doorway
 * signal, so a row under "AI automation in the other towns" now just says
 * "in Kenai". The title, the h1 and the crumb still carry the full phrase.
 */

.linkbar { padding-block: calc(var(--band-space) * 0.55); }

.linkbar__row { padding-block: 1.35rem; }

.linkbar__row + .linkbar__row { border-top: 1px solid var(--rule); }

.linkbar__label {
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rule-strong);
}

.linkset {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.7rem;
}

.linkset li { margin: 0; }

/* Separator is a TRAILING pseudo element on the item before it, never a
 * leading one on the item after. Measured in WebKit 2026-08-11: a leading
 * dot, absolute or not, belongs to an item that can wrap, so every wrapped
 * line opened with an orphan middot hanging in the left margin. Three of them
 * on the Soldotna page. Trailing means the dot always stays glued to the end
 * of the item it follows, so a wrap leaves it where it reads correctly.
 * Pseudo element rather than markup so no screen reader announces the dot. */
.linkset li:not(:last-child)::after {
  content: "\00b7";
  margin-inline-start: 0.7rem;
  color: var(--rule-strong);
}

.linkset a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.95;
  color: var(--paper-soft);
  text-decoration: none;
  transition: color 0.18s ease;
}

.linkset a:hover,
.linkset a:focus-visible {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------- the checks
 * The three pressures that bite a given trade. An accent hairline on the
 * leading edge carries the list without numbering it.
 */

.checks {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  padding: 0;
  max-width: var(--measure-tight);
  display: grid;
  gap: 0.75rem;
  text-align: left;
}

.checks li {
  margin: 0;
  padding: 0.9rem 0 0.9rem 1.15rem;
  border-left: 2px solid var(--accent);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--paper-soft);
}

/* The drive time. It sat under the landmark list as a bare line for one round
 * and read as a stray fragment somebody forgot to delete, because a single
 * short string after a list has nothing holding it. It belongs with the town
 * copy it qualifies, so it moved into the band head and got a rule above it
 * to say it is a footnote to the paragraph rather than a new thought. */
.area-distance {
  margin: 1.1rem auto 0;
  padding-top: 0.9rem;
  max-width: var(--measure-text);
  border-top: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--paper-soft);
}

/* ------------------------------------------------- generated page trimmings */

/* The hub and crossed pages carry an h1 where the homepage carries an h2, so
 * the display scale has to be told. Without this the h1 inherits browser
 * default sizing and lands smaller than the h2 under it. */
.hero__copy h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  line-height: 1.08;
  margin: 0.35rem 0 0;
}

/* The hero artwork band, added 2026-08-08 on Seth's call. A framed box with
 * its OWN opaque ground, never a blend: the renders carry pure black and the
 * frame turns that into a picture on the page instead of a hole in it, same
 * move as the homepage stage. The loop autoplays muted from the markup, a
 * generated page has no site.js hover clamp and needs none, it just runs. */
.hero__art {
  margin: 0 0 2.4rem;
  border: 1px solid var(--rule-on-dark);
  border-radius: var(--radius-card);
  background: #060607;
  overflow: hidden;
}

/* No crop. The 24rem cover crop cut the artwork and Seth called it out
 * 2026-08-08. The picture shows WHOLE at its own aspect, full wrap width. */
.hero__art video,
.hero__art img {
  display: block;
  width: 100%;
  height: auto;
}

.band__head h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  line-height: 1.1;
  margin: 0.35rem 0 0;
}

/* The service index cards carry an h2, because that band's own heading is the
 * page h1 and an h3 there skips a level. site.css only ever sized these as
 * h3, so the h2 is pinned back to the same drawing: 1.4rem at the sub-head
 * weight and the display tracking, measured off the rendered h3 it replaces. */
.cards .card__body h2 {
  font-family: var(--font-display);
  font-weight: var(--subhead-weight, var(--display-weight));
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: var(--display-tracking);
  margin: 0;
}

.card__body h2 a,
.card__body h3 a,
.walk h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.card__body h2 a:hover,
.card__body h2 a:focus-visible,
.card__body h3 a:hover,
.card__body h3 a:focus-visible,
.walk h3 a:hover,
.walk h3 a:focus-visible {
  color: var(--accent-on-dark);
  border-bottom-color: var(--accent-on-dark);
}

@media (max-width: 40rem) {
  .mesh { grid-template-columns: 1fr; }
  /* The 14px floor holds on a phone. This was 0.8125rem for one round and
   * measured 13px at 390, which is the same defect already logged against
   * the Northern Horizons town page. Small type is the first thing to shrink
   * on mobile and it is the last thing that should. */
  .crumbs { font-size: 0.875rem; }
}

/* ---------------------------------------------------- audits story shapes
 * Three bands, three shapes, Schoger seat 2026-08-08. Hierarchy comes from
 * weight and colour, size stays on the house scale. Space separates before
 * borders do. Values off the locked scales only. */

/* info cards carry no link, so the hover click promise is switched off */
.cards--info .card:hover { border-color: var(--rule); box-shadow: none; }
.cards--info .card__body h3 { margin-bottom: 0.5rem; }

/* the editorial walk: no boxes, space does the separating, the title is
 * the display face at body-plus size and the sentence sits quieter under it */
.walk {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--measure-text);
  display: grid;
  gap: 2.5rem;
  text-align: left;
}

.walk h3 {
  font-family: var(--font-display);
  font-weight: var(--subhead-weight, var(--display-weight));
  font-size: 1.25rem;
  letter-spacing: var(--display-tracking);
  margin: 0 0 0.4rem;
  color: var(--paper);
}

.walk p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--paper-soft); }

/* the plan panel: one framed box with its own ground, the document itself.
 * Internal hairlines divide rows, the outer frame is the only real border. */
.plan {
  max-width: 46rem;
  margin: 0 auto;
  border: 1px solid var(--rule-on-dark);
  border-radius: var(--radius-card);
  background: #060607;
  overflow: hidden;
  text-align: left;
}

.plan__row { padding: 1.5rem 1.75rem; }

.plan__row + .plan__row { border-top: 1px solid var(--rule); }

.plan__row h3 {
  font-family: var(--font-display);
  font-weight: var(--subhead-weight, var(--display-weight));
  font-size: 1.125rem;
  letter-spacing: var(--display-tracking);
  margin: 0 0 0.35rem;
  color: var(--paper);
}

.plan__row p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--paper-soft); }

/* THE SERVICE NAME, LAID OVER THE HERO ARTWORK, AT THE TOP. Seth's call
 * 2026-08-11. It sat at the BOTTOM for one round and both versions were
 * rendered side by side before he chose. Top wins for three measured
 * reasons: at the bottom the title and the h1 are two centred lines about
 * 40px apart and they collide, the reading order runs picture then label
 * then headline when it should run label then picture then headline, and
 * the top strip of the artwork is the calmer ground for white type on 12
 * of the 16 heroes because the people and the clutter sit low in frame.
 * Flipping this back means flipping BOTH the inset and the gradient
 * direction on ::after, they are a pair.
 * It spent one afternoon as a small eyebrow UNDER the picture and he asked
 * for it bigger and on the image. The scrim is a pseudo element on the
 * FIGURE, never a filter on the img: the artwork is shown uncropped at its
 * own aspect and any filter on the picture itself would tint the whole
 * frame instead of just the strip the words sit in. */
.hero__art--titled {
  position: relative;
}

.hero__art--titled::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  background: linear-gradient(to bottom,
              rgba(6, 6, 7, 0.94) 0%,
              rgba(6, 6, 7, 0.62) 42%,
              rgba(6, 6, 7, 0) 100%);
  pointer-events: none;
}

/* CENTRED, not left. site.css line 980 already carries this exact lesson from
 * 2026-08-08: `body.centred` centres every other section on these pages, so a
 * left aligned one announces itself as bolted on. The first cut of this title
 * sat bottom left and Seth caught it the same way, 2026-08-11. The words share
 * the page's centre axis with the h1 directly under them. */
.hero__art-title {
  position: absolute;
  z-index: 1;
  left: clamp(1rem, 3vw, 2.6rem);
  right: clamp(1rem, 3vw, 2.6rem);
  top: clamp(0.85rem, 2.6vw, 2rem);
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1.08;
  color: #fff;
  text-wrap: balance;
}