/* style.css — tokiiro 全站样式（Aube LINE承接页 v2 設計稿）。
   :root の CSS 変数は layout/theme.liquid が settings から逐 token 出力（本文件は var() 消费のみ）。
   布局・装饰は全部 class（body 内 inline は信頼域の style（★塗り率 % / B-A の aspect-ratio 整数）と
   外壳 backdrop のみ）。
   モバイル専用（設計稿 $preview 390×844）：@media は prefers-reduced-motion のみ、断点なし。
   480px を超える幅では .tk-page が中央に立ち、両脇に body の --backdrop が覗く（設計稿と同じ挙動）。
   LINE 緑 #06C755 は R3 ブランド锁色（token 化しない・全页唯一の高饱和）。

   設計稿 v2 の変更点（v1 比）：
   ・全段が「英字 eyebrow（Cormorant Garamond italic）+ 日文見出し + 金→桃の渐变短線」の三点セット見出しを持つ。
   ・段が交替底帯（--band と素地）で刻まれ、上下 padding は全段 --space に統一。
   ・カード面は白（--card）+ 影、灰阶は 1 段（--muted）に収斂、桃色の第二強調（--accent-2）と
     金の高光（--gold-hi）を新設。
   ・影は全部 --text（設計稿 rgba(69,55,51,*)）の color-mix。 */

/* 字体栈は :root に置く（.tk-page ではなく）——.page-footer は页壳の外にあり、
   .tk-page 側に定義すると watermark 行だけ既定フォントに落ちる。
   layout の <style>:root は --font-* のみ出力、こちらは --stack-* / --rule のみ定義 → 属性が重ならず衝突しない。
   --rule = 設計稿 v2 の金→桃の渐变線（見出し下 / 主推カード上端 / 固定条上端 で共用）。 */
:root {
  --stack-heading: var(--font-heading, 'Zen Old Mincho'), 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --stack-body: var(--font-body, 'Zen Kaku Gothic New'), 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  --stack-num: var(--font-num, 'Zen Old Mincho'), 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --stack-latin: var(--font-latin, 'Cormorant Garamond'), Georgia, serif;
  --rule: linear-gradient(90deg, transparent, var(--star) 30%, var(--accent-2) 70%, transparent);
}

/* ============= 页壳（480px 居中縦長 LP 列）============= */
/* body の既定 margin（8px）を落とす —— 落とさないと页壳の上に 8px の白帯が出る（設計稿 helmet も body{margin:0}）。
   layout/theme.liquid の <body> は inline で background-color だけを持つので margin は此処で決める。 */
body { margin: 0; }
.tk-page {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--page);
  color: var(--text);
  font-family: var(--stack-body);
  font-weight: var(--font-body-weight, 400);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.85;
  box-shadow: 0 0 70px color-mix(in srgb, var(--text) 14%, transparent);
}
.tk-page img { display: block; max-width: 100%; }
.tk-page a { color: var(--accent); text-decoration: none; }
.tk-page a:hover { color: var(--accent-deep); }
/* UA 既定 margin を潰すだけのリセット。:where() で特異度 0 に落とすのが必須 ——
   素の `.tk-page p{margin:0}`（0,1,1）は後続の単一クラス規則（0,1,0）より強く、
   .tk-rating-source / .tk-voice-body / .tk-heading 等の margin-top を全部黙って無効化する
   （設計稿の縦リズムが丸ごと消える。実機で踏んだ）。 */
:where(.tk-page) :where(p, dl, dd, dt, figure, blockquote, h1, h2, h3) { margin: 0; }

/* 段の上下余白は全段 --space に統一（設計稿 v2 の padding:64px 24px）。
   交替底帯は section 側が .tk-section--band を付ける（index.liquid の注釈に割当表）。 */
.tk-section { padding: var(--space) var(--gutter); }
.tk-section--band { background: var(--band); }

/* 節見出し 三点セット（設計稿 v2）。R13 骨架要素。 */
.tk-heading-wrap { margin-bottom: 32px; text-align: center; }
/* eyebrow / 見出しは line-height を持たない = 页壳の 1.85 を継ぐ（設計稿と同じ行送り）。
   独自に詰めると eyebrow→見出し→渐变線 の間隔が設計稿より狭くなる。 */
.tk-heading-eyebrow {
  display: block;
  font-family: var(--stack-latin);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.28em;
  color: var(--star);
}
.tk-heading {
  margin-top: 4px;
  font-family: var(--stack-heading);
  font-weight: var(--font-heading-weight, 600);
  font-size: 21px;
  letter-spacing: 0.14em;
  color: var(--text);
}
.tk-heading-rule {
  display: block;
  width: 56px;
  height: 2px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: var(--rule);
}

/* 段末の注記（効果には個人差があります 等）。 */
.tk-note { font-size: 11px; line-height: 1.7; color: var(--muted); }

