/* =====================================================================
   ProAttend — editorial.css  （全ページ共通のエディトリアル primitive）
   読み込み順: tokens.css → base.css → components.css → editorial.css → (home.css | page.css)
   方針: ヘッダー/フッター・セクション索引見出し・ブランドモチーフ（oリング）・
        リビールなど「どのページでも使う」部品をここに集約。
        ページ固有のレイアウトは home.css / page.css 側に置く。
   ===================================================================== */

/* ---------- コンテナ幅 ---------- */
.container--wide { max-width: 1200px; }
.container--text { max-width: 760px; }

/* ---------- ヘッダー：ロゴ ----------
   flex収縮＋img{max-width:100%}の組合せでロゴが横に潰れるのを防ぐ:
   アンカーを縮小不可・imgのmax-width制限を解除して縦横比を常に固定 */
.site-header__logo { flex-shrink: 0; }
.brand-logo { height: 34px; width: auto; max-width: none; display: block; }
@media (min-width: 1024px) { .brand-logo { height: 40px; } }

/* モバイルではヘッダー右の操作群は隠し、ドロワー内に集約（重複表示を防ぐ） */
@media (max-width: 1023px) {
  .site-header__actions { display: none; }
}

/* Member ログイン（外部遷移を小さく示す） */
.member-link {
  font-size: var(--fs-small);
  color: var(--c-slate);
  letter-spacing: var(--ls-normal);
  text-decoration: none;
}
.member-link:hover { color: var(--c-navy); }

/* ナビ：デスクトップはホバーでオレンジ下線（塗りつぶしは避け、端正に） */
@media (min-width: 1024px) {
  .site-nav a {
    color: var(--c-ink);
    letter-spacing: 0.02em;
    padding: 0.5rem 0.5rem;
    border-radius: var(--radius-sm);
    white-space: nowrap; /* 項目名の語中折返しを禁止（0731: ヘッダー2行化の見た目崩れ防止） */
    transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
  }
  .site-nav a:hover,
  .site-nav a:focus-visible {
    color: var(--c-navy);
    text-decoration: underline;
    text-decoration-color: var(--c-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  .site-nav a[aria-current="page"] { color: var(--c-navy); font-weight: var(--fw-bold); }
  /* ナビ間隔を少し詰めてpaddingと調和 */
  .site-nav ul { gap: var(--space-2); }
  /* 右端のドロップダウン（会社概要）は右揃えで開き、画面右への はみ出しを防ぐ */
  .site-subnav[aria-label="会社概要"] { left: auto; right: 0; }
}
/* ナビ10項目化（0731: お知らせ独立・プロ向け・お問い合わせのメニュー化／右ボタン群撤去）に伴う圧縮。
   1024〜1499px は段階的に詰めて1行に収める（収まらない幅はハンバーガー側=1024未満）。 */
@media (min-width: 1024px) and (max-width: 1499px) {
  .brand-logo { height: 34px; }
  .site-nav ul { gap: var(--space-1); }
  .site-nav a { padding: 0.5rem 0.3rem; letter-spacing: 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .brand-logo { height: 30px; }
  .site-nav ul { gap: 0; }
  .site-nav a { font-size: 0.8rem; padding: 0.5rem 0.22rem; }
  .has-sub > a::after { margin-left: 0.25em; }
}

/* ---------- セクション索引見出し（非対称・番号つき） ---------- */
.sec-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--space-7);
  margin-bottom: var(--space-8);
}
@media (min-width: 900px) {
  .sec-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
  .sec-head__lead { padding-bottom: 0.35em; }
}
.sec-index {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.sec-index__no {
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--c-accent);   /* 差し色をインデックスに1本 */
}
.sec-index__label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink);
}
.sec-index__rule { flex: 1; height: 1px; background: var(--color-border); }
.section--navy .sec-index__no { color: var(--c-white); }
.section--navy .sec-index__label { color: var(--c-muted-on-navy); }
.section--navy .sec-index__rule { background: var(--c-navy-line); }

.sec-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  max-width: 20ch;
}
.sec-head__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--color-muted);
  max-width: 46ch;
}
.section--navy .sec-head__lead { color: var(--c-muted-on-navy); }

/* ---------- アイコン（外部スプライト /assets/img/icons.svg を <use> 参照） ----------
   使い方: <svg class="ico" aria-hidden="true"><use href="/assets/img/icons.svg#svc-advisory"></use></svg>
   色は currentColor。装飾アイコンは必ず aria-hidden="true"。 */
