/* ==========================================================================
   MKTORY - 共通スタイルシート

   配色  : 近黒インク × クールな紙白 × 朱（しゅ）一色
           朱は「赤入れ」に由来するアクセント。ページ全体で1色に固定する。
   書体  : Outfit（欧文・数字）＋ Zen Kaku Gothic New（和文）
           ※Sora は日本語グリフを持たないため廃止した。
   角丸  : 全要素 0px に固定（シャープで一貫させる。混在させない）
   テーマ: prefers-color-scheme による自動切り替え。
           1ページ内でライト／ダークを混在させない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* 面と文字 */
  --bg:            #F7F3EE;
  --surface:       #FFFDFB;
  --surface-2:     #F1E9E1;
  --text:          #171A1F;
  --text-2:        #4A4F59;
  --muted:         #69727C;
  --line:          #E7DED3;
  --line-strong:   #D8C9BB;

  /* アクセント（朱）。ページ内で使う色はこの3つだけ */
  --accent:        #D93B1E;
  --accent-strong: #A82B12;
  --accent-tint:   rgba(217, 59, 30, 0.07);
  --accent-text:      #A82B12;
  --accent-text-hover:#7F1F0C;
  --on-accent:     #FFFFFF;

  /* 反転ブロック（CTA帯）。1ページに1回だけ使う */
  --invert-bg:     #1B1A18;
  --invert-text:   #F7F3EE;
  --invert-muted:  #C9B7AA;
  --invert-line:   #2D2925;

  /* 寸法 */
  --shell:  1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --nav-h:  68px;

  /* 級数 */
  --t-hero: clamp(26px, 3.2vw, 44px);
  --t-h2:   clamp(24px, 3vw, 38px);
  --t-h3:   clamp(18px, 1.7vw, 22px);
  --t-lede: clamp(15px, 1.25vw, 17px);
  --t-body: 15.5px;
  --t-small: 13px;

  /* 縦リズム */
  --sec-y: clamp(56px, 7vw, 92px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* --------------------------------------------------------------------------
   2. ベース
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Outfit", "Zen Kaku Gothic New", "Hiragino Sans",
               "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: var(--t-body);
  line-height: 1.92;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  line-height: 1.44;
  letter-spacing: 0.005em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
  /* 日本語を文節で折り返す。非対応ブラウザは通常の折り返しに戻るだけ */
  word-break: auto-phrase;
}

p { margin: 0; }
ul, ol { margin: 0; }
figure { margin: 0; }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
}
a:hover { color: var(--accent-text-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background: var(--accent);
  color: #FFF;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #FFF;
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: #FFF;
}

.wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 画面外テキスト（見出し構造をスクリーンリーダーに残すため） */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. タイポグラフィのパーツ
   -------------------------------------------------------------------------- */

.lede {
  font-size: var(--t-lede);
  color: var(--text-2);
  line-height: 1.95;
  max-width: 34em;
  word-break: auto-phrase;
}

.eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--accent-text);
  margin: 0 0 18px;
  line-height: 1.6;
}

.note {
  font-size: var(--t-small);
  color: var(--muted);
  line-height: 1.85;
  max-width: 44em;
}

.faq-list {
  display: grid;
  gap: 16px;
  max-width: 58rem;
}

.faq-item {
  padding: 20px 22px 18px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.faq-item h3 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  line-height: 1.62;
  color: var(--text);
}

.faq-item h3::before {
  content: "Q.";
  flex-shrink: 0;
  color: var(--accent-text);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.faq-item p {
  position: relative;
  margin: 0;
  padding-left: 2.3em;
  font-size: 0.97rem;
  line-height: 1.82;
  color: var(--text-2);
}

.faq-item p::before {
  content: "A.";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--muted);
  font-weight: 700;
}

.roi-example {
  border-left: 3px solid var(--accent);
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.18));
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.04);
  padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.8vw, 34px);
  max-width: 58em;
}

.roi-intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.roi-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 11px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--accent-text);
  text-transform: uppercase;
}

.roi-intro p {
  margin: 0;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.7;
  color: var(--text-2);
}

.roi-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(220px, 0.9fr);
  gap: 18px;
  margin-bottom: 20px;
}

.roi-panel {
  padding: 14px 14px 6px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(17, 17, 17, 0.08);
}

.roi-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.roi-metric {
  padding: 12px 12px 10px;
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(17, 17, 17, 0.07);
}

.roi-metric .label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.roi-metric strong {
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  line-height: 1.25;
  color: var(--text);
}

.roi-metric small {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--muted);
}

.roi-metric.is-after {
  background: rgba(128, 179, 140, 0.12);
  border-color: rgba(50, 130, 80, 0.2);
}

.roi-metric.is-before {
  background: rgba(255,255,255,0.18);
}

.roi-formula {
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  background: rgba(255,255,255,0.12);
}

.roi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}

.roi-row:last-child {
  border-bottom: 0;
}

.roi-row span {
  font-size: 0.95rem;
  color: var(--text-2);
}

.roi-row strong {
  font-size: 0.98rem;
  color: var(--text);
}

.roi-row.is-after {
  background: rgba(128, 179, 140, 0.08);
}

.roi-summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.12));
}

.summary-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--accent-text);
  text-transform: uppercase;
}

.roi-summary strong {
  font-size: clamp(1.25rem, 1.8vw, 1.8rem);
  line-height: 1.25;
  color: var(--text);
}

.roi-summary p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-2);
}

.roi-example p {
  font-size: var(--t-body);
  color: var(--text-2);
  line-height: 1.85;
  margin: 0;
}

.roi-example p + p {
  margin-top: 14px;
}

.roi-example .roi-caveat {
  font-size: var(--t-small);
  color: var(--muted);
  margin-top: 16px;
}

@media (max-width: 820px) {
  .roi-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .roi-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roi-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 節見出し。上のヘアラインが「ここから新しい話」を示す */
.sec-head {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  margin-bottom: clamp(32px, 4.5vw, 56px);
}
.sec-head h2 {
  font-size: var(--t-h2);
  max-width: 22em;
}
.sec-head .lede { margin-top: 16px; }

section { padding-block: var(--sec-y); }

/* --------------------------------------------------------------------------
   4. ボタン
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.35s var(--ease),
              color 0.35s var(--ease),
              border-color 0.35s var(--ease),
              transform 0.12s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* 朱地に白。コントラスト比 4.6:1 */
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover {
  background: var(--accent-strong);
  color: var(--on-accent);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* 矢印つきテキストリンク */
.arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  color: var(--accent-text);
}
.arrow-link::after {
  content: "→";
  transition: transform 0.35s var(--ease);
}
.arrow-link:hover::after { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   5. ヘッダー
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--bg); }
}

.site-header .wrap {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
/* ロゴ画像が確定したら、この .logo の中身を <img> に差し替える */
.logo .dot { color: var(--accent); }

.site-header .brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}
.logo-reading {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
}
.site-nav a {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.site-nav a:hover { color: var(--accent-text); }
.site-nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.lang-switch {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px !important;
  letter-spacing: 0.04em;
}
.lang-switch:hover { border-color: var(--accent); }

.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 10px;
    margin-right: -10px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    height: 1.5px;
    background: var(--text);
    transition: transform 0.35s var(--ease), opacity 0.2s linear;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 22px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .site-nav[hidden] { display: none; }
  .site-nav a {
    padding: 15px 0;
    font-size: 15px;
    border-top: 1px solid var(--line);
  }
  .site-nav a[aria-current="page"] { box-shadow: none; color: var(--accent); }
}

/* --------------------------------------------------------------------------
   6. ヒーロー
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(36px, 5vw, 68px) clamp(40px, 5.5vw, 76px);
  overflow: hidden;
}

.hero-inner {
  width: 100%;
  /* 左はシェルに揃え、右は画面端まで開く。この非対称がページの基調 */
  padding-left: max(var(--gutter), calc((100% - var(--shell)) / 2));
  padding-right: var(--gutter);
  display: grid;
  gap: clamp(32px, 5vw, 56px);
}

@media (min-width: 900px) {
  .hero { padding-block: 0 clamp(40px, 5.5vw, 76px); }

  .hero-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
    gap: clamp(40px, 5vw, 72px);
    padding-right: 0;
  }

  /* 写真がヒーローの天地を決める。文字はその中で天地中央に置く */
  .hero-media {
    align-self: stretch;
    aspect-ratio: auto;
    min-height: clamp(440px, 52vh, 540px);
  }
}

.hero h1 {
  font-size: var(--t-hero);
  line-height: 1.36;
  letter-spacing: -0.015em;
  max-width: 16em;
}
.hero h1 .accent { color: var(--accent); }

.hero .lede {
  margin-top: clamp(20px, 2.4vw, 28px);
  max-width: 30em;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 3.4vw, 40px);
}

.hero-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface-2);
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
}
/* 朱を薄く重ねて、写真をブランドの色域に引き込む */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0.14;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .hero-media img { filter: grayscale(1) contrast(1.02) brightness(0.72); }
  .hero-media::after { mix-blend-mode: screen; opacity: 0.1; }
}


/* --------------------------------------------------------------------------
   7. ベントー（3つの視点）
   -------------------------------------------------------------------------- */

.bento {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 860px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(210px, auto);
  }
  .bento-lg { grid-column: span 4; grid-row: span 2; }
  .bento-sm { grid-column: span 2; }
}

.bento-cell {
  position: relative;
  background: var(--surface);
  padding: clamp(26px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  min-height: 210px;
}
.bento-cell h3 { font-size: var(--t-h3); }
.bento-cell p {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.85;
  max-width: 30em;
}
.bento-cell .kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent-text);
}