/* ============= 01 HERO ============= */
/* svh は iOS のツールバー伸縮でも高さが跳ねない単位。非対応環境は前行の vh に落ちる。 */
.tk-hero {
  position: relative;
  height: 88vh;
  height: 88svh;
  min-height: 600px;
  max-height: 760px;
  overflow: hidden;
  background: var(--deep);
}
.tk-hero-img {
  position: absolute;
  /* top/left（inset:0 ではなく）で位置指定：inset:0 + width/height:100% は絶対配置 <img> を過剰制約し、
     iOS Safari が object-fit を無視して fill 化する（実機：横素材が縦枠に引き伸ばされ顔が歪む）。
     .tk-ba-half img と同じ top/left パターンに揃えて回避。 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 49% 30%;
}
/* 設計稿の rgba(58,47,51,.xx) 段階を --deep の color-mix に置換 —— 店主が --deep を変えても遮罩が破綻しない。
   color-mix 非対応の旧環境は前行の単純グラデにフォールバック。
   設計稿 v2 は上端を大幅に明るくし（.10/.06）、代わりに下端を締めた（.62/.88）。v1 の heroDim 相当の
   一括 opacity は v2 で廃止（設計稿側で prop ごと消えた）ので此処でも掛けない。 */
.tk-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--deep) 100%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--deep) 10%, transparent) 0%,
    color-mix(in srgb, var(--deep) 6%, transparent) 34%,
    color-mix(in srgb, var(--deep) 62%, transparent) 70%,
    color-mix(in srgb, var(--deep) 88%, transparent) 100%
  );
}
/* 設計稿 v2：ロゴ・大字・副行・pill を全部下端に寄せる一段組（v1 の space-between 二段組から変更）。 */
.tk-hero-inner {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  padding: 0 var(--gutter) calc(46px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
}
.tk-hero-copy { display: flex; flex-direction: column; align-items: center; }
/* ロゴ（設計稿 v2：width 150px の透過 PNG + drop-shadow）。主題包同梱 = per-store 定制の例外（intro.liquid 注釈参照）。 */
.tk-hero-logo { width: 150px; margin-bottom: 14px; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.25)); }
.tk-hero-logo img { width: 100%; height: auto; }
.tk-hero-title {
  font-family: var(--stack-heading);
  font-weight: var(--font-heading-weight, 600);
  font-size: 27px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--cream);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  text-wrap: pretty;
}
.tk-hero-sub {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--cream) 94%, transparent);
}
.tk-hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.tk-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--cream) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cream) 55%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--cream);
}

/* ============= 02 お客様の声 ============= */
.tk-trust { text-align: center; }
/* ★ は二層（empty の上に fill を width% でクリップ）。R4：金色は字面の星だけ、色は --star token に集約。 */
.tk-stars { position: relative; display: inline-block; white-space: nowrap; line-height: 1; }
.tk-stars--lg { font-size: 16px; letter-spacing: 0.12em; }
/* 口コミカードの ★ 行。設計稿は line-height 1.85 の <div>（= 13px の字面 + 上下 5.5px の行間）だが、
   ★ は二層重ね（fill を top:0 で被せる）なので line-height:1 が必須 —— 行間分を持てない。
   その差を margin で足して設計稿と同じ視覚間隔にする（上 8px+行間 / 下は .tk-voice-body 側で 6px+行間）。
   width:max-content = 二層の幅を字面に合わせる（block 幅だと fill の width% がカード幅基準になり塗り率が壊れる）。 */
.tk-stars--sm {
  display: block;
  width: max-content;
  margin-top: calc(8px + (1.85 - 1) * 13px / 2);
  font-size: 13px;
  letter-spacing: 0.12em;
}
.tk-stars-empty { color: color-mix(in srgb, var(--star) 22%, transparent); }
.tk-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--star); }
/* 設計稿 v2：大数字と ★ を baseline 揃えで横並び（v1 は ★ の下に数字の縦積み）。 */
.tk-rating-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}
/* R14-2 譲り：本来「評分 = 本文ゴシック + tnum」だが 52px の大数字が設計稿の視覚支点なので明朝を使う
   （white-gold .wg-rating-num の先例）。tnum は維持。電話番号（access 段）は本文ゴシック + tnum のまま。 */