.ico {
  width: 1.5em; height: 1.5em;
  display: inline-block; vertical-align: middle;
  color: var(--c-navy);
  /* 外部スプライトの <use> はルート<svg>の属性を継承しないため、
     線の体裁はここ（参照側）でCSS指定する。stroke-width は無単位=viewBox単位でスケール */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
/* ネイビー地では白のアイコンに */
.section--navy .ico,
.rail__node--hub .ico { color: var(--c-white); }
.ico--sm { width: 1.15em; height: 1.15em; }
.ico--lg { width: 2rem; height: 2rem; }
/* 円枠つき（ペーパー地＋罫線・ネイビーの線アイコン）。強み/理由/フローの頭に */
.ico-frame {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; flex: none;
  border-radius: var(--radius-pill);
  background: var(--c-navy);        /* ネイビー塗り＋白アイコンで存在感（メリハリ） */
  border: 1px solid var(--c-navy);
  color: var(--c-white);
}
.ico-frame .ico { width: 1.5rem; height: 1.5rem; color: var(--c-white); }
.ico-frame--accent { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-navy); }
.ico-frame--accent .ico { color: var(--c-navy); }
.section--navy .ico-frame { background: var(--c-white); border-color: var(--c-white); color: var(--c-navy); }
.section--navy .ico-frame .ico { color: var(--c-navy); }

/* ---------- ブランド・モチーフ：ロゴの「o」を想起させるリング ---------- */
.ring-dot {
  display: inline-block;
  width: 0.5em; height: 0.5em;
  border: 2.5px solid var(--c-accent);
  border-radius: 50%;
  vertical-align: middle;
}
/* 強調下線（差し色を“面”として）— 1画面1か所の原則で使用 */
.u-accent {
  background-image: linear-gradient(transparent 64%, var(--c-accent-soft) 64%);
  padding-inline: 0.04em;
}

/* ---------- 定義リスト（会社概要・各ページの諸元表に流用） ---------- */
.deflist { border-top: 1px solid var(--color-border); }
.deflist__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1) var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 520px) { .deflist__row { grid-template-columns: 8em 1fr; } }
.deflist__dt { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--c-ink); }
.deflist__dd { color: var(--c-ink); }