/* 写真セル */
.bento-cell.has-photo {
  padding: 0;
  min-height: 320px;
  overflow: hidden;
}
.bento-cell.has-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.5);
}
.bento-cell.has-photo .bento-body {
  position: relative;
  z-index: 1;
  padding: clamp(26px, 3vw, 38px);
  margin-top: auto;
  color: #F1F0EC;
  background: linear-gradient(to top, rgba(16, 19, 23, 0.88) 20%, rgba(16, 19, 23, 0) 100%);
}
.bento-cell.has-photo h3 { color: #FFFFFF; }
.bento-cell.has-photo p { color: #D6D3CD; }
.bento-cell.has-photo .kicker { color: #FF8064; }

/* 朱の淡い面を1セルだけに使い、グリッドに濃淡をつける。
   グリッドの隙間は罫線色なので、半透明のまま載せるとベージュに濁る。
   不透明に混ぜてから塗ること。 */
.bento-cell.is-tinted {
  background: #F6EBE7;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

/* --------------------------------------------------------------------------
   8. サービスパネル（提供メニュー）
   -------------------------------------------------------------------------- */

.panels {
  display: grid;
  gap: clamp(24px, 3vw, 34px);
}
@media (min-width: 860px) {
  .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 3枚並びのメニュー。860〜1023pxでは2列＋1列に折り返す */
@media (min-width: 1024px) {
  .panels-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panels-3 .panel-body { padding: clamp(22px, 2.2vw, 28px); }
}

.panel {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-strong);
  transition: border-top-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.panel:hover {
  border-top-color: var(--accent);
  transform: translateY(-3px);
}

.panel-media {
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  overflow: hidden;
}
.panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
}
@media (prefers-color-scheme: dark) {
  .panel-media img { filter: grayscale(1) brightness(0.7); }
}

.panel-body {
  padding: clamp(24px, 2.8vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-grow: 1;
}
.panel-body .kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.panel-body h3 { font-size: var(--t-h3); }
.panel-body p {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.9;
}
.panel-price {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.panel-price .amount {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.panel-price .amount-sub {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   9. 運営者について
   -------------------------------------------------------------------------- */

.about-grid {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 860px) {
  .about-grid { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }
}

.about-portrait {
  aspect-ratio: 3 / 4;
  max-width: 220px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 0;
  text-align: center;
  overflow: hidden;
}
.about-portrait .placeholder-name {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--line-strong);
  line-height: 1.2;
}
.about-portrait .placeholder-note {
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.55) saturate(0.86) contrast(1.08) brightness(0.96) hue-rotate(-12deg);
}
@media (prefers-color-scheme: dark) {
  .about-portrait img { filter: sepia(0.7) saturate(0.9) contrast(1.1) brightness(0.8) hue-rotate(-10deg); }
}


/* --------------------------------------------------------------------------
   9.5 レポートプレビュー（画像未準備時のプレースホルダー）
   -------------------------------------------------------------------------- */

.report-preview {
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  display: grid;
  place-items: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
}
.report-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
}
@media (prefers-color-scheme: dark) {
  .report-preview img { filter: grayscale(1) brightness(0.7); }
}
.report-preview .placeholder-name {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--line-strong);
}
.report-preview .placeholder-note {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.about-text p + p { margin-top: 18px; }
.about-text p {
  color: var(--text-2);
  max-width: 36em;
}

/* 実績を4つの区画に分ける。箇条書きより読み飛ばしにくい */
.facts {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(28px, 3vw, 40px);
  list-style: none;
  padding: 0;
}
@media (min-width: 620px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.facts li {
  background: var(--bg);
  padding: 22px clamp(18px, 2vw, 26px);
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   10. 課題リスト・提供内容（下層ページ）
   -------------------------------------------------------------------------- */

/* 「こんなお悩み」。引用のように扱い、箇条書きに見せない */
.problems {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
  list-style: none;
  padding: 0;
}
@media (min-width: 760px) {
  .problems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.problems li {
  background: var(--bg);
  padding: clamp(24px, 2.6vw, 32px);
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-2);
  position: relative;
  padding-left: clamp(38px, 3.6vw, 48px);
}
.problems li::before {
  content: "";
  position: absolute;
  left: clamp(24px, 2.6vw, 32px);
  top: calc(clamp(24px, 2.6vw, 32px) + 0.72em);
  width: 9px;
  height: 1.5px;
  background: var(--accent);
}

/* 提供内容。用語＋一行説明の対にする */
.deliverables {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  list-style: none;
  padding: 0;
}
@media (min-width: 760px) {
  .deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deliverables li.span-2 { grid-column: 1 / -1; }
}
.deliverables li {
  background: var(--surface);
  padding: clamp(22px, 2.4vw, 30px);
}
.deliverables .term {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 6px;
}
.deliverables .desc {
  display: block;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
}
.deliverables li.span-2 {
  background: #F6EBE7;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

/* --------------------------------------------------------------------------
   11. 進め方のレール
   -------------------------------------------------------------------------- */

.rail {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 2px solid var(--text);
  list-style: none;
  padding: 0;
}
@media (min-width: 860px) {
  .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rail li {
  background: var(--bg);
  padding: 26px clamp(16px, 1.8vw, 24px) 30px;
}
.rail .stage {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 8px;
}
.rail .detail {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   12. 料金
   -------------------------------------------------------------------------- */

.price-block {
  border-top: 2px solid var(--accent);
  background: var(--surface);
  padding: clamp(30px, 3.6vw, 46px);
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  align-items: end;
}
@media (min-width: 760px) {
  .price-block { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
}
.price-block .amount {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.15;
  white-space: nowrap;
}
.price-block .amount-sub {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.85;
  max-width: 34em;
}

/* --------------------------------------------------------------------------
   13. 向き / 不向き
   -------------------------------------------------------------------------- */

.fit-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 760px) {
  .fit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); }
}
.fit-col {
  background: var(--surface);
  padding: clamp(26px, 3vw, 38px);
}
.fit-col h3 {
  font-size: 16.5px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.fit-col.is-yes h3 { color: var(--accent-text); }
.fit-col ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 14px;
}
.fit-col li {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-2);
  padding-left: 18px;
  position: relative;
}
.fit-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 8px;
  height: 1.5px;
  background: var(--line-strong);
}
.fit-col.is-yes li::before { background: var(--accent); }
.fit-col p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   13.5 比較表（3プランの見比べ）
   -------------------------------------------------------------------------- */

.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}
.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--surface);
}
.compare-table th,
.compare-table td {
  padding: clamp(16px, 1.8vw, 22px) clamp(14px, 1.6vw, 20px);
  text-align: left;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare-table thead th {
  border-bottom: 2px solid var(--text);
  color: var(--text);
  font-size: 14.5px;
}
.compare-table th[scope="row"] {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  background: var(--bg);
}
.compare-table .compare-head {
  display: block;
  font-weight: 700;
  font-size: 15.5px;
  margin-bottom: 6px;
}
.compare-table .compare-price {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.compare-table td.is-featured,
.compare-table th.is-featured {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-left: 1px solid var(--accent-tint);
  border-right: 1px solid var(--accent-tint);
}
.compare-table thead th.is-featured .compare-price {
  color: var(--accent-text);
}
.compare-table .compare-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--on-accent);
  background: var(--accent);
  padding: 3px 9px;
}

/* --------------------------------------------------------------------------
   14. CTA帯（1ページに1回だけ）
   -------------------------------------------------------------------------- */

.cta-band {
  background: var(--invert-bg);
  color: var(--invert-text);
}
@media (prefers-color-scheme: dark) {
  .cta-band { border-block: 1px solid var(--invert-line); }
}
.cta-band .wrap {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}
@media (min-width: 860px) {
  .cta-band .wrap { grid-template-columns: minmax(0, 1fr) auto; }
}
.cta-band h2 {
  font-size: var(--t-h2);
  color: var(--invert-text);
  max-width: 16em;
}
.cta-band p,
.cta-band blockquote {
  margin: 14px 0 0;
  font-size: var(--t-lede);
  color: var(--invert-muted);
  max-width: 34em;
}

/* --------------------------------------------------------------------------
   15. 下層ページのヒーローと戻り導線
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block: clamp(36px, 5vw, 64px) clamp(48px, 6.5vw, 88px);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 {
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.38;
  max-width: 16em;
}
.page-hero .lede { margin-top: clamp(18px, 2.2vw, 26px); }
.page-hero .hero-cta { margin-top: clamp(26px, 3vw, 36px); }

.back-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: clamp(24px, 3vw, 36px);
  transition: color 0.3s var(--ease);
}
.back-link::before { content: "←"; }
.back-link:hover { color: var(--accent-text); }

/* --------------------------------------------------------------------------
   16. フッター
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 48px);
  font-size: 13px;
  color: var(--muted);
}
.site-footer .wrap {
  display: grid;
  gap: 28px;
}
@media (min-width: 760px) {
  .site-footer .wrap {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    gap: clamp(32px, 5vw, 72px);
  }
}
.site-footer .logo { font-size: 17px; margin-bottom: 10px; }
.site-footer nav {
  display: grid;
  gap: 10px;
}
.site-footer nav a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.3s var(--ease);
}
.site-footer nav a:hover { color: var(--accent-text); }
.footer-legal {
  line-height: 1.85;
  max-width: 26em;
}

/* --------------------------------------------------------------------------
   17. スクロール時の出現（MOTION_INTENSITY 5）

   意図: 節ごとに一拍置いて出すことで読む順序を示す。
   IntersectionObserver で駆動する。scroll イベントは使わない。
   JS が動かない場合は .js が付かないので、常に表示されたままになる。
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   18. 印刷
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .cta-band, .hero-media, .panel-media { display: none; }
  body { background: #FFF; color: #000; }
}

/* --------------------------------------------------------------------------
   19. 小物
   -------------------------------------------------------------------------- */

/* 金額に添える単位。数字より一段落とす */
.amount-unit {
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.copyright {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}

.reveal-gap { margin-top: 26px; }

/* --------------------------------------------------------------------------
   20. 写真バンド（下層ページ）

   ヒーロー直下は本文幅の21:9、節と節のあいだは画面幅いっぱいの細い帯。
   同じ処理（グレースケール＋朱の乗算）でトップページと色域を揃える。
   -------------------------------------------------------------------------- */

.media-band {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--surface-2);
  aspect-ratio: 21 / 9;
}
.media-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
}
.media-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0.14;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .media-band img { filter: grayscale(1) contrast(1.02) brightness(0.7); }
  .media-band::after { mix-blend-mode: screen; opacity: 0.09; }
}

/* 節のあいだに挟む細い帯。画面幅いっぱいに抜く */
.media-band.is-divider { aspect-ratio: 4 / 1; }

@media (max-width: 700px) {
  .media-band,
  .media-band.is-divider { aspect-ratio: 16 / 9; }
}

.page-hero .media-band { margin-top: clamp(36px, 4.6vw, 60px); }

/* ------------------------------------------------------------------
   CTAバンドのボタン群（フォーム＋メールの2択）
   cta-band は反転地のため、btn-ghost を反転色で上書きする
------------------------------------------------------------------ */
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cta-band .btn-ghost {
  color: var(--invert-text);
  border-color: var(--invert-muted);
}
.cta-band .btn-ghost:hover {
  background: var(--invert-text);
  color: var(--invert-bg);
  border-color: var(--invert-text);
}

/* ------------------------------------------------------------------
   写真の色味を統一
   ヒーローと帯だけに朱のmultiplyがかかっていて、パネル・ベントー・
   ポートレートは中性グレーのままだった。全ての写真に同じ処理をかける。
------------------------------------------------------------------ */
.panel-media,
.about-portrait,
.bento-cell.has-photo { position: relative; }

.panel-media::after,
.about-portrait::after,
.bento-cell.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-color-scheme: dark) {
  .panel-media::after,
  .about-portrait::after,
  .bento-cell.has-photo::before {
    mix-blend-mode: screen;
    opacity: 0.1;
  }
}

/* ポートレートだけは背景が明るい（ハイキー）ため、朱を同じ濃さで
   重ねると壁がピンクに転ぶ。地の色に馴染むよう弱める。 */