.tk-rating-num {
  font-family: var(--stack-num);
  font-weight: var(--font-num-weight, 600);
  font-variant-numeric: tabular-nums;
  font-size: 52px;
  line-height: 1;
  color: var(--accent);
}
/* 出典 +（件数）の一行（設計稿 v2 は「ホットペッパービューティー総合評価（82件）」の単一行）。 */
.tk-rating-source {
  margin-top: 6px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tk-page .tk-rating-source a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.tk-page .tk-rating-source a:hover { color: var(--text-2); }
.tk-rating-note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--text-2);
}
.tk-voices { margin-top: 26px; text-align: left; }
/* 評価ブロックが無い店（google_review 非公開）では見出しの 32px だけで足りる。 */
.tk-heading-wrap + .tk-voices { margin-top: 0; }
.tk-voice {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 20px 20px 18px;
  box-shadow: 0 8px 26px color-mix(in srgb, var(--text) 7%, transparent);
}
.tk-voice + .tk-voice { margin-top: 14px; }
.tk-voice-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 設計稿 v2：author（「20代女性・会社員」等の属性記述）を pill に入れて頭行の左に置く（v1 の頭像圓は廃止）。 */
.tk-voice-name {
  min-width: 0;
  overflow-wrap: anywhere;
  background: var(--band);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--accent);
}
/* author 空で日付だけの口コミでも日付が右端に残るよう margin-left:auto（space-between 頼りにしない）。 */
.tk-voice-date { flex: none; margin-left: auto; font-size: 10.5px; line-height: 1.4; color: var(--muted); }
/* #21：口コミ 1 件ごとの任意タグ（v.tag、空なら非描画）。設計稿 v2 に対応位は無いが別語義の typed 字段
   なので author pill とは別行に残す。明地カード上に立つ淡アクセント pill。 */
.tk-voice-tag {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  margin-top: 10px;
  background: color-mix(in srgb, var(--accent) 10%, var(--page));
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--accent-deep);
}
/* ★ 行が持てない下側の行間（上の .tk-stars--sm 注釈参照）を足して設計稿と同じ 6px+行間 にする。 */
.tk-voice-body {
  margin-top: calc(6px + (1.85 - 1) * 13px / 2);
  font-size: 13px;
  line-height: 2;
  color: var(--text-2);
  text-wrap: pretty;
}
.tk-voice-note { margin-top: 20px; text-align: center; }

/* ============= 03 施術事例（縦積み・双図 / 合成スプライト分割）============= */
/* #19：Before/After 冒頭リード（trust.before_after_lead）。見出しの下・リストの上、中央寄せ、pre-line で改行保持。
   段内の縦間隔は「見出し帯が下 32px を持ち、リードは自分の下 24px だけを持つ」で通す（上 margin は持たない）。 */
.tk-ba-lead {
  margin-bottom: 24px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-2);
  text-align: center;
  white-space: pre-line;
}
/* 設計稿 v2：横スワイプ卡带 → 縦積み。scroll-snap / 負 margin / スクロールバー隠しは全部不要になった。
   図ブロックの高さは「並べ方ごとに固定」= 同じ並べ方の組は必ず同じ高さ（R15-2/-3）。
   組ごとに素材比から高さを導くと段が組ごとにガタつく（第 1 組 518 / 第 2 組 622 を実機で踏んだ）。
   幅は段幅で確定しているので高さを固定し、素材比とのズレは cover が吸収する。
   値の根拠 = 設計稿 v2 の格子比を段幅 432px（.tk-page 480 − gutter 24×2）に当てたもの：
     横並び 6/10 の 2 格 → (432-8)/2 / 0.6 ≒ 353 ／ 縦積み 3/2 の全幅図 2 枚 + gap 8 → 432/1.5×2+8 ≒ 584。
   別の値に振る時は script/ops/ba_height.rb（保留率＝箱比 vs 素材比のモデル）で最悪保留率を確かめてから。 */
.tk-bas {
  --ba-h: 353px;
  --ba-h-v: 584px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.tk-ba--horizontal .tk-ba-split,
.tk-ba--dual.tk-ba--horizontal .tk-ba-pair { height: var(--ba-h); }
.tk-ba--vertical .tk-ba-split,
.tk-ba--dual.tk-ba--vertical .tk-ba-pair { height: var(--ba-h-v); }
.tk-ba { display: flex; flex-direction: column; gap: 12px; }
/* 組見出し（設計稿 v2：明朝 15px + 行頭に 16×2px の金→桃の短線）。class 名は #159 の回帰テストが参照。 */
.tk-ba-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--stack-heading);
  font-weight: var(--font-heading-weight, 600);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--text);
}
.tk-ba-label::before {
  content: "";
  flex: none;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--star), var(--accent-2));
}
.tk-ba-split {
  position: relative;
  display: flex;
  gap: 3px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--img-bg);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--text) 10%, transparent);
}
.tk-ba--horizontal .tk-ba-split { flex-direction: row; }
.tk-ba--vertical .tk-ba-split { flex-direction: column; }
/* 半格は親（.tk-ba-split）の固定高さを主軸方向に等分する：横並びなら幅を、縦積みなら高さを flex:1 1 0 で
   2 等分し、交差軸は align-items:stretch が埋める。両軸が確定するので aspect-ratio は要らない
   （＝ liquid 側の inline aspect-ratio も不要になり撤去した）。素材比とのズレは cover が吸収。
   min-width/min-height:0 は flex アイテム既定の min-size:auto を解除する為（無いと縮まず溢れる）。
   灯箱の trigger になった＝タグが <a> なので display:block を明示（<a> の既定 inline では
   overflow:hidden も効かない）。色/下線は継承させない。 */