/* ---------- 共通CTA帯（ネイビー・中央寄せ）— サブページ末尾で再利用 ---------- */
.cta-band { text-align: center; }
.cta-band__title {
  font-size: var(--fs-h2);
  color: var(--c-white);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
.cta-band__sub {
  font-size: var(--fs-lead);
  color: var(--c-muted-on-navy);
  max-width: 52ch;
  margin: 0 auto var(--space-6);
}
.cta-band__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* ---------- 大型数値（実績帯）— ネイビー地・ボーダーレス。トップ／下層ページ共通
   【2026-08-28】クライアント指示「細い線・四角で囲う感じを避ける」→ 罫線の格子を廃止し、
   余白だけで区切る（枠・仕切り線は使わない） ---------- */
.stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-5);
}
@media (min-width: 720px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .stat-row { grid-template-columns: repeat(6, 1fr); } }
.stat-cell {
  padding: 0;
}
.stat-cell__num {
  display: block;
  font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat-cell__num .u { font-size: 0.46em; font-weight: var(--fw-medium); margin-left: 0.12em; color: var(--c-muted-on-navy); }
.stat-cell__lab { display: block; margin-top: var(--space-3); font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.82); line-height: var(--lh-snug); text-wrap: balance; }
.stat-cap { margin-top: var(--space-5); font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.82); }
/* 白地用バリアント（/results/ の資格内訳など） */
.stat-row--light .stat-cell__num { color: var(--c-navy); }
.stat-row--light .stat-cell__num .u { color: var(--c-slate); }
.stat-row--light .stat-cell__lab { color: var(--c-muted-text); }
/* 7項目バンド: 項目名（=シートの項目名）を主役に見せる（説明サブ文なし） */
.stat-row--7 .stat-cell__lab {
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}
.section--navy .stat-row--7 .stat-cell__lab { color: #fff; }
.stat-row--7.stat-row--light .stat-cell__lab { color: var(--c-ink); }
/* 4項目用（採用ページのミニ帯など） */
@media (min-width: 720px) { .stat-row--4 { grid-template-columns: repeat(4, 1fr); } }
/* 7項目用: タブレットは4列（4+3）、広い画面は7列で1行に収める */
@media (min-width: 640px) { .stat-row--7 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1080px) {
  .stat-row--7 { grid-template-columns: repeat(7, 1fr); }
  .stat-row--7 .stat-cell__num { font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.15rem); }
}
/* 実績帯の下部導線（注記＋「詳細はこちら」を横並び） */
.stat-foot {
  margin-top: var(--space-5);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.stat-foot .stat-cap { margin-top: 0; }
/* ネイビー地用の白ゴーストボタン */
.btn--ghost-onnavy {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1.6rem;
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
  color: var(--c-white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--ghost-onnavy:hover,
.btn--ghost-onnavy:focus-visible {
  background: var(--c-white);
  color: var(--c-navy);
  border-color: var(--c-white);
}
.btn--ghost-onnavy:focus-visible { box-shadow: var(--focus-ring-onnavy); outline: none; }

/* ---------- フッター：ロゴ（全体グレー版・logo-proattend-gray.png） ---------- */
.foot-logo {
  display: block;
  width: auto;
  height: 28px;
}
.foot-tagline { margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--c-muted-on-navy); max-width: 30ch; }
.foot-addr { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--c-muted-on-navy); line-height: var(--lh-normal); font-style: normal; }
/* SECURITY ACTION 二つ星宣言ロゴ（住所ブロック下・0721指示） */
.foot-sa { display: block; margin-top: var(--space-4); height: 64px; width: 64px; }

/* ---------- お知らせリスト（トップのインフォメーション帯／/news/ 一覧で共用） ---------- */
.news-list { border-top: 1px solid var(--color-border); }
.news-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-5);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 700px) {
  .news-item { grid-template-columns: 7.5em auto 1fr; }
}
.news-item__date {
  font-size: var(--fs-caption);
  color: var(--c-slate);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.news-item__cat {
  justify-self: start;
  font-size: var(--fs-small);
  color: var(--c-slate);
  background: var(--color-ground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.1em 0.8em;
  white-space: nowrap;
}
.news-item__title { color: var(--c-ink); line-height: var(--lh-normal); }
a.news-item__title { text-decoration: none; }
a.news-item__title:hover { color: var(--c-slate); text-decoration: underline; }
@media (max-width: 699px) {
  .news-item__title { grid-column: 1 / -1; }
}

/* ---------- スクロール・リビール（JS有効時のみ。失敗時も内容は消えない） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }

  /* stagger: コンテナは常に表示し、直下の子要素が順番にフェードアップ。
     子ごとの遅延は reveal.js が inline の transition-delay で付与する。 */
  .js .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
  .js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
}

/* ---------- 強調（スクロールで下線が左→右に伸びる）----------
   .hl を付けた語/文に、アクセントの下線を描画。
   既定（JS無効・reduced-motion）は下線を静的表示＝強調は常に効く。
   box-decoration-break: clone で折り返し時も各行の下端に下線が入る。 */
.hl {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.12em;
  padding-bottom: 0.08em;
  font-weight: var(--fw-medium);
}
@media (prefers-reduced-motion: no-preference) {
  .js .hl { background-size: 0 0.12em; transition: background-size 800ms var(--ease); }
  .js .hl.is-in { background-size: 100% 0.12em; }
}
/* ネイビー地の上ではアクセントのまま（視認可）。本文色は変えない */

/* ---------- お知らせ 個別ページ（/news/{id}/）---------- */
.news-article { }
.news-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
/* meta 内では .news-item__date / .news-item__cat を再利用 */
.news-article__body p + p { margin-top: var(--space-4); }
/* 本文にURLをそのまま表示している記事があり（旧サイトからの移行分）、
   長いURLが1語として扱われて画面幅を超えるため折り返しを許可する。
   break-word は「収まらないときだけ」折るので日本語の行分割には影響しない。 */
.news-article__body { overflow-wrap: break-word; }
.news-article__body a { overflow-wrap: anywhere; }
.news-article__note {
  color: var(--color-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}
.news-article__back {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.news-article__back a {
  color: var(--color-link);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.news-article__back a:hover,
.news-article__back a:focus-visible { color: var(--color-link-hover); text-decoration: underline; }

/* ---------- お知らせ ページネーション（/news/ 一覧）---------- */
.pager { margin-top: var(--space-7); }
.pager__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pager__link,
.pager__current,
.pager__nav,
.pager__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5em;
  height: 2.5em;
  padding: 0 var(--space-3);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.pager__link {
  color: var(--color-link);
  background: var(--color-surface);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pager__link:hover,
.pager__link:focus-visible { color: var(--c-navy); border-color: var(--c-border-strong); }
.pager__nav { color: var(--color-link); font-weight: var(--fw-medium); }
.pager__current {
  color: var(--c-white);
  background: var(--c-navy);
  border-color: var(--c-navy);
  font-weight: var(--fw-medium);
}
.pager__ellipsis { border-color: transparent; color: var(--color-muted); }
/* 無効（前へ/次へが存在しない端）：淡グレー・操作不可 */
.pager__nav.is-disabled {
  color: var(--c-disabled-text);
  background: var(--c-disabled-bg);
  border-color: var(--c-disabled-border);
  pointer-events: none;
  cursor: default;
}

/* =====================================================================
   追従お問い合わせボタン（float-cta）【2026-08-17】
   - ヒーローの種別導線から遷移した先（/clients/×3・/professionals/）で、
     スクロールしても「お問い合わせはこちら」が追従する。
   - 0817同日修正: 右下の横型ピル → 画面右端・中央やや上の縦書きタブに変更
     （クライアント指示「横ではなく縦にして、中段が上部のほうがよい」）。
   - 固定ヘッダー（--z-header:100）より下・コンテンツより上に重ねる。
   ===================================================================== */
.float-cta {
  position: fixed;
  right: 0;
  top: 40%;
  transform: translateY(-50%);
  z-index: 90; /* .site-header(100) より下を維持すること */
  writing-mode: vertical-rl;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.5em 0.85em;
  background: var(--c-accent); color: var(--c-white);
  font-size: var(--fs-small); font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  box-shadow: -4px 4px 18px rgba(22, 38, 63, 0.24);
  text-decoration: none;
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.float-cta:hover,
.float-cta:focus-visible {
  background: var(--c-navy); color: var(--c-white);
  padding-right: 1.05em;
  text-decoration: none;
}
.float-cta:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
.float-cta__arrow { display: none; } /* 縦書きタブでは矢印は表示しない */
/* 2ボタン積み【2026-09-02】/professionals/ は「入会はこちら」＋「メンバーログイン」を縦に並べて追従 */
.float-stack {
  position: fixed; right: 0; top: 40%;
  transform: translateY(-50%);
  z-index: 90; /* .site-header(100) より下を維持すること */
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}
.float-stack .float-cta { position: static; transform: none; }
.float-cta--navy { background: var(--c-navy); }
.float-cta--navy:hover,
.float-cta--navy:focus-visible { background: var(--c-accent); color: var(--c-white); }
/* 種別導線4本の追従【2026-09-18】TOPのみ。ヒーローの .hero-x__aud と同じ遷移先。
   - 4本とも縦書きタブなので、画面高に収まるようラベルは短縮形＋余白を詰める。
   - 差し色を増やさないよう地はネイビー統一・ホバーでオレンジ（.float-cta--navy の既定）。
   - 画面が低い端末では段階的に文字と余白を縮める（はみ出し防止）。 */
.float-stack--aud {
  top: 50%; /* 4本ぶんの高さがあるので上寄せ(40%)ではなく中央に置く */
  gap: 5px;
}
.float-stack--aud .float-cta {
  padding: 1.15em 0.8em;
  letter-spacing: 0.06em;
}
@media (max-height: 760px) {
  .float-stack--aud { gap: 4px; }
  .float-stack--aud .float-cta { font-size: 0.75rem; padding: 0.95em 0.72em; }
}
@media (max-height: 660px) {
  .float-stack--aud .float-cta { font-size: 0.6875rem; padding: 0.8em 0.66em; }
}
@media (prefers-reduced-motion: reduce) {
  .float-cta { transition: none; }
}
@media print { .float-cta { display: none; } }

/* =====================================================================
   種別導線ボタン（0817クライアント指示 → 0925で全ページ共通層へ移動）
   - 来訪者を4つの入口（PEファンド／事業会社／プロフェッショナルファーム／プロ人材）へ振り分ける。
   - ネイビー被膜上のガラス風ボタン。ホバーでアクセント（オレンジ）に反転。
     ＝ 写真＋ネイビー被膜の上でしか成立しない配色なので、白地に置かないこと。
   - `.hero-x__aud` ＝ TOPのヒーロー内（長いラベル「〜の方はこちら」）
     `.aud-nav`     ＝ /clients/×3・/professionals/ のページヒーロー内（短いラベル＋現在地を明示）
     ※ もとは home.css にあったが、下層4ページでも使うため 0925 に editorial.css へ移した。
   ===================================================================== */
.hero-x__aud,
.aud-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 46rem;
}
.aud-link {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8em;
  padding: 0.95em 1.3em;
  background: rgba(22, 38, 63, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.62);
  color: var(--c-white);
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  line-height: 1.4;
  border-radius: var(--radius-sm, 4px);
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* ホバーは a のみ。現在地は span で出すので反応させない */
a.aud-link:hover,
a.aud-link:focus-visible {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-white);
  text-decoration: none;
}
.aud-link:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
.aud-link__arrow { flex: none; transition: transform var(--dur) var(--ease); }
a.aud-link:hover .aud-link__arrow { transform: translateX(3px); }
/* 現在地。リンクにせず、左のアクセント帯で「このページを見ています」を示す */
.aud-link--current {
  position: relative;
  padding-left: calc(1.3em + 4px);
  background: rgba(22, 38, 63, 0.66);
  border-color: rgba(255, 255, 255, 0.30);
  color: rgba(255, 255, 255, 0.88);
  cursor: default;
}
.aud-link--current::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c-accent);
  border-radius: var(--radius-sm, 4px) 0 0 var(--radius-sm, 4px);
}
@media (max-width: 560px) {
  .hero-x__aud,
  .aud-nav { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .aud-link, .aud-link__arrow { transition: none; }
  a.aud-link:hover .aud-link__arrow { transform: none; }
}