.about-portrait::after { opacity: 0.05; }
.about-portrait img { filter: grayscale(1) contrast(1.02) brightness(0.97); }
@media (prefers-color-scheme: dark) {
  .about-portrait::after { opacity: 0.07; }
  .about-portrait img { filter: grayscale(1) contrast(1.02) brightness(0.75); }
}

/* Homepage services: purpose, deliverables and price in one readable row. */
.service-menu { background: var(--surface-2); scroll-margin-top: 80px; }
.service-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; margin-bottom: 38px; }
.service-heading .kicker { display: block; margin-bottom: 16px; }
.service-heading h2 { font-size: clamp(25px, 2.7vw, 36px); line-height: 1.6; }
.service-intro { color: var(--text-2); font-size: 14px; }
.service-promise { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 500; color: var(--accent-text); }
.service-options { display: grid; gap: 18px; }
.service-option { display: grid; grid-template-columns: 190px minmax(0, 1fr) 192px; gap: 28px; align-items: center; padding: 30px; background: var(--surface); border-radius: 3px; }
.service-visual { position: relative; align-self: stretch; overflow: hidden; min-height: 230px; background: var(--surface-2); }
.service-visual img { width: 100%; height: 100%; object-fit: cover; }
.service-index { position: absolute; top: 0; left: 0; padding: 4px 13px; background: var(--surface); color: var(--accent-text); font-size: 22px; font-weight: 500; }
.service-need { display: block; color: var(--accent-text); font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.service-content h3 { font-size: clamp(20px, 1.9vw, 25px); line-height: 1.5; }
.service-benefit { margin-top: 10px; font-size: 14px; font-weight: 700; }
.service-description { margin-top: 7px; font-size: 13px; line-height: 1.85; color: var(--text-2); }
.service-facts { margin: 18px 0 0; padding-top: 13px; border-top: 1px solid var(--line); font-size: 12px; }
.service-facts > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; margin-top: 4px; }
.service-facts dt { color: var(--muted); }
.service-facts dd { margin: 0; }
.service-action { align-self: stretch; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); padding-left: 24px; }
.service-price { font-size: 35px; line-height: 1.2; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.service-price > span { font-size: 20px; margin-right: 4px; }
.service-process { font-size: 12px; line-height: 1.7; color: var(--muted); margin-top: 10px; }
.service-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 26px; padding: 12px 0; border-bottom: 1px solid var(--accent); font-size: 12px; font-weight: 700; text-decoration: none; transition: color .2s, background .2s; }
.service-link span { font-size: 19px; transition: transform .2s; }
.service-link:hover span { transform: translate(2px,-2px); }
.service-link:active { transform: translateY(1px); }
.service-guidance { margin-top: 26px; text-align: center; font-size: 13px; color: var(--text-2); }
.service-mobile-break { display: none; }
@media (max-width: 1050px) {
  .service-option { grid-template-columns: 135px minmax(0, 1fr) 170px; gap: 22px; padding: 24px; }
  .service-action { padding-left: 18px; }
}
@media (max-width: 760px) {
  .service-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 26px; }
  .service-option { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .service-visual { min-height: 0; height: 140px; }
  .service-visual img { object-position: center 50%; }
  .service-content h3 { font-size: 22px; }
  .service-action { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }
  .service-price { font-size: 32px; }
  .service-link { margin-top: 16px; font-size: 14px; }
  .service-mobile-break { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .service-link, .service-link span { transition: none; }
}

/* Visitor journey: search, understanding, inquiry. Illustrations are decorative. */
.diagnosis-journey .sec-head > .kicker { display: block; margin-bottom: 14px; }
.diagnosis-journey h2 { font-size: var(--t-h2); }
.journey-flow { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; }
.journey-step { position: relative; min-width: 0; display: flex; flex-direction: column; }
.journey-stage { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); font-size: 14px; font-weight: 700; }
.journey-stage > span { color: var(--accent-text); font-size: 14px; font-weight: 500; }
.journey-step:not(:last-child)::after { content: '→'; position: absolute; right: -29px; top: 108px; color: var(--accent-text); font-size: 22px; }
.journey-illustration { height: 180px; margin: 22px 0 25px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); padding: 22px; }
.journey-browser { width: 100%; max-width: 236px; height: 136px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 5px; overflow: hidden; box-shadow: 0 5px 12px rgba(90,65,40,.04); }
.journey-search { padding: 14px; }
.journey-searchbar { height: 28px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 3px; padding: 0 8px; font-size: 10px; color: var(--text-2); }
.journey-magnifier { position: relative; width: 10px; height: 10px; border: 1.4px solid var(--accent-text); border-radius: 50%; flex-shrink: 0; }
.journey-magnifier::after { content: ''; position: absolute; width: 4px; height: 1px; background: var(--accent-text); transform: rotate(45deg); right: -3px; bottom: -2px; }
.journey-result { margin-top: 12px; }
.journey-result i, .journey-result b, .journey-result em, .journey-pagebody > b, .journey-pagebody > em, .journey-contactbody > i { display: block; height: 4px; background: var(--line); border-radius: 1px; margin-top: 5px; }
.journey-result i { width: 28%; height: 3px; }
.journey-result b { width: 72%; background: var(--accent-text); opacity: .65; }
.journey-result em { width: 90%; }
.journey-windowbar { height: 20px; border-bottom: 1px solid var(--line); display: flex; gap: 4px; align-items: center; padding: 0 9px; }
.journey-windowbar i { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }
.journey-pagebody { padding: 10px 16px; }
.journey-page-label { font-size: 12px; font-weight: 700; }
.journey-pagebody > b { width: 88%; }
.journey-pagebody > em { width: 66%; }
.journey-page-points { display: flex; gap: 6px; margin-top: 11px; }
.journey-page-points span { flex: 1; text-align: center; background: var(--accent-tint); color: var(--accent-text); font-size: 10px; padding: 4px; }
.journey-contactbody { padding: 10px 16px; }
.journey-contactbody > span { font-size: 10px; color: var(--text-2); }
.journey-contactbody > i { width: 86%; }
.journey-contactbody > i + i { width: 60%; }
.journey-mock-button { display: flex; justify-content: space-between; background: var(--accent-text); color: var(--on-accent); padding: 5px 12px; font-size: 11px; margin-top: 11px; border-radius: 2px; }
.journey-step h3 { font-size: clamp(21px, 2.1vw, 27px); line-height: 1.65; }
.journey-step > p { margin: 14px 0 20px; color: var(--text-2); font-size: 14px; line-height: 1.95; }
.journey-discipline { margin-top: auto; font-size: 12px; color: var(--accent-text); font-weight: 500; }
.journey-summary { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line-strong); text-align: center; font-size: 14px; color: var(--text-2); }
.journey-summary strong { color: var(--text); font-weight: 500; }
@media (max-width: 760px) {
 .journey-flow { grid-template-columns: 1fr; gap: 38px; }
 .journey-step:not(:last-child)::after { content: none; }
 .journey-illustration { margin: 18px 0; height: 174px; }
 .journey-step h3 { font-size: 24px; }
 .journey-step > p { margin-bottom: 12px; }
 .journey-summary { text-align: left; margin-top: 28px; }
}

/* Homepage first view: a direct question and a concrete outcome. */
.hero-refined { padding-block: 34px 54px; }
.hero-refined .hero-inner { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: clamp(30px, 4vw, 64px); }
.hero-refined .hero-copy { padding-block: 18px; }
.hero-eyebrow { color: var(--accent-text); font-size: 13px; font-weight: 500; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.hero-eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; flex-shrink: 0; }
.hero-refined h1 { max-width: none; font-size: clamp(36px, 4.1vw, 58px); line-height: 1.38; letter-spacing: -.035em; }
.hero-question { display: block; font-size: .56em; letter-spacing: .015em; line-height: 1.65; font-weight: 500; margin-bottom: 17px; }
.hero-question br { display: none; }
.hero-answer { display: block; }
.hero-refined .lede { margin-top: 22px; max-width: 35em; font-size: 14px; line-height: 2; }
.hero-refined .hero-cta { margin-top: 27px; gap: 24px; align-items: center; }
.hero-refined .btn-primary { gap: 22px; padding: 14px 22px; font-size: 14px; }
.hero-consult { display: inline-flex; gap: 14px; align-items: center; font-size: 13px; text-decoration: none; padding-block: 10px; border-bottom: 1px solid var(--line-strong); }
.hero-consult:hover { border-color: var(--accent-text); }
.hero-assurance { display: flex; flex-wrap: wrap; gap: 0; color: var(--text-2); font-size: 12px; margin-top: 18px; }
.hero-assurance span + span::before { content: '·'; margin-inline: 10px; color: var(--accent-text); }
.hero-partner { display: inline-block; color: var(--muted); font-size: 11px; margin-top: 24px; text-underline-offset: 4px; }
.hero-refined .hero-media { min-height: 530px; aspect-ratio: auto; align-self: stretch; overflow: hidden; border-radius: 3px; }
.hero-refined .hero-media > img { position: absolute; inset: 0; object-position: 53% center; filter: saturate(.75) brightness(1.2) contrast(.92); }
.hero-refined .hero-media::after { content: none; }
.hero-outcome { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 24px; padding: 24px; background: var(--surface); border-top: 3px solid var(--accent); }
.hero-outcome-label { font-size: 11px; color: var(--accent-text); font-weight: 500; }
.hero-outcome > p { font-size: clamp(19px, 1.8vw, 24px); font-weight: 700; line-height: 1.6; margin-top: 8px; }
.hero-outcome-steps { display: flex; list-style: none; padding: 15px 0 0; margin-top: 18px; gap: 12px; border-top: 1px solid var(--line); }
.hero-outcome-steps li { flex: 1; font-size: 11px; line-height: 1.6; }
.hero-outcome-steps span { display: block; color: var(--accent-text); font-size: 10px; margin-bottom: 4px; }
@media (min-width: 1440px) { .hero-refined .hero-inner { padding-inline: 70px; } }
@media (max-width: 1050px) and (min-width: 761px) {
 .hero-refined .hero-inner { gap: 28px; }
 .hero-refined h1 { font-size: 39px; }
 .hero-question { font-size: 21px; }
 .hero-refined .hero-cta { gap: 10px; }
 .hero-desktop-break { display: none; }
 .hero-outcome { left: 16px; right: 16px; bottom: 16px; padding: 18px; }
 .hero-outcome-steps { gap: 8px; }
}
@media (max-width: 760px) {
 .hero-refined { padding-block: 22px 40px; }
 .hero-refined .hero-inner { grid-template-columns: 1fr; gap: 28px; }
 .hero-refined .hero-copy { padding-block: 4px 0; }
 .hero-eyebrow { font-size: 11px; margin-bottom: 20px; gap: 8px; }
 .hero-refined h1 { font-size: clamp(35px, 7.8vw, 48px); }
 .hero-question { font-size: 20px; margin-bottom: 14px; }
 .hero-refined .lede { margin-top: 19px; font-size: 13px; }
 .hero-desktop-break { display: none; }
 .hero-refined .hero-cta { gap: 12px 20px; margin-top: 22px; }
 .hero-refined .btn-primary { font-size: 13px; padding: 13px 16px; gap: 12px; }
 .hero-partner { margin-top: 17px; }
 .hero-refined .hero-media { min-height: 360px; }
 .hero-refined .hero-media > img { object-position: center 40%; }
 .hero-outcome { left: 18px; right: 18px; bottom: 18px; padding: 20px; }
}