.tk-ba-half {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
/* max-width:none は .tk-page img の max-width:100% を解除する為（解除しないと width:200% が 100% に潰れ、
   スプライトの半分取りが成立しない）。 */
.tk-ba-half img { position: absolute; top: 0; left: 0; display: block; max-width: none; object-fit: cover; }
.tk-ba--horizontal .tk-ba-half img { width: 200%; height: 100%; }
.tk-ba--vertical .tk-ba-half img { width: 100%; height: 200%; }
.tk-ba--horizontal .tk-ba-half--after img { left: -100%; }
.tk-ba--vertical .tk-ba-half--after img { top: -100%; }
/* 設計稿 v2：施術前 = 深色半透明 / 施術後 = アクセント実心 の異色 pill（v1 は同色の角丸 4px）。 */
.tk-ba-chip {
  position: absolute;
  top: 9px;
  left: 9px;
  background: color-mix(in srgb, var(--deep) 82%, transparent);
  color: var(--cream);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.tk-ba-chip--after { background: var(--accent); }
/* 双図（izzjp#159）：合成図のスプライト半切と違い、2 枚は各自の原図。格子の立て方は半格と同じ
   （親の固定高さを主軸で 2 等分・交差軸は stretch）。原比のままだと組ごとに高さが変わり段がガタつくので、
   2 枚とも格子に cover で収める —— 対比写真は被写体が中央に立つ構図なので中央基準の裁切は安全側。 */
.tk-ba-pair { position: relative; display: flex; gap: 8px; }
.tk-ba--dual.tk-ba--vertical .tk-ba-pair { flex-direction: column; }
/* 灯箱の trigger＝<a>。色/下線は継承させない（display:block は元から）。 */
.tk-ba-slot {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--img-bg);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--text) 10%, transparent);
}
.tk-ba-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 矢印は図（対）コンテナの中央に絶対配置。方向は structure で切替（liquid 側に文字は持たない）。
   設計稿 v2 で合成組にも付いた（v1 は双図のみ）ので .tk-ba-split / .tk-ba-pair の両方に効かせる。 */
.tk-ba-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--card);
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--text) 22%, transparent);
}
.tk-ba-arrow::before { content: "→"; }
.tk-ba--vertical .tk-ba-arrow::before { content: "↓"; }
.tk-ba-note { margin-top: 20px; text-align: center; white-space: pre-line; }

/* ---- 展示タイプ：横スワイプ卡带（settings.ba_slider ON、v1 のレイアウトに戻す）----
   既定（縦積み）の後に置く事が前提：.tk-bas--slider と .tk-bas は同特異度なので後勝ちで上書きする。
   組の中身は一切分岐させない（liquid 側の差は修飾クラス 1 個だけ）。
   strip は段の左右 padding を負 margin で突き破り、端まで流す（次カードの覗きを作る）。 */
.tk-bas--slider {
  /* strip では横並び / 縦積みの区別なく全カード同じ高さにする（横に流れるので下端の不揃いが直に目に付く）。
     高さの受け口は縦積みと同じ 2 変数 —— 値を揃えるだけで済み、格子の立て方は 1 セットのまま。 */
  --ba-h: 324px;
  --ba-h-v: 324px;
  flex-direction: row;
  gap: 12px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  text-align: left;
}
.tk-bas--slider::-webkit-scrollbar { display: none; }
/* カード幅は「次カードの覗き」を作る 92% に固定（strip なので幅が枚ごとに違っても良いが、
   高さが揃った以上は幅も揃えた方が卡带として整う）。格子の立て方は縦積みと同一 = 追加の上書きは要らない。 */
.tk-bas--slider .tk-ba { flex: 0 0 auto; width: 92%; scroll-snap-align: start; }

/* ============= 04 料金 ============= */
/* #133/#29：価格分組（service.groups[]）。組は帯地の上に白紙のまま積む —— 区切りは余白だけで、
   罫線や枠は足さない（主推カードの白面が段内で唯一の面である事が設計稿 v2 の骨格）。 */
.tk-menu-group + .tk-menu-group { margin-top: 46px; }
/* 組見出し（grp.heading）。段見出し（.tk-heading 21px + eyebrow + 渐变線）より一段軽い明朝の小見出し。
   pre-line：編集器は 2 行入力を許し、後端は \n を字面のまま渡す（br 化しない）。 */
.tk-menu-group-heading {
  margin-bottom: 18px;
  font-family: var(--stack-heading);
  font-weight: var(--font-heading-weight, 600);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.12em;
  color: var(--text);
  text-align: center;
  white-space: pre-line;
}
/* #19：MENU 冒頭リード（grp.lead）。組見出しの下・カードの上、中央寄せ、pre-line で改行保持。 */
.tk-menu-lead {
  margin-bottom: 24px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-2);
  text-align: center;
  white-space: pre-line;
}
/* 設計稿 v2 の主推カード：白地 + 1px 枠 + 上端 2px 渐变条 + 骑缝バッジ + 中央寄せ。
   上の間隔は見出し帯（下 32px）/ リード（下 24px）が持つ = 骑缝バッジ（top:-13px）の逃げも兼ねる。 */