/* Homepage partner support: value proposition and concrete scope. */
.partner-support { scroll-margin-top: 80px; }
.partner-layout { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.partner-copy > .kicker { display: block; margin-bottom: 18px; }
.partner-copy h2 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.5; letter-spacing: -.02em; }
.partner-service-name { margin-top: 20px; font-size: 16px; font-weight: 700; color: var(--accent-text); }
.partner-description { margin-top: 14px; color: var(--text-2); font-size: 14px; line-height: 2; max-width: 34em; }
.partner-promises { list-style: none; margin-top: 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 11px; color: var(--text-2); }
.partner-promises li::before { content: '✓'; color: var(--accent-text); margin-right: 6px; }
.partner-cta { margin-top: 28px; }
.partner-cta .btn { gap: 24px; font-size: 13px; padding: 14px 20px; }
.partner-cta > p { font-size: 12px; margin-top: 15px; font-weight: 500; }
.partner-cta > p > span { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-top: 2px; }
.partner-detail { padding-top: 7px; }
.partner-handoff { background: var(--surface-2); padding: 26px 28px; border-top: 2px solid var(--accent); }
.partner-handoff-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); }
.partner-handoff-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 21px; }
.partner-handoff-flow b { display: block; font-weight: 500; font-size: clamp(18px, 1.8vw, 23px); }
.partner-handoff-flow div > span { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.partner-flow-arrow { font-size: 24px; color: var(--accent-text); }
.partner-detail > h3 { font-size: 16px; margin-top: 26px; }
.partner-deliverables { margin: 10px 0 0; }
.partner-deliverables > div { padding: 16px 0; border-bottom: 1px solid var(--line-strong); }
.partner-deliverables dt { font-weight: 500; font-size: 14px; display: flex; align-items: baseline; gap: 14px; }
.partner-deliverables dt > span { font-size: 11px; color: var(--accent-text); font-weight: 400; }
.partner-deliverables dd { margin: 5px 0 0 28px; font-size: 12px; color: var(--text-2); line-height: 1.9; }
@media (max-width: 760px) {
 .partner-layout { grid-template-columns: 1fr; gap: 32px; }
 .partner-copy h2 { font-size: 34px; }
 .partner-service-name { font-size: 15px; }
 .partner-handoff { padding: 22px; }
 .partner-handoff-flow { gap: 12px; }
 .partner-handoff-label { font-size: 11px; }
 .partner-promises { gap: 8px 14px; }
}

/* Homepage about: the practice first, a compact practitioner profile second. */
.about-mktory { border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.about-mktory-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.about-mktory-heading h2 { font-size: 13px; color: var(--accent-text); font-weight: 500; letter-spacing: .04em; }
.about-mktory-heading > p { margin-top: 22px; font-size: clamp(28px, 3vw, 38px); font-weight: 700; line-height: 1.65; letter-spacing: -.015em; }
.about-mktory-statement { color: var(--text-2); font-size: 15px; line-height: 2.1; }
.about-mktory-statement > p + p { margin-top: 16px; }
.about-mktory-person { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; border-top: 1px solid var(--line-strong); padding-top: 24px; margin-top: 28px; }
.about-mktory-person > img { width: 96px; height: 96px; object-fit: contain; object-position: center; border-radius: 50%; filter: none; }
.about-mktory-person h3 { font-size: 21px; font-weight: 500; line-height: 1.5; }
.about-mktory-person h3 > span { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-bottom: 3px; }
.about-mktory-person p { margin-top: 8px; color: var(--text-2); font-size: 12px; line-height: 1.9; }
@media (max-width: 760px) {
 .about-mktory-layout { grid-template-columns: 1fr; gap: 25px; }
 .about-mktory-heading > p { margin-top: 16px; font-size: 30px; }
 .about-mktory-statement { font-size: 14px; }
 .about-mktory-person { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; align-items: start; }
 .about-mktory-person > img { width: 80px; height: 80px; }
}

/* Homepage closing invitation: concrete questions and one clear next step. */
.contact-finale { background: var(--surface-2); border-top: 1px solid var(--line-strong); scroll-margin-top: 80px; }
.contact-finale-layout { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(36px, 6vw, 80px); }
.contact-finale-copy > .kicker { display: block; margin-bottom: 20px; }
.contact-finale h2 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.55; letter-spacing: -.025em; }
.contact-finale-copy > p { margin-top: 23px; color: var(--text-2); font-size: 14px; line-height: 2.1; }
.contact-finale-action { border-left: 1px solid var(--line-strong); padding-left: clamp(24px, 3vw, 40px); }
.contact-finale-action h3 { font-size: 14px; font-weight: 500; }
.contact-examples { list-style: none; padding: 0; margin: 16px 0 26px; }
.contact-examples li { position: relative; padding-left: 16px; color: var(--text-2); font-size: 13px; line-height: 1.9; }
.contact-examples li + li { margin-top: 9px; }
.contact-examples li::before { content: ''; position: absolute; left: 0; top: .85em; width: 5px; height: 5px; background: var(--accent-text); border-radius: 50%; }
.contact-finale .contact-finale-button { display: flex; justify-content: space-between; width: 100%; gap: 16px; padding: 17px 20px; font-size: 14px; }
.contact-finale-button > span { font-size: 20px; }
.contact-form-note { margin-top: 11px; color: var(--text-2); font-size: 11px; }
@media (max-width: 760px) {
 .contact-finale-layout { grid-template-columns: 1fr; gap: 28px; }
 .contact-finale h2 { font-size: clamp(29px, 7.3vw, 38px); }
 .contact-finale-copy > p { font-size: 13px; margin-top: 18px; }
 .contact-finale-action { border-left: 0; border-top: 1px solid var(--line-strong); padding: 24px 0 0; }
 .contact-finale .contact-finale-button { font-size: 13px; padding: 16px; gap: 10px; }
}

/* Homepage editorial palette: quiet surfaces, purposeful accent color. */
.home-editorial {
  --bg: #FCFBF8;
  --surface: #FFFFFF;
  --surface-2: #F5F0EA;
  --brand-wash: #FAF1EC;
  --brand-line: #E8CFC3;
  --text: #252521;
  --text-2: #53534D;
  --muted: #6B6B63;
  --line: #E8E6DF;
  --line-strong: #D8D6CD;
  --accent: #C4472D;
  --accent-strong: #A43520;
  --accent-tint: rgba(196, 71, 45, .055);
  --accent-text: #A43520;
  --accent-text-hover: #822A1A;
}
.home-editorial .hero-eyebrow,
.home-editorial .service-promise { color: var(--text-2); }
.home-editorial .kicker,
.home-editorial .hero-outcome-label,
.home-editorial .service-need,
.home-editorial .partner-service-name,
.home-editorial .about-mktory-heading h2 { color: var(--accent-text); }
.home-editorial .hero-eyebrow::before { content: none; }
.home-editorial .hero-outcome { border-top: 0; background: var(--brand-wash); }
.home-editorial .hero-outcome-steps { gap: 0; }
.home-editorial .hero-outcome-steps li { flex: initial; }
.home-editorial .hero-outcome-steps li + li::before { content: '→'; color: var(--muted); margin-inline: 10px; }
.home-editorial .hero-assurance span + span::before { color: var(--muted); }
.home-editorial .journey-stage { border-bottom: 0; padding-bottom: 0; }
.home-editorial .journey-illustration { background: transparent; padding-inline: 12px; margin-top: 14px; }
.home-editorial .journey-browser { box-shadow: none; background: var(--bg); }
.home-editorial .journey-step:not(:last-child)::after { color: var(--muted); }
.home-editorial .journey-summary { border-top: 0; padding-top: 8px; }
.home-editorial .service-menu { background: #FBF3ED; }
.home-editorial .service-option { border-radius: 3px; border-top: 2px solid var(--brand-line); }
.home-editorial .service-need { color: var(--accent-text); }
.home-editorial .service-price { color: var(--accent-text); }
.home-editorial .service-link { color: var(--accent-text); background: #FAE9DE; border: 1px solid #E4BBA6; border-radius: 3px; padding: 12px 10px; font-size: 12px; min-height: 48px; }
.home-editorial .service-link:hover { color: var(--on-accent); background: var(--accent-strong); border-color: var(--accent-strong); }
.home-editorial .partner-handoff { background: var(--brand-wash); padding: 24px; border-top: 0; border-bottom: 0; }
.home-editorial .partner-flow-arrow { color: var(--accent-text); }
.home-editorial .partner-promises li::before { color: var(--text-2); }
.home-editorial .partner-deliverables dd { margin-left: 0; }
.home-editorial .about-mktory { border-top: 0; }
.home-editorial .contact-finale { background: var(--brand-wash); border-top-color: var(--brand-line); }
.home-editorial .contact-finale-action { border-left: 0; }
.home-editorial .contact-examples li::before { background: var(--muted); width: 3px; height: 3px; }
@media (max-width: 760px) {
 .home-editorial .contact-finale-action { border-top: 0; padding-top: 0; }
}

/* Distinguishable diagnosis stages; compact, text-first mobile reading. */
.home-editorial .journey-step { --journey-ink: var(--accent-text); --journey-tint: var(--brand-wash); }
.home-editorial .journey-flow { gap: 24px; }
.home-editorial .journey-step { background: var(--journey-tint); padding: 25px 24px; border-top: 2px solid var(--brand-line); border-radius: 3px; }
.home-editorial .journey-stage { color: var(--journey-ink); gap: 10px; font-size: 15px; }
.home-editorial .journey-stage > span { color: var(--journey-ink); font-variant-numeric: tabular-nums; }
.home-editorial .journey-step h3 { color: var(--journey-ink); font-size: clamp(21px, 2vw, 26px); line-height: 1.65; text-wrap: pretty; }
.home-editorial .journey-step > p { font-size: 15px; line-height: 1.95; color: var(--text-2); }
.home-editorial .journey-discipline { color: var(--journey-ink); font-size: 12px; font-weight: 500; }
.home-editorial .journey-illustration { height: 156px; margin: 18px 0 22px; padding: 0; }
.home-editorial .journey-browser { background: var(--surface); border-color: var(--brand-line); }
.home-editorial .journey-result b { background: var(--journey-ink); opacity: 1; }
.home-editorial .journey-page-points span { background: var(--journey-tint); color: var(--journey-ink); }
.home-editorial .journey-magnifier { border-color: var(--journey-ink); }
.home-editorial .journey-magnifier::after,
.home-editorial .journey-mock-button { background: var(--journey-ink); }
.home-editorial .journey-step:not(:last-child)::after { content: none; }
@media (max-width: 900px) and (min-width: 761px) {
 .home-editorial .journey-flow { gap: 14px; }
 .home-editorial .journey-step { padding: 20px 16px; }
 .home-editorial .journey-step h3 { font-size: 21px; }
}
@media (max-width: 760px) {
 .home-editorial .diagnosis-journey .sec-head { margin-bottom: 25px; }
 .home-editorial .diagnosis-journey h2 { font-size: clamp(23px, 5.8vw, 30px); line-height: 1.65; }
 .home-editorial .diagnosis-journey .lede { font-size: 15px; line-height: 1.95; }
 .home-editorial .diagnosis-journey .lede br { display: none; }
 .home-editorial .journey-flow { gap: 16px; }
 .home-editorial .journey-step { padding: 22px 20px; border-top: 0; border-left: 3px solid var(--brand-line); display: grid; grid-template-columns: 1fr; }
 .home-editorial .journey-stage { font-size: 13px; margin-bottom: 10px; }
 .home-editorial .journey-stage > span { font-size: 13px; }
 .home-editorial .journey-illustration { display: none; }
 .home-editorial .journey-step h3 { font-size: 23px; line-height: 1.6; }
 .home-editorial .journey-step h3 br { display: none; }
 .home-editorial .journey-step > p { font-size: 15px; line-height: 1.9; margin: 10px 0 14px; }
 .home-editorial .journey-discipline { font-size: 12px; margin-top: 0; }
 .home-editorial .journey-summary { margin-top: 24px; font-size: 14px; line-height: 1.9; }
}

@media (max-width: 760px) {
 .home-editorial .service-link { font-size: 14px; padding: 14px 16px; }
}

/* Web marketing audit: isolated detail-page design, matching the approved homepage. */
.audit-detail { --bg:#FCFBF8; --surface:#FFFFFF; --surface-2:#F5F0EA; --text:#252521; --text-2:#53534D; --muted:#6B6B63; --line:#E8E6DF; --line-strong:#D8D6CD; --accent:#C4472D; --accent-strong:#A43520; --accent-text:#A43520; --accent-text-hover:#822A1A; --brand-wash:#FAF1EC; --brand-line:#E8CFC3; }
.audit-detail section[id] { scroll-margin-top:90px; }
.audit-detail .sec-head { max-width:800px; margin-bottom:30px; }
.audit-detail h2 { font-size:clamp(25px,3vw,36px); line-height:1.6; }
.audit-detail .note { color:var(--text-2); font-size:13px; line-height:1.95; }
.audit-hero { padding-top:28px; }
.audit-hero-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:54px; align-items:center; margin-top:28px; }
.audit-hero h1 { font-size:19px; margin-top:12px; }
.audit-headline { font-size:clamp(30px,3.5vw,44px); font-weight:700; line-height:1.6; letter-spacing:-.025em; margin-top:20px; }
.audit-headline > span { color:var(--accent-text); }
.audit-hero .lede { font-size:15px; margin-top:20px; line-height:2; }
.audit-hero .hero-cta { align-items:center; gap:20px; margin-top:27px; }
.audit-hero .btn { font-size:14px; gap:16px; }
.audit-reassurance { margin-top:16px; font-size:12px; color:var(--text-2); }
.audit-overview { background:var(--surface); border:1px solid var(--brand-line); }
.audit-overview > img { width:100%; height:150px; object-fit:cover; }
.audit-overview-body { padding:24px 28px; }
.audit-overview-label { font-size:12px; color:var(--text-2); }
.audit-overview-price { color:var(--accent-text); font-size:42px; font-weight:500; line-height:1.4; }
.audit-overview-note { font-size:11px; color:var(--text-2); }
.audit-overview dl { margin:18px 0; font-size:13px; }
.audit-overview dl > div { display:grid; grid-template-columns:7em 1fr; gap:10px; padding:7px 0; border-top:1px solid var(--line); }
.audit-overview dt { color:var(--muted); }
.audit-overview dd { margin:0; }
.audit-overview .arrow-link { font-size:12px; }
.audit-detail .audit-problems { padding-top:0; }
.audit-detail .problems { background:transparent; gap:12px 28px; border:0; }
.audit-detail .problems li { background:transparent; border-bottom:1px solid var(--line); padding:16px 0 16px 20px; }
.audit-detail .problems li::before { left:0; top:30px; }
.audit-scope,.audit-price { background:#FBF3ED; }
.audit-detail .deliverables { display:block; background:transparent; border:0; }
.audit-detail .deliverables li { display:grid; grid-template-columns: .85fr 1.5fr; gap:30px; border-top:1px solid var(--brand-line); background:transparent; padding:24px 0; }
.audit-detail .deliverables .term { color:var(--accent-text); font-size:18px; }
.audit-detail .deliverables .desc { color:var(--text-2); font-size:15px; line-height:1.95; }
.audit-detail .deliverables .span-2 { padding:24px; background:var(--surface); border-top:0; }
.audit-detail .report-preview { border:1px solid var(--line); padding:16px; background:var(--surface); }
.audit-detail .report-preview img { filter:none; }
.audit-detail .rail { border-top:1px solid var(--brand-line); background:transparent; gap:20px; counter-reset:audit-flow; }
.audit-detail .rail li { padding:24px 0; counter-increment:audit-flow; }
.audit-detail .rail li::before { content:'0' counter(audit-flow); display:block; color:var(--accent-text); font-size:13px; margin-bottom:12px; }
.audit-detail .rail .detail { color:var(--text-2); font-size:14px; }
.audit-prepare { padding-top:0; }
.audit-detail .price-block { border-top:2px solid var(--brand-line); }
.audit-detail .price-block .amount { color:var(--accent-text); }
.audit-detail .price-block .amount-sub { color:var(--text-2); font-size:14px; }
.audit-detail .fit-grid { background:transparent; gap:28px; border:0; }
.audit-detail .fit-col { background:transparent; padding:24px; border-top:2px solid var(--line-strong); }
.audit-detail .fit-col.is-yes { background:var(--brand-wash); border-top-color:var(--brand-line); }
.audit-person { background:var(--surface-2); }
.audit-person-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.audit-person h2 { font-size:28px; margin-top:12px; }
.audit-person p { font-size:14px; color:var(--text-2); margin-top:14px; }
.audit-person-profile { display:grid; grid-template-columns:88px 1fr; gap:20px; }
.audit-person-profile > img { width:88px; height:88px; border-radius:50%; }
.audit-person-profile h3 { font-size:22px; }
.audit-person-profile h3 > span { display:block; font-size:11px; color:var(--muted); font-weight:400; }
.audit-person-profile .arrow-link { font-size:12px; margin-top:14px; }
.audit-detail .faq-list { max-width:900px; }
.audit-detail .faq-item { padding:24px 0; border-bottom:1px solid var(--line); }
.audit-detail .faq-item h3 { font-size:17px; color:var(--accent-text); }
.audit-detail .faq-item p { font-size:15px; line-height:1.95; color:var(--text-2); margin-top:10px; }
.audit-contact { background:var(--brand-wash); border-top:1px solid var(--brand-line); }
.audit-contact .wrap { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:40px; }
.audit-contact h2 { margin-top:18px; }
.audit-contact p { color:var(--text-2); margin-top:20px; font-size:14px; }
.audit-contact .btn { display:flex; justify-content:space-between; gap:16px; font-size:14px; }
.audit-contact p.note { font-size:11px; margin-top:10px; }
@media(max-width:760px) {
 .audit-detail section { padding-block:44px; }
 .audit-detail .audit-hero { padding-top:22px; }
 .audit-hero-grid,.audit-person-grid,.audit-contact .wrap { grid-template-columns:1fr; gap:28px; }
 .audit-headline { font-size:clamp(29px,7vw,38px); }
 .audit-hero h1 { font-size:17px; }
 .audit-hero .lede br { display:none; }
 .audit-overview > img { height:120px; }
 .audit-overview-body { padding:20px; }
 .audit-detail .deliverables li { grid-template-columns:1fr; gap:8px; padding:22px 0; }
 .audit-detail .deliverables .span-2 { padding:20px; }
 .audit-detail .rail { grid-template-columns:1fr; gap:0; }
 .audit-detail .rail li { position:relative; padding:18px 0 18px 36px; border-bottom:1px solid var(--line); }
 .audit-detail .rail li::before { position:absolute; left:0; top:20px; }
 .audit-detail .fit-grid { grid-template-columns:1fr; gap:18px; }
 .audit-detail .fit-col { padding:20px; }
 .audit-person-profile { grid-template-columns:72px 1fr; gap:16px; }
 .audit-person-profile > img { width:72px; height:72px; }
 .audit-detail .report-preview { padding:6px; }
 .audit-contact .btn { font-size:13px; padding-inline:16px; }
}

/* Self-checklist storefront: scoped to this product page. */
.checklist-detail { --bg:#FCFBF8; --surface:#FFFFFF; --surface-2:#F5F0EA; --text:#252521; --text-2:#53534D; --muted:#6B6B63; --line:#E8E6DF; --line-strong:#D8D6CD; --accent:#C4472D; --accent-strong:#A43520; --accent-text:#A43520; --accent-text-hover:#822A1A; --brand-wash:#FAF1EC; --brand-line:#E8CFC3; }
.checklist-detail section[id] { scroll-margin-top:90px; }
.checklist-detail h2 { font-size:clamp(25px,3vw,36px); line-height:1.65; }
.checklist-detail .note { font-size:12px; color:var(--text-2); line-height:1.9; }
.checklist-hero { padding-top:28px; }
.checklist-hero-grid { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:48px; margin-top:30px; }
.checklist-hero h1 { font-size:17px; margin-top:12px; }
.checklist-headline { font-size:clamp(29px,3.2vw,41px); font-weight:700; line-height:1.6; letter-spacing:-.025em; margin-top:20px; }
.checklist-headline > span { color:var(--accent-text); }
.checklist-hero .lede { font-size:15px; line-height:2; margin-top:20px; }
.checklist-highlights { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:20px; font-size:13px; color:var(--accent-text); }
.checklist-hero .hero-cta { align-items:center; gap:20px; margin-top:26px; }
.checklist-hero .btn { gap:20px; font-size:14px; }
.checklist-hero .note { margin-top:14px; }
.checklist-product { background:var(--brand-wash); }
.checklist-product > img { width:100%; height:auto; }
.checklist-product figcaption { padding:28px; }
.checklist-product figcaption > span { color:var(--accent-text); font-size:12px; }
.checklist-product figcaption p { font-size:22px; font-weight:500; margin-top:10px; }
.checklist-product figcaption div { font-size:12px; margin-top:12px; color:var(--text-2); }
.checklist-detail #checklist-fit { padding-top:0; }
.checklist-detail .problems { background:transparent; border:0; gap:12px 26px; }
.checklist-detail .problems li { background:transparent; padding:18px 0 18px 22px; border-bottom:1px solid var(--line); }
.checklist-detail .problems li::before { left:0; top:32px; }
.checklist-detail #checklist-contents { background:#FBF3ED; }
.checklist-detail .deliverables { grid-template-columns:1fr; background:transparent; border:0; gap:0; }
.checklist-detail .deliverables li { display:grid; grid-template-columns:1fr 1.1fr; gap:26px; background:transparent; padding:24px 0; border-top:1px solid var(--brand-line); }
.checklist-detail .deliverables .term { font-size:17px; color:var(--accent-text); }
.checklist-detail .deliverables .desc { font-size:15px; line-height:1.95; color:var(--text-2); }
.checklist-detail .deliverables .span-2 { background:var(--surface); padding:24px; border-top:0; }
.checklist-detail .rail { background:transparent; border-top:1px solid var(--brand-line); gap:22px; counter-reset:checkstep; }
.checklist-detail .rail li { counter-increment:checkstep; padding:22px 0; }
.checklist-detail .rail li::before { content:'0' counter(checkstep); display:block; color:var(--accent-text); font-size:12px; margin-bottom:12px; }
.checklist-detail .rail .detail { font-size:14px; color:var(--text-2); line-height:1.9; }
.checklist-detail #checklist-price { background:var(--surface-2); }
.checklist-detail .price-block { border-top:2px solid var(--brand-line); }
.checklist-detail .price-block .amount { color:var(--accent-text); }
.checklist-detail .price-block .amount-sub { color:var(--text-2); font-size:14px; }
.checklist-detail .faq-list { max-width:900px; }
.checklist-detail .faq-item { padding:24px 0; border-bottom:1px solid var(--line); }
.checklist-detail .faq-item h3 { font-size:17px; color:var(--accent-text); }
.checklist-detail .faq-item p { color:var(--text-2); font-size:15px; line-height:1.95; margin-top:10px; }
.checklist-contact { background:var(--brand-wash); border-top:1px solid var(--brand-line); }
.checklist-contact .wrap { display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; }
.checklist-contact p { margin-top:18px; color:var(--text-2); }
.checklist-contact .btn { display:flex; justify-content:center; }
@media(max-width:760px) {
 .checklist-detail section { padding-block:44px; }
 .checklist-detail .checklist-hero { padding-top:22px; }
 .checklist-hero-grid,.checklist-contact .wrap { grid-template-columns:1fr; gap:28px; }
 .checklist-headline { font-size:clamp(28px,6.6vw,36px); }
 .checklist-product figcaption { padding:22px; }
 .checklist-product figcaption p { font-size:20px; }
 .checklist-detail .deliverables li { grid-template-columns:1fr; gap:8px; }
 .checklist-detail .rail { grid-template-columns:1fr; gap:0; }
 .checklist-detail .rail li { position:relative; padding:18px 0 18px 34px; border-bottom:1px solid var(--line); }
 .checklist-detail .rail li::before { position:absolute; left:0; top:20px; }
}

.checklist-detail .checklist-product { padding:28px 24px 0; }
.checklist-detail .checklist-product > img { width:240px; max-width:100%; height:auto; margin:auto; box-shadow:0 10px 24px rgba(72,48,34,.12); }
.checklist-detail .checklist-product figcaption { padding-inline:0; }
.checklist-sample-list { list-style:none; padding:0; display:grid; gap:16px; }
.checklist-sample-list li { position:relative; padding:22px 24px 22px 58px; background:var(--brand-wash); }
.checklist-sample-list li::before { content:''; position:absolute; left:24px; top:28px; width:16px; height:16px; border:1px solid var(--accent-text); }
.checklist-sample-list li > span { color:var(--accent-text); font-size:12px; }
.checklist-sample-list li > p { font-size:16px; margin-top:8px; line-height:1.9; }
.checklist-sample .note { margin-top:20px; }
@media(max-width:760px) { .checklist-detail .checklist-product > img { width:190px; } .checklist-sample-list li { padding:20px 18px 20px 46px; } .checklist-sample-list li::before { left:18px; top:25px; width:13px; height:13px; } .checklist-sample-list li > p { font-size:15px; } }

/* One-page review: shared detail-page foundation with scoped examples/comparison. */
.review-overview-top { background:var(--brand-wash); color:var(--accent-text); padding:22px 28px; font-size:13px; }
.review-detail #review-fit { padding-top:0; }
.review-detail #review-scope,.review-detail #review-price { background:#FBF3ED; }
.review-detail .deliverables .span-2 .term { color:var(--text); }
.review-example-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:40px; align-items:center; margin-bottom:24px; }
.review-example-page { padding:32px; background:var(--brand-wash); text-align:center; }
.review-example-page > span { font-size:12px; color:var(--text-2); }
.review-before,.review-after { padding:14px 18px; margin:20px 0 0; font-size:16px; border-radius:3px; }
.review-before { background:var(--surface); border:1px solid var(--line-strong); color:var(--text-2); }
.review-example-arrow { color:var(--accent-text); margin-top:14px; }
.review-after { background:var(--accent-strong); color:var(--on-accent); margin-top:14px; }
.review-example-page .note { margin-top:18px; }
.review-example-notes { margin:0; }
.review-example-notes > div { padding:16px 0; border-bottom:1px solid var(--line); }
.review-example-notes dt { color:var(--accent-text); font-size:13px; font-weight:500; }
.review-example-notes dd { margin:8px 0 0; font-size:15px; color:var(--text-2); line-height:1.95; }
.review-comparison { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.review-comparison article { padding:28px; border-top:2px solid var(--brand-line); background:var(--surface-2); display:flex; flex-direction:column; }
.review-comparison article:first-child { background:var(--brand-wash); }
.review-comparison h3 { font-size:21px; margin-top:12px; }
.review-comparison-price { color:var(--accent-text); font-size:30px; margin-top:14px; }
.review-comparison dl { margin:20px 0 24px; font-size:14px; }
.review-comparison dl > div { padding:12px 0; border-top:1px solid var(--line-strong); }
.review-comparison dt { font-size:12px; color:var(--muted); }
.review-comparison dd { margin:5px 0 0; color:var(--text-2); }
.review-comparison .arrow-link { margin-top:auto; font-size:13px; }
@media(max-width:760px) {
 .review-detail .audit-headline { font-size:clamp(29px,7vw,38px); }
 .review-example-grid,.review-comparison { grid-template-columns:1fr; gap:22px; }
 .review-example-page,.review-comparison article { padding:22px; }
 .review-comparison h3 { font-size:20px; }
}

/* White-label service: shared detail foundation, clear ownership and scope. */
.whitelabel-detail #partner-needs { padding-top:0; }
.whitelabel-detail #partner-scope,.whitelabel-detail #partner-pricing { background:#FBF3ED; }
.whitelabel-detail .audit-hero h1 { font-size:18px; }
.whitelabel-price { font-size:30px; color:var(--accent-text); font-weight:500; margin-top:12px; }
.whitelabel-detail .price-block .amount { font-size:clamp(26px,3vw,38px); white-space:normal; }
.whitelabel-roles { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:32px; }
.whitelabel-roles > div { padding:26px; background:var(--brand-wash); }
.whitelabel-roles > div > span { color:var(--accent-text); font-size:12px; }
.whitelabel-roles h3 { font-size:23px; margin-top:12px; }
.whitelabel-roles p { color:var(--text-2); font-size:15px; margin-top:12px; line-height:1.95; }
.whitelabel-detail .fit-col > p { color:var(--text-2); font-size:15px; line-height:1.95; margin-top:16px; }
@media(max-width:760px) {
 .whitelabel-detail .audit-hero h1 { font-size:16px; }
 .whitelabel-detail .audit-headline { font-size:clamp(30px,7.5vw,40px); }
 .whitelabel-roles { grid-template-columns:1fr; gap:16px; }
 .whitelabel-roles > div { padding:22px; }
 .whitelabel-roles h3 { font-size:21px; }
}

/* Preserve the full office composition so the person is not cropped. */
.whitelabel-detail .audit-overview > img {
  width:100%;
  height:auto;
  aspect-ratio:1536 / 658;
  object-fit:contain;
  filter:brightness(1.3) contrast(.92);
}

/* Compact social links beside the homepage practitioner profile. */
.profile-social { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:12px; }
.profile-social a { display:inline-flex; align-items:center; gap:7px; min-height:44px; color:var(--text-2); font-size:12px; text-decoration:none; transition:color .2s; }
.profile-social a:hover { color:var(--accent-text); }
.profile-social a:focus-visible { outline:2px solid var(--accent-text); outline-offset:3px; border-radius:2px; }
.profile-social svg { flex-shrink:0; }
@media(prefers-reduced-motion:reduce) { .profile-social a { transition:none; } }

/* Shared navigation: desktop disclosure, expanded service links on mobile. */
.nav-services { position:relative; }
.nav-services summary { display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; font-size:14px; font-weight:500; min-height:44px; }
.nav-services summary::-webkit-details-marker { display:none; }
.nav-services summary:focus-visible { outline:2px solid var(--accent-text); outline-offset:4px; }
.nav-services[open] summary > span { transform:rotate(180deg); }
.nav-service-list { position:absolute; top:calc(100% + 10px); right:0; width:360px; padding:12px; background:var(--surface); border:1px solid var(--line); box-shadow:0 12px 30px rgba(45,35,25,.1); }
.site-nav .nav-service-list a { display:block; white-space:normal; padding:12px; border-radius:3px; }
.nav-service-list a:hover { background:var(--surface-2); }
.nav-service-list small { display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:3px; }
.site-nav .nav-contact { background:var(--accent); color:var(--on-accent); padding:10px 18px; border-radius:3px; }
.site-nav .nav-contact:hover { background:var(--accent-strong); color:var(--on-accent); }
.footer-organized > .wrap { display:grid; grid-template-columns:1.1fr 1.4fr .8fr; gap:40px; align-items:start; }
.footer-organized nav { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.footer-organized nav h2 { font-size:13px; color:var(--text); margin-bottom:12px; }
.footer-organized nav a { display:block; padding:8px 0; font-size:13px; min-height:40px; }
.footer-organized nav small { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
.footer-organized .footer-email { display:inline-block; padding:12px 0; margin-top:10px; font-size:13px; }
.footer-organized .profile-social { flex-direction:row; flex-wrap:wrap; gap:4px 16px; margin-top:2px; }
.footer-organized .profile-social a { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:12px; }
.footer-organized .copyright { margin-top:18px; }
@media(max-width:900px) {
 .site-header .site-nav { max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; }
 .nav-services summary { pointer-events:none; font-size:12px; color:var(--muted); padding-top:8px; }
 .nav-services summary > span { display:none; }
 .nav-service-list { position:static; width:auto; padding:0; border:0; box-shadow:none; background:transparent; }
 .site-nav .nav-service-list a { padding:10px 0; font-size:14px; }
 .nav-service-list small { font-size:11px; }
 .site-nav .nav-contact { text-align:center; margin:8px 0; }
 .site-nav .lang-switch { align-self:flex-start; padding:8px 14px; }
}
@media(max-width:680px) {
 .footer-organized > .wrap { grid-template-columns:1fr; gap:28px; }
 .footer-organized .footer-brand { grid-row:3; border-top:1px solid var(--line); padding-top:24px; }
}

/* Mission-first additions: retain the existing editorial palette and imagery. */
.home-editorial .hero-refined .mission-title { font-size:clamp(32px,3.55vw,51px); line-height:1.5; letter-spacing:-.035em; }
.home-editorial .brand-split { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,6vw,80px); align-items:start; }
.home-editorial .brand-split h2 { margin-top:18px; font-size:clamp(25px,2.6vw,36px); line-height:1.75; }
.home-editorial .brand-philosophy,.home-editorial .brand-fit { background:var(--surface-2); }
.home-editorial .brand-prose { font-size:15px; line-height:2.1; color:var(--text-2); }
.home-editorial .brand-prose p + p { margin-top:22px; }
.home-editorial .brand-principle { font-size:clamp(20px,2vw,26px); color:var(--accent-text); font-weight:700; }
.home-editorial .brand-problem { padding-bottom:0; }
.home-editorial .brand-values { list-style:none; padding:0; margin:0; }
.home-editorial .brand-values li { padding:20px 0; border-bottom:1px solid var(--line-strong); font-size:16px; line-height:1.8; }
.home-editorial .brand-values li:first-child { border-top:1px solid var(--line-strong); }
.home-editorial .brand-steps { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
.home-editorial .brand-steps li { border-top:2px solid var(--brand-line); padding-top:20px; }
.home-editorial .brand-steps li > span { color:var(--accent-text); font-size:12px; }
.home-editorial .brand-steps h3 { font-size:18px; line-height:1.8; margin-top:16px; }
.home-editorial .brand-steps p { color:var(--text-2); font-size:14px; line-height:2; margin-top:12px; }
.home-editorial .about-perspective { border-top:1px solid var(--line-strong); padding-top:24px; margin-top:28px; }
.home-editorial .about-perspective h3 { font-size:21px; font-weight:500; }
.home-editorial .about-perspective h3 span { display:block; font-size:11px; color:var(--muted); margin-bottom:3px; }
.home-editorial .about-perspective p { font-size:12px; line-height:1.9; color:var(--text-2); margin-top:8px; }
@media(max-width:1000px) { .home-editorial .brand-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
 .home-editorial .brand-split { grid-template-columns:1fr; gap:28px; }
 .home-editorial .hero-refined .mission-title { font-size:clamp(29px,7.4vw,44px); }
 .home-editorial .brand-prose { font-size:14px; }
 .home-editorial .brand-values li { font-size:15px; }
 .home-editorial .philosophy-break { display:none; }
}
@media(max-width:480px) { .home-editorial .brand-steps { grid-template-columns:1fr; } }
@media(max-width:760px) {
 .home-editorial .service-option { min-width:0; grid-template-columns:minmax(0,1fr); }
 .home-editorial .service-option > * { min-width:0; }
 .home-editorial .service-link { white-space:normal; }
 .review-detail .audit-hero-grid { grid-template-columns:minmax(0,1fr); }
 .review-detail .audit-hero .btn { max-width:100%; white-space:normal; font-size:13px; padding-inline:16px; gap:12px; }
}

/* A quieter first view, with the mission as the primary visual. */
.home-editorial .hero-mission { padding-block:76px 88px; }
.home-editorial .hero-mission .hero-inner { grid-template-columns:minmax(0,1fr) minmax(180px,240px); gap:48px; align-items:center; }
.home-editorial .hero-mission .hero-copy { min-width:0; padding-block:0; }
.home-editorial .hero-mission .hero-eyebrow { margin-bottom:30px; font-size:13px; letter-spacing:.06em; }
.home-editorial .hero-mission .mission-title { font-size:clamp(32px,3.4vw,49px); line-height:1.65; letter-spacing:-.04em; }
.home-editorial .hero-mission .mission-line { display:block; }
.home-editorial .hero-mission .lede { max-width:40em; margin-top:28px; font-size:15px; line-height:2.1; }
.home-editorial .hero-mission .hero-cta { margin-top:32px; }
.home-editorial .hero-mission .hero-media { min-height:0; height:300px; width:100%; align-self:center; margin:0; }
.home-editorial .hero-mission .hero-media > img { object-position:53% center; }
@media(max-width:1100px) and (min-width:761px) {
 .home-editorial .hero-mission .hero-inner { grid-template-columns:minmax(0,1fr) 170px; gap:28px; }
 .home-editorial .hero-mission .mission-title { font-size:clamp(27px,3.25vw,35px); }
 .home-editorial .hero-mission .hero-media { height:240px; }
 .home-editorial .hero-mission .lede { font-size:14px; }
 .home-editorial .hero-mission .mission-desktop-break { display:none; }
}
@media(max-width:760px) {
 .home-editorial .hero-mission { padding-block:42px 44px; }
 .home-editorial .hero-mission .hero-inner { grid-template-columns:minmax(0,1fr); gap:32px; }
 .home-editorial .hero-mission .hero-eyebrow { font-size:11px; margin-bottom:24px; }
 .home-editorial .hero-mission .mission-title { font-size:clamp(27px,6.8vw,42px); line-height:1.6; }
 .home-editorial .hero-mission .mission-line { text-wrap:pretty; }
 .home-editorial .hero-mission .lede { font-size:13px; margin-top:22px; }
 .home-editorial .hero-mission .mission-desktop-break { display:none; }
 .home-editorial .hero-mission .hero-cta { margin-top:24px; gap:12px 20px; }
 .home-editorial .hero-mission .hero-media { height:160px; }
 .home-editorial .hero-mission .hero-media > img { object-position:center 52%; }
}

/* Original vector artwork: value travels from Japan, beyond borders. */
.home-editorial .hero-mission .hero-inner { grid-template-columns:minmax(0,1fr) 340px; gap:36px; }
.value-world { margin:0; width:100%; color:var(--accent-text); }
.value-world-art { display:block; width:100%; height:auto; overflow:visible; }
.world-framework { stroke:var(--line-strong); stroke-width:.8; }
.world-stars { fill:var(--line-strong); }
.world-routes { stroke:var(--accent); stroke-width:1.3; stroke-linecap:round; }
.world-route { stroke-dasharray:1; stroke-dashoffset:0; animation:value-travel 3.2s cubic-bezier(.22,.61,.36,1) both; }
.route-west { opacity:.6; animation-delay:.45s; }
.route-south { opacity:.6; animation-delay:.8s; }
.world-destinations { fill:var(--accent); }
.world-origin { fill:var(--accent); }
.world-origin-halo { fill:var(--brand-wash); }
.world-ripple { stroke:var(--accent); stroke-width:.8; opacity:0; transform-box:fill-box; transform-origin:center; animation:value-arrival 1.5s ease-out both; }
.ripple-europe { animation-delay:2.4s; }
.ripple-west { animation-delay:2.8s; }
.ripple-south { animation-delay:3.2s; }
.world-labels { fill:var(--text-2); font-family:Outfit,sans-serif; font-size:9px; letter-spacing:1.8px; }
.value-world figcaption { text-align:center; font-size:11px; color:var(--muted); letter-spacing:.06em; margin-top:10px; }
@keyframes value-travel { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes value-arrival { 0% { opacity:0; transform:scale(.4); } 20% { opacity:.5; } 100% { opacity:0; transform:scale(1.6); } }
@media(max-width:1100px) and (min-width:761px) {
 .home-editorial .hero-mission .hero-inner { grid-template-columns:minmax(0,1fr) 240px; gap:22px; }
}
@media(max-width:900px) and (min-width:761px) {
 .home-editorial .hero-mission .hero-inner { grid-template-columns:minmax(0,1fr) 200px; }
 .home-editorial .hero-mission .mission-title { font-size:25px; }
}
@media(max-width:760px) {
 .home-editorial .hero-mission .hero-inner { grid-template-columns:minmax(0,1fr); gap:22px; }
 .value-world { max-width:280px; justify-self:center; }
 .value-world figcaption { font-size:10px; margin-top:0; }
}
@media(prefers-reduced-motion:reduce) {
 .world-route,.world-ripple { animation:none; }
 .world-route { stroke-dashoffset:0; }
 .world-ripple { opacity:0; }
}

/* Expansive light artwork shared by the Japanese and English homepages. */
.home-editorial .hero-light { position:relative; isolation:isolate; overflow:hidden; background:#faf7f0; padding-block:64px 42px; }
.hero-light-backdrop { position:absolute; z-index:-2; inset:-7%; background:url('assets/hero-light-v2.jpg') center center / cover no-repeat; animation:hero-light-drift 16s ease-in-out infinite alternate; }
.home-editorial .hero-light::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg,rgba(252,250,245,.88) 0%,rgba(252,250,245,.55) 39%,rgba(252,250,245,0) 73%); pointer-events:none; }
.home-editorial .hero-light .hero-inner { min-height:530px; grid-template-columns:minmax(0,1fr) 320px; align-items:start; gap:32px; }
.home-editorial .hero-light .hero-copy { padding-top:4px; }
.home-editorial .hero-light .value-world { align-self:end; padding-bottom:0; }
.home-editorial .hero-light .world-framework { stroke:#b8ad9d; }
.home-editorial .hero-light .value-world figcaption { color:#625b51; }
.home-editorial .hero-light .hero-consult { color:var(--accent-text); border-color:#b9aa9b; }
@keyframes hero-light-arrive { from { transform:translate3d(-.8%,.5%,0) scale(1.025); opacity:.65; } to { transform:translate3d(0,0,0) scale(1); opacity:1; } }
@media(max-width:1100px) and (min-width:761px) {
 .home-editorial .hero-light .hero-inner { grid-template-columns:minmax(0,1fr) 230px; gap:24px; min-height:500px; }
}
@media(max-width:900px) and (min-width:761px) {
 .home-editorial .hero-light .hero-inner { grid-template-columns:minmax(0,1fr) 200px; gap:20px; }
}
@media(max-width:760px) {
 .home-editorial .hero-light { padding-block:38px 30px; }
 .home-editorial .hero-light .hero-inner { grid-template-columns:minmax(0,1fr); min-height:0; gap:14px; }
 .hero-light-backdrop { background-position:62% center; }
 .home-editorial .hero-light::before { background:linear-gradient(180deg,rgba(252,250,245,.93) 0%,rgba(252,250,245,.82) 46%,rgba(252,250,245,.12) 80%); }
 .home-editorial .hero-light .value-world { width:220px; max-width:100%; justify-self:end; }
 .home-editorial .hero-light .hero-copy { padding-top:0; }
}
@media(prefers-reduced-motion:reduce) { .hero-light-backdrop { animation:none; transform:none; opacity:1; } }

/* Slow layered movement, with an accessible pause control. */
.hero-light-backdrop::after { content:""; position:absolute; inset:-15%; pointer-events:none; background:radial-gradient(ellipse at 65% 55%,rgba(255,251,224,.72),rgba(255,239,215,.18) 26%,transparent 56%); animation:hero-light-glow 11s ease-in-out infinite alternate; }
@keyframes hero-light-drift { from { transform:translate3d(-2%,-1%,0) scale(1.025); } to { transform:translate3d(2%,1.5%,0) scale(1.065); } }
@keyframes hero-light-glow { from { transform:translate3d(-9%,3%,0) scale(.92); opacity:.25; } to { transform:translate3d(9%,-4%,0) scale(1.08); opacity:.85; } }
.light-motion-toggle { position:absolute; z-index:2; right:24px; bottom:10px; border:0; border-bottom:1px solid #a99c8d; border-radius:0; padding:5px 2px; background:transparent; color:#625b51; font:inherit; font-size:11px; cursor:pointer; }
.light-motion-toggle:hover { color:var(--accent-text); }
.light-motion-toggle:focus-visible { outline:2px solid var(--accent-text); outline-offset:3px; }
.hero-light.is-motion-paused .hero-light-backdrop,.hero-light.is-motion-paused .hero-light-backdrop::after { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) {
 .hero-light-backdrop,.hero-light-backdrop::after { animation:none; transform:none; }
 .hero-light-backdrop::after { opacity:.3; }
 .light-motion-toggle { display:none; }
}

/* The globe belongs with our Japan × Europe perspective. */
.home-editorial .hero-light .hero-inner { grid-template-columns:minmax(0,1fr); }
.home-editorial .hero-light .hero-copy { max-width:920px; }
.about-mktory-heading .about-world { width:min(100%,300px); margin-top:24px; }
.about-world .world-framework { stroke:#b8ad9d; }
.js .about-world:not(.is-world-visible) .world-route,
.js .about-world:not(.is-world-visible) .world-ripple { animation-play-state:paused; }
@media(max-width:760px) {
 .about-mktory-heading .about-world { width:min(100%,240px); margin:20px auto 0; }
}

/* Keep the Japanese tagline on one line, with no hero CTAs. */
.home-editorial .hero-light .tagline-single-line { white-space:nowrap; font-size:clamp(25px,3.4vw,49px); }
@media(max-width:760px) {
 .home-editorial .hero-light .tagline-single-line { font-size:clamp(16px,5vw,37px); letter-spacing:-.045em; }
}

/* Balance the desktop copy within the full-width visual. */
@media(min-width:761px) {
 .home-editorial .hero-light { padding-block:42px 64px; }
 .home-editorial .hero-light .hero-inner { align-items:center; }
 .home-editorial .hero-light .hero-copy { padding-top:0; transform:translateY(-18px); }
}

/* Three connected areas of client support. */
.home-editorial .business-overview { background:var(--bg); scroll-margin-top:90px; }
.business-heading { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; margin-bottom:48px; }
.business-heading h2 { margin-top:18px; font-size:clamp(28px,3vw,40px); line-height:1.6; letter-spacing:-.02em; }
.business-heading > p { font-size:15px; line-height:2; color:var(--text-2); max-width:36em; }
.business-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; }
.business-item { display:flex; flex-direction:column; min-width:0; border-top:1px solid var(--line-strong); padding:28px 0 36px; scroll-margin-top:100px; }
.business-item-top { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:10px; }
.business-index { font-size:12px; letter-spacing:.03em; color:var(--accent-text); }
.business-symbol { width:60px; height:60px; flex-shrink:0; stroke:var(--accent-text); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.business-item h3 { font-size:clamp(22px,2vw,27px); line-height:1.5; letter-spacing:-.02em; }
.business-benefit { font-size:16px; font-weight:500; margin-top:12px; line-height:1.8; }
.business-description { color:var(--text-2); font-size:14px; line-height:2; margin-top:14px; }
.business-scope { font-size:11px; color:var(--muted); line-height:1.9; margin:18px 0 24px; }
.business-bottom { margin-top:auto; }
.business-link { display:inline-flex; align-items:center; gap:24px; font-size:13px; min-height:44px; text-decoration:none; color:var(--accent-text); border-bottom:1px solid var(--brand-line); transition:color .2s,border-color .2s; }
.business-link:hover { color:var(--accent-text-hover); border-color:currentColor; }
.business-link:focus-visible,.business-secondary a:focus-visible { outline:2px solid var(--accent-text); outline-offset:4px; }
.business-secondary { display:flex; flex-wrap:wrap; gap:4px 20px; margin-top:12px; }
.business-secondary a { display:inline-flex; align-items:center; min-height:36px; font-size:11px; color:var(--text-2); text-underline-offset:4px; }
.business-note { border-top:1px solid var(--line-strong); padding-top:24px; margin-top:4px; color:var(--text-2); font-size:13px; line-height:1.9; }
@media(max-width:760px) {
 .business-heading { grid-template-columns:minmax(0,1fr); gap:22px; margin-bottom:32px; }
 .business-heading > p { font-size:14px; }
 .business-grid { grid-template-columns:minmax(0,1fr); gap:0; }
 .business-item { padding-block:22px 30px; }
 .business-symbol { width:48px; height:48px; }
 .business-item h3 { font-size:22px; }
 .business-description { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .business-link { transition:none; } }

/* Present the three services together on wide screens. */
@media(min-width:1101px) {
 .business-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; }
 .business-item h3 { font-size:22px; min-height:3em; }
 .business-bottom { min-height:100px; }
 .business-link { gap:16px; }
}
@media(min-width:761px) and (max-width:1100px) {
 .business-grid { grid-template-columns:minmax(0,1fr); }
 .business-item { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); column-gap:36px; }
 .business-item-top { grid-column:1 / -1; }
 .business-item h3 { grid-column:1; }
 .business-benefit { grid-column:1; grid-row:3; }
 .business-description { grid-column:2; grid-row:2 / 4; margin-top:0; }
 .business-scope { grid-column:2; }
 .business-bottom { grid-column:2; }
}


/* A shared light field closes the homepage, fading gently behind footer links. */
.home-editorial .closing-light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #faf7f0;
}
.closing-light-art {
  position: absolute;
  z-index: -2;
  inset: -5%;
  pointer-events: none;
  background: url('assets/hero-light-v2.jpg') 65% center / cover no-repeat;
  opacity: .88;
  transform: scaleY(-1);
  animation: closing-light-breathe 22s ease-in-out infinite alternate;
}
.closing-light-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 78% 35%, rgba(255, 249, 213, .75), transparent 55%);
}
.closing-light::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--bg) 0, rgba(252, 251, 248, .9) 48px, rgba(252, 251, 248, .45) 110px, transparent 200px),
    linear-gradient(180deg, rgba(250, 247, 240, .12) 0%, rgba(250, 247, 240, .06) 38%, rgba(250, 247, 240, .76) 70%, #faf7f0 100%),
    linear-gradient(100deg, rgba(250, 247, 240, .9) 0%, rgba(250, 247, 240, .65) 45%, rgba(250, 247, 240, .18) 100%);
}
.home-editorial .closing-light .contact-finale {
  position: relative;
  background: transparent;
  border: 0;
  padding-block: clamp(88px, 8vw, 120px) clamp(80px, 7vw, 104px);
}
.home-editorial .closing-light .site-footer {
  background: transparent;
  border-top: 0;
  padding-top: 0;
}
.closing-light .footer-organized > .wrap {
  border-top: 1px solid rgba(169, 156, 141, .24);
  padding-top: clamp(36px, 4vw, 56px);
}
.closing-light.is-motion-paused .closing-light-art { animation-play-state: paused; }
@keyframes closing-light-breathe {
  from { transform: translate3d(-.6%, .4%, 0) scale(1.015, -1.015); opacity: .75; }
  to { transform: translate3d(.6%, -.6%, 0) scale(1.045, -1.045); opacity: .95; }
}
@media (max-width: 760px) {
  .closing-light-art { background-position: 76% center; }
  .closing-light::after {
    background:
      linear-gradient(180deg, var(--bg) 0, rgba(252, 251, 248, .85) 40px, rgba(252, 251, 248, .35) 96px, transparent 160px),
      linear-gradient(180deg, rgba(250, 247, 240, .93) 0%, rgba(250, 247, 240, .65) 24%, rgba(250, 247, 240, .56) 44%, rgba(250, 247, 240, .9) 68%, #faf7f0 100%);
  }
  .home-editorial .closing-light .contact-finale { padding-block: 64px 72px; }
  .closing-light .light-motion-toggle { right: 20px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .closing-light-art { animation: none; opacity: .85; }
}


/* Business: downward light; shared values: upward light. */
.home-editorial .brand-philosophy { background: var(--bg); }
.home-editorial .brand-fit,
.home-editorial .business-overview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
}
.home-editorial .brand-fit::before,
.home-editorial .brand-fit::after,
.home-editorial .business-overview::before,
.home-editorial .business-overview::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 24%, #000 70%, transparent);
}
.home-editorial .brand-fit::before {
  background: url('assets/hero-light-v2.jpg') center 58% / cover no-repeat;
  opacity: .24;
}
.home-editorial .brand-fit::after {
  background:
    linear-gradient(100deg, rgba(252, 251, 248, .15), rgba(252, 251, 248, .48) 58%, rgba(252, 251, 248, .35)),
    radial-gradient(ellipse at 18% 54%, rgba(255, 232, 195, .23), transparent 65%);
}
.home-editorial .business-overview::before {
  inset: 0;
  background: url('assets/hero-light-v2.jpg') 85% 48% / cover no-repeat;
  transform: scaleY(-1);
  opacity: .2;
}
.home-editorial .business-overview::after {
  background:
    linear-gradient(95deg, rgba(252, 251, 248, .12), rgba(252, 251, 248, .7) 48%, rgba(252, 251, 248, .34)),
    radial-gradient(ellipse at 4% 48%, rgba(248, 213, 188, .26), transparent 60%),
    radial-gradient(ellipse at 96% 65%, rgba(255, 234, 184, .23), transparent 52%);
}
/* Let the first light field fade into the philosophy section, too. */
.home-editorial .hero-light::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 90px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg));
}
@media (max-width: 760px) {
  .home-editorial .brand-fit::before {
    background-position: 56% center;
    opacity: .19;
  }
  .home-editorial .business-overview::before {
    background-position: 76% center;
    opacity: .16;
  }
  .home-editorial .brand-fit::after {
    background: radial-gradient(ellipse at 0% 44%, rgba(255, 233, 205, .28), transparent 75%);
  }
  .home-editorial .business-overview::after {
    background: radial-gradient(ellipse at 100% 57%, rgba(250, 221, 186, .3), transparent 72%);
  }
  .home-editorial .hero-light::after { height: 56px; }
}