.tk-menu-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px var(--pad) 26px;
  text-align: center;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--text) 9%, transparent);
}
.tk-menu-card-rule {
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 2px;
  border-radius: 2px;
  background: var(--rule);
}
.tk-menu-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--accent);
  color: var(--cream);
  border-radius: 999px;
  padding: 5px 18px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
}
/* #92：条目図（m.image）。主推カードでは品名の上の写真。16:9 は「価格を主役に保ちつつ品の雰囲気は伝わる」
   比率（画廊の先頭 4:3 より浅く取る = カードが縦に伸びて価格が折り畳みの下へ落ちるのを避ける）。
   高さは aspect-ratio で先に確定 → 画像到着時の跳ね（CLS）が出ない。--img-bg は読込中の下地。 */
.tk-menu-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
  border-radius: var(--radius-xs);
  object-fit: cover;
  background: var(--img-bg);
}
/* pre-line：品名（m.label）は後端で複数行入力（2 行枠）になった → 店主が打った改行をそのまま保つ。 */
.tk-menu-name {
  font-family: var(--stack-heading);
  font-weight: var(--font-heading-weight, 600);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  white-space: pre-line;
}
/* R14-1：価格は明朝 + tnum。price は自由文本（"応相談" も合法）なので全体を一つの塊で出す。 */
.tk-menu-price {
  margin-top: 10px;
  font-family: var(--stack-num);
  font-weight: var(--font-num-weight, 600);
  font-variant-numeric: tabular-nums;
  font-size: 44px;
  line-height: 1.2;
  color: var(--accent);
}
/* 組の注記（grp.note）。#29 で主推カード内から組の最下部へ移した（note は組全体の注記であって
   首条目の付属物ではない）為、カードから継いでいた中央寄せを自前で持つ。 */
.tk-menu-note {
  margin-top: 14px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--muted);
  text-wrap: pretty;
  white-space: pre-line;
}
/* R5：項目名 + 点線引導 + 右寄せ金額。設計稿 v2 は行ごと下罫線（v1 は flex gap のみ）。 */
.tk-menu-list { margin-top: 34px; }
/* 行は「左サムネ（有る時だけ）+ 本体」の二欄。サムネ無しの行は本体が単独の flex 子として全幅を取る
   ＝ v1（block）と同じ見え方に落ちる。align-items:flex-start でサムネの縦位置を行頭に合わせる。 */
.tk-menu-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-2) 18%, transparent);
}
/* min-width:0 が無いと flex 子の既定 min-width:auto で行が縮まず、長い品名が金額を枠外へ押し出す。 */
.tk-menu-row-body { flex: 1 1 auto; min-width: 0; }
/* #92：価格行の条目図。品名・価格を見分ける為の 60px 正方サムネ（鑑賞用ではないので拡大には繋がない）。 */
.tk-menu-row-thumb {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-xs);
  object-fit: cover;
  background: var(--img-bg);
}
/* 「品名 … 金額」は必ず 1 行に収める（nowrap）。長い品名は自分の中で折返す = 金額が次行に落ちない。
   flex-wrap:wrap では折返し判定が「品名の max-content」で行われる為、長い品名で金額が単独行に落ちて
   点線引導が宙に浮く（実機で踏んだ）。詳細説明（#24）は此の行の外の兄弟なので nowrap の影響を受けない。 */
.tk-menu-row-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 10px;
}
/* pre-line：品名 / 所要時間とも後端が複数行入力（2 行枠）になった → 打たれた改行を保つ。
   行内は nowrap だが折返しは品名の内側で起きる（＝金額は先頭行の baseline に残る）ので
   点線引導・金額の位置には影響しない。 */
.tk-menu-row-name { min-width: 0; font-size: 13.5px; line-height: 1.6; letter-spacing: 0.02em; white-space: pre-line; }
/* 設計稿 v2：所要時間（m.description）は品名直下の <small> 副行。 */
.tk-menu-row-sub {
  display: block;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--muted);
  white-space: pre-line;
}
.tk-menu-leader {
  flex: 1 0 16px;
  border-bottom: 1px dotted var(--leader);
  transform: translateY(-4px);
}
.tk-menu-row-price {
  flex: none;
  font-family: var(--stack-num);
  font-weight: var(--font-num-weight, 600);
  font-variant-numeric: tabular-nums;
  font-size: 15.5px;
  white-space: nowrap;
}
/* #19：定価（划線原価）。現価の隣に小さく muted。price blank 時は現価ごと出ない為、原価も出ない。 */
.tk-menu-original {
  font-family: var(--stack-num);
  font-weight: var(--font-num-weight, 600);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-decoration: line-through;
  white-space: nowrap;
}
.tk-menu-price .tk-menu-original { margin-right: 8px; font-size: 24px; }
.tk-menu-row .tk-menu-original { font-size: 12.5px; }
/* 設計稿 v2：価格 0 の条目は「¥0 + 桃色 pill」。判定は liquid 側（通貨記号を落とした残りが "0"）。
   pill 文言は copy slot なので空にすれば pill だけ消え、価格の色替えは残る。
   明朝の価格に対して pill だけゴシック（設計稿どおり = 記号ではなく注記の質感）。 */
.tk-menu-free {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--cream);
  font-family: var(--stack-body);
  font-weight: var(--font-body-weight, 400);
  font-size: 10px;
  letter-spacing: 0.1em;
  vertical-align: 2px;
  white-space: nowrap;
}
.tk-menu-row-price--free { color: var(--accent); }
/* 主推カードの価格は 44px なので pill も比例で持ち上げる（行の 15.5px 用の値だと点にしか見えない）。 */
.tk-menu-price .tk-menu-free { margin-left: 12px; padding: 4px 12px; font-size: 13px; vertical-align: 11px; }
/* #19：品目の説明（内容・所要時間）。主推カードでは設計稿 v2 の所要時間行として品名の直下。pre-line で改行保持。 */
.tk-menu-desc {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: pre-line;
}
/* #24：品目の詳細説明（卖点長文・多行）。description（短文）とは別語義・別位置（カード/行の最下部）。
   字号は品名より小さく、pre-line で改行保持。card は block なので margin-top、row は flex gap 任せで 0。 */
.tk-menu-detail {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-2);
  white-space: pre-line;
}
.tk-menu-row .tk-menu-detail { margin-top: 6px; }

/* ============= 05 セラピスト ============= */
.tk-owner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tk-owner-avatar-wrap { display: flex; justify-content: center; }
/* 設計稿 v2：112px + 二重光環（内 4px --page / 外 1.5px --star）。 */
.tk-owner-avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--img-bg);
  box-shadow: 0 0 0 4px var(--page), 0 0 0 5.5px var(--star);
}
.tk-owner-avatar--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--avatar-bg);
  color: var(--cream);
  font-family: var(--stack-heading);
  font-weight: var(--font-heading-weight, 600);
  font-size: 40px;
  line-height: 1;
}
.tk-owner-name {
  margin-top: 16px;
  font-family: var(--stack-heading);
  font-weight: var(--font-heading-weight, 600);
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: 0.14em;
}
/* 設計稿 v2：ローマ字は括弧無し・Cormorant Garamond。 */
.tk-owner-name-en {
  margin-left: 8px;
  font-family: var(--stack-latin);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.tk-owner-title { margin-top: 4px; font-size: 11.5px; line-height: 1.6; letter-spacing: 0.22em; color: var(--accent); }
/* 設計稿 v2 も紹介文だけ左寄せ（intro.detail は 3 段の長文で中央寄せは可読性が破綻する）。
   text-wrap: pretty は此処だけ外す —— 設計稿は宣言しているが、Safari の pretty は段落全体を
   最適化する実装で「最終行が 1 文字」を避ける為に全行を短くする。実機 iOS で右側に 80px 級の
   空きが出て「中央寄せし忘れ」に見えた。Chrome の pretty は末尾数行しか見ないので此の差は出ない。
   外すと両エンジンとも行が右端まで詰まる（代わりに最終行が短くなるが、和文では孤立行の害は小さい）。 */
.tk-owner-body {
  align-self: stretch;
  margin-top: 16px;
  font-size: 13px;
  line-height: 2.1;
  color: var(--text-2);
  text-align: left;
}

/* ============= 06 施術と空間 ============= */
/* 設計稿 v2：1 枚目が 4:3 の通栏 + 以降 2 列正方（g.layout / g.columns は消費しない —— snippet 注釈参照）。
   灯箱の <div> は position:fixed で grid セルを食わないので、:first-of-type は必ず最初のサムネ <a> に当たる。 */
.tk-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tk-gallery-item {
  display: block;
  cursor: zoom-in;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--img-bg);
}
.tk-gallery-item:first-of-type { grid-column: 1 / -1; }
.tk-gallery-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.tk-gallery-item:first-of-type .tk-gallery-thumb { aspect-ratio: 4 / 3; }
/* 灯箱（类名は app.js が硬編码——改名禁止）。position:fixed でグリッド流から外れる為 grid セルを食わない。
   祖先に filter / transform / perspective を置くと包含块が生まれて此の fixed が壊れる ——
   .tk-gallery-grid に装飾 filter を置かない理由（設計稿 v1 の sepia は v2 で廃止）。 */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox[hidden] { display: none; }
.gallery-lb-backdrop { position: absolute; inset: 0; background-color: color-mix(in srgb, var(--deep) 88%, transparent); }
.gallery-lb-img {
  position: relative;
  width: min(92vw, 680px);
  height: auto;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius-xs);
}
.gallery-lb-close, .gallery-lb-prev, .gallery-lb-next {
  position: absolute;
  z-index: 1;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--cream);
  background-color: color-mix(in srgb, var(--cream) 22%, transparent);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s;
}
.gallery-lb-close:hover, .gallery-lb-prev:hover, .gallery-lb-next:hover { background-color: color-mix(in srgb, var(--cream) 40%, transparent); }
.gallery-lb-close { top: 0.75rem; right: 1rem; }
.gallery-lb-prev { top: 50%; left: 0.75rem; transform: translateY(-50%); }
.gallery-lb-next { top: 50%; right: 0.75rem; transform: translateY(-50%); }
.gallery-lightbox--single .gallery-lb-prev,
.gallery-lightbox--single .gallery-lb-next { display: none; }
.tk-gallery-caption {
  margin-top: 14px;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--muted);
}

/* ============= 07 よくあるご質問（native details 手风琴）============= */
.tk-faq-list { display: flex; flex-direction: column; gap: 10px; }
.tk-faq-item {
  background: var(--card);
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--text) 6%, transparent);
}
.tk-faq-q {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 17px 18px;
  cursor: pointer;
  list-style: none;
}
.tk-faq-q::-webkit-details-marker { display: none; }
/* 設計稿 v2：行頭に Cormorant Garamond italic の「Q」。 */
.tk-faq-q-mark {
  flex: none;
  font-family: var(--stack-latin);
  font-style: italic;
  font-size: 17px;
  line-height: 1;
  color: var(--accent-2);
}
.tk-faq-q-text { flex: 1; font-size: 13.5px; font-weight: 500; line-height: 1.6; }
/* R9：開閉インジケータ = 文字「+」（設計稿 v2。開くと 45° 回して × に見せる。v1 は CSS 角箭头）。 */
.tk-faq-chev {
  flex: none;
  font-size: 18px;
  line-height: 1;
  color: var(--accent-2);
  transition: transform 0.25s ease;
}
.tk-faq-chev::before { content: "+"; }
details[open] > .tk-faq-q .tk-faq-chev { transform: rotate(45deg); }
/* 答案は Q の字面に合わせて左 44px 字下げ（設計稿 v2）。 */
.tk-faq-a { padding: 0 18px 18px 44px; font-size: 12.5px; line-height: 2; color: var(--text-2); }

/* ============= 08 営業情報（R8 情報の並び）============= */
/* 設計稿 v2：カード枠を外し、行ごと下罫線の定義リストに。ラベル列 78px。 */
.tk-access-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-2) 18%, transparent);
  font-size: 13px;
  line-height: 1.9;
}
.tk-access-label {
  padding-top: 2px;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.tk-access-value { min-width: 0; }
/* R14-2 遵守：電話番号は本文ゴシック + tnum。 */
.tk-access-tel { font-family: var(--stack-body); font-variant-numeric: tabular-nums; }
/* 設計稿 v2 新設：Googleマップ 外链ボタン（線枠 pill）。R1 の「按钮形態は予約入口だけ」に触れないよう
   実心にせず線枠のまま（予約 CTA とは明確に別階層）。 */
.tk-access-map {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  margin-top: 24px;
  border: 1.5px solid var(--accent-2);
  border-radius: 999px;
  padding: 13px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  transition: background-color 0.15s ease;
}
.tk-access-map:hover { background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
.tk-access-map-mark { flex: none; }

/* ============= ご予約の流れ（歩数カード。序数は装飾 = 明朝 + accent）============= */
.tk-flow-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tk-flow-item {
  display: flex;
  gap: 14px;
  background: var(--card);
  border-radius: var(--radius-xs);
  padding: 16px 18px;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--text) 6%, transparent);
}
.tk-flow-num {
  flex: none;
  padding-top: 1px;
  font-family: var(--stack-num);
  font-weight: var(--font-num-weight, 600);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--accent);
}
/* 標題と説明の間隔は gap で取る（margin ではなく）——.tk-page p の margin:0 は class 単体より特異度が高く、
   description 無しの歩で余白が残らないのも gap の方が素直。 */
.tk-flow-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tk-flow-title { font-size: 13.5px; line-height: 1.6; color: var(--text); }
.tk-flow-desc { font-size: 12.5px; line-height: 1.9; color: var(--text-2); white-space: pre-line; }

/* ============= 09 CTA + 10 Footer ============= */
.tk-cta {
  position: relative;
  overflow: hidden;
  background: var(--deep);
}
.tk-cta-img {
  position: absolute;
  /* top/left で位置指定（inset:0 は避ける）：.tk-hero-img と同理由 = iOS Safari の object-fit 無視回避。 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
/* 設計稿 v2：3 段グラデ → 単色平遮罩（写真は雰囲気だけ残す）。 */
.tk-cta-overlay {
  position: absolute;
  inset: 0;
  background: var(--deep);
  background: color-mix(in srgb, var(--deep) 90%, transparent);
}
.tk-cta-inner {
  position: relative;
  padding: 80px var(--gutter) calc(88px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* 設計稿 v2 は 3 行に手で折る見出し。copy slot は平文なので改行は店主の入力（と locale 既定）が持ち、
   描画側は white-space: pre-line で活かす（<br> は平台が転義するので使えない）。
   改行を入れない店では pre-line が無害に効くだけ（自動折返しは維持）。 */
.tk-cta-title {
  font-family: var(--stack-heading);
  font-weight: var(--font-heading-weight, 600);
  font-size: 19.5px;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--cream);
  white-space: pre-line;
  /* text-wrap: pretty は付けない —— pre-line で改行位置は店主が持つのに、
     Safari の pretty は段落全体を再バランスして「作者の 3 行」を 5 行に割り直す（実機 iOS で発生。
     Chrome の pretty は末尾数行しか見ないので同じ CSS でも 3 行のまま = 端末で別物になる）。
     pre-line を使う全ての規則で同じ理由により pretty を外してある（lead / note / detail / 品名）。 */
}
/* 設計稿 v2 の特典チケット：破線枠 + 左右の丸い切込み（::before / ::after が深色で枠線を食う）。
   中身は convert.title（主行）と convert.lead（副行）。店舗の自由文本なので満字数でも溢れないよう
   overflow-wrap: anywhere、lead は複数行 → white-space: pre-line。 */
.tk-cta-ticket {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  margin-top: 26px;
  border: 1.5px dashed color-mix(in srgb, var(--cream) 45%, transparent);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.tk-cta-ticket::before,
.tk-cta-ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--deep);
  transform: translateY(-50%);
}
.tk-cta-ticket::before { left: -9px; }
.tk-cta-ticket::after { right: -9px; }
.tk-cta-ticket-eyebrow {
  font-family: var(--stack-latin);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.26em;
  color: var(--gold-hi);
}
.tk-cta-ticket-title {
  margin-top: 2px;
  font-family: var(--stack-heading);
  font-weight: var(--font-heading-weight, 600);
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--cream);
  overflow-wrap: anywhere;
}
.tk-cta-ticket-lead {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--cream) 80%, transparent);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
/* R1：按钮形態は予約入口だけ。R11：描画位は本段（pill・緑光影）と固定条（pill・影小さめ）の二箇所。 */
.tk-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  padding: 16px 22px;
  margin-top: 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
/* LINE アイコン（kind == 'line' 分支のみ）。flex:none = 文言が長くても潰れない。 */
.tk-cta-icon { flex: none; display: block; }
.tk-cta-btn:active { transform: scale(0.97); }
.tk-page .tk-cta-btn--line { background: #06C755; color: #FFFFFF; box-shadow: 0 10px 24px rgba(6, 199, 85, 0.32); }
.tk-page .tk-cta-btn--line:hover { background: #05B34D; color: #FFFFFF; }
.tk-page .tk-cta-btn--booking { background: var(--convert-bg); color: var(--convert-fg); }
.tk-page .tk-cta-btn--booking:hover { opacity: 0.92; color: var(--convert-fg); }
.tk-cta-note {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--cream) 65%, transparent);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
/* 10 Footer（設計稿 v2 で CTA から独立した帯）。CTA 段の内側だが position:relative で写真の上に平地を敷く。
   watermark（.page-footer、页壳の外）も同じ --footer-bg なので、有料/無料どちらでも 1 枚の帯に見える。 */
.tk-cta-foot {
  position: relative;
  background: var(--footer-bg);
  padding: 34px var(--gutter);
  text-align: center;
}
.tk-cta-foot-text {
  font-family: var(--stack-heading);
  font-weight: var(--font-heading-weight, 600);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.24em;
  color: color-mix(in srgb, var(--cream) 60%, transparent);
}

/* ============= その他（R2 安静行 + 逃生通道）============= */
.tk-links { display: flex; flex-direction: column; gap: 10px; }
.tk-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card);
  border-radius: var(--radius-xs);
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.6;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--text) 6%, transparent);
}
.tk-page .tk-link { color: var(--text); }
.tk-page .tk-link:hover { color: var(--accent-deep); }
.tk-link-label { min-width: 0; }
.tk-link-mark { flex: none; display: flex; color: var(--muted); }
.tk-link-mark svg { width: 16px; height: 16px; }

/* ============= watermark（show_watermark 時のみ、.tk-page の外）============= */
/* Footer 帯（.tk-cta-foot）を継いで一枚に見せる（.tk-page の外なので背景を自分で持つ必要がある）。 */
.page-footer {
  box-sizing: border-box;
  max-width: 480px;
  margin: 0 auto;
  padding: 18px var(--gutter);
  background: var(--footer-bg);
  text-align: center;
  font-family: var(--stack-body);
}
.page-footer-text { margin: 0; font-size: 10.5px; letter-spacing: 0.08em; color: color-mix(in srgb, var(--cream) 60%, transparent); }
.page-footer-link { color: color-mix(in srgb, var(--cream) 60%, transparent); text-decoration: underline; text-underline-offset: 2px; }
.page-footer-link:hover { color: var(--cream); }

/* ============= reduced motion ============= */
@media (prefers-reduced-motion: reduce) {
  .tk-faq-chev, .tk-cta-btn, .tk-access-map { transition: none; }
  .tk-cta-btn:active { transform: none; }
}