/* style.css — Sobazukin 共通スタイル
   世界観「やさしく包み込む闇と、激しく貫く光」を全ページで共有する。
   色・フォント・余白・動きは必ず tokens.css の変数を使う（直接 #xxxxxx を書かない）。
   ルールの根拠: brand/design-guidelines.md */

/* 書体（Noto 二刀流＝闇=明朝 / 光=サンセリフ）は各HTMLの <link> で読み込む（描画ブロッキング回避） */
@import "tokens.css";

/* === 基本 === */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void); }
body {
  margin: 0;
  background: var(--night);
  color: var(--starlight);
  font-family: var(--font-sans);
  line-height: var(--leading);
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  /* 日本語の不自然な改行を抑える：文節区切りで折り、行末の孤立文字を避ける */
  word-break: auto-phrase;
  text-wrap: pretty;
}
::selection { background: var(--beam-soft); color: var(--starlight); }

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* === ヘッダー（全ページ共通） === */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-4);
  background: color-mix(in srgb, var(--void) 78%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .brand {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem;
  color: var(--starlight); text-decoration: none; letter-spacing: .06em;
}
.site-nav { display: flex; gap: var(--space-6); }
.site-nav a {
  position: relative; color: var(--muted); text-decoration: none; font-size: .9375rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px;
  background: var(--beam); transition: width var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--starlight); }
.site-nav a:hover::after { width: 100%; }
.site-nav a:focus-visible { outline: 2px solid var(--beam); outline-offset: 4px; border-radius: 2px; }

/* === ヒーロー（署名）：夜空 → 夜明けの道 ＋ 貫く光 === */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex; flex-direction: column; justify-content: center;
  /* 宇宙（夢想）＝旅の最上部。地の色はページ全体の journey が担うため透過。星雲だけ重ねる */
  background:
    radial-gradient(42% 32% at 20% 30%, rgba(110,139,255,.12), transparent 62%),
    radial-gradient(38% 30% at 80% 20%, rgba(124,92,192,.14), transparent 62%),
    radial-gradient(30% 24% at 62% 40%, rgba(77,160,200,.08), transparent 62%),
    transparent;
  padding: var(--space-20) 0;
  overflow: hidden;
  text-align: left;
}
.hero > .container { position: relative; z-index: 2; }

/* 星空（CSSのみ・画像不要）。上方に密、夜明け側(下)は疎。夢想＝豊かに煌めく */
.stars { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 14%, var(--starlight),   transparent 60%),
    radial-gradient(1px 1px   at 19% 9%,  color-mix(in srgb, var(--starlight) 70%, transparent),  transparent 60%),
    radial-gradient(1px 1px   at 22% 26%, color-mix(in srgb, var(--starlight) 70%, transparent),  transparent 60%),
    radial-gradient(1.3px 1.3px at 28% 18%, color-mix(in srgb, var(--starlight) 85%, transparent), transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 8%,  color-mix(in srgb, var(--starlight) 90%, transparent),  transparent 60%),
    radial-gradient(1px 1px   at 40% 30%, color-mix(in srgb, var(--starlight) 60%, transparent),  transparent 60%),
    radial-gradient(1px 1px   at 44% 16%, color-mix(in srgb, var(--starlight) 65%, transparent), transparent 60%),
    radial-gradient(1.6px 1.6px at 52% 11%, var(--starlight),   transparent 60%),
    radial-gradient(1px 1px   at 58% 24%, color-mix(in srgb, var(--starlight) 60%, transparent),  transparent 60%),
    radial-gradient(1.2px 1.2px at 63% 7%,  color-mix(in srgb, var(--starlight) 85%, transparent), transparent 60%),
    radial-gradient(1px 1px   at 67% 30%, color-mix(in srgb, var(--starlight) 60%, transparent),  transparent 60%),
    radial-gradient(1.4px 1.4px at 74% 15%, color-mix(in srgb, var(--starlight) 90%, transparent),  transparent 60%),
    radial-gradient(1px 1px   at 80% 27%, color-mix(in srgb, var(--starlight) 60%, transparent),  transparent 60%),
    radial-gradient(1.2px 1.2px at 86% 12%, color-mix(in srgb, var(--starlight) 80%, transparent),  transparent 60%),
    radial-gradient(1px 1px   at 92% 22%, color-mix(in srgb, var(--starlight) 60%, transparent),  transparent 60%),
    radial-gradient(1px 1px   at 7%  34%, color-mix(in srgb, var(--starlight) 55%, transparent), transparent 60%),
    radial-gradient(1.3px 1.3px at 48% 38%, color-mix(in srgb, var(--starlight) 75%, transparent), transparent 60%),
    radial-gradient(1px 1px   at 70% 42%, color-mix(in srgb, var(--starlight) 50%, transparent),  transparent 60%),
    radial-gradient(1px 1px   at 31% 48%, color-mix(in srgb, var(--starlight) 45%, transparent),  transparent 60%),
    radial-gradient(1px 1px   at 90% 47%, color-mix(in srgb, var(--starlight) 45%, transparent),  transparent 60%),
    radial-gradient(1px 1px   at 16% 44%, color-mix(in srgb, var(--starlight) 40%, transparent),  transparent 60%),
    radial-gradient(1px 1px   at 58% 50%, color-mix(in srgb, var(--starlight) 40%, transparent),  transparent 60%);
}
/* 追加レイヤー：細かな星をさらに散らす（夜空の密度アップ） */
.stars::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat;
  background-image:
    radial-gradient(1px 1px at 9% 20%, color-mix(in srgb, var(--starlight) 60%, transparent), transparent 60%),
    radial-gradient(1px 1px at 27% 12%, color-mix(in srgb, var(--starlight) 55%, transparent), transparent 60%),
    radial-gradient(1.2px 1.2px at 37% 22%, color-mix(in srgb, var(--starlight) 70%, transparent), transparent 60%),
    radial-gradient(1px 1px at 46% 9%, color-mix(in srgb, var(--starlight) 50%, transparent), transparent 60%),
    radial-gradient(1px 1px at 55% 17%, color-mix(in srgb, var(--starlight) 55%, transparent), transparent 60%),
    radial-gradient(1.3px 1.3px at 66% 13%, color-mix(in srgb, var(--starlight) 75%, transparent), transparent 60%),
    radial-gradient(1px 1px at 77% 21%, color-mix(in srgb, var(--starlight) 50%, transparent), transparent 60%),
    radial-gradient(1px 1px at 84% 9%, color-mix(in srgb, var(--starlight) 60%, transparent), transparent 60%),
    radial-gradient(1px 1px at 94% 16%, color-mix(in srgb, var(--starlight) 50%, transparent), transparent 60%),
    radial-gradient(1px 1px at 14% 33%, color-mix(in srgb, var(--starlight) 45%, transparent), transparent 60%),
    radial-gradient(1px 1px at 33% 41%, color-mix(in srgb, var(--starlight) 40%, transparent), transparent 60%),
    radial-gradient(1px 1px at 53% 37%, color-mix(in srgb, var(--starlight) 45%, transparent), transparent 60%),
    radial-gradient(1px 1px at 72% 39%, color-mix(in srgb, var(--starlight) 40%, transparent), transparent 60%),
    radial-gradient(1px 1px at 88% 34%, color-mix(in srgb, var(--starlight) 45%, transparent), transparent 60%);
}
/* ひときわ明るく、ゆっくり瞬く星たち（夢想の煌めき） */
.stars b { position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%;
  background: var(--starlight);
  box-shadow: 0 0 7px 2px var(--starlight-soft), 0 0 14px 4px var(--beam-bright-soft);
  animation: twinkle 4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.stars b.lg { width: 3.2px; height: 3.2px;
  box-shadow: 0 0 9px 3px var(--starlight-soft), 0 0 20px 6px var(--beam-bright-soft); }
.stars b.warm { background: var(--star);
  box-shadow: 0 0 8px 2px var(--star-soft), 0 0 16px 5px var(--star-soft); }
@keyframes twinkle { 0%,100%{opacity:.25; transform:scale(.85);} 50%{opacity:1; transform:scale(1.15);} }

/* 流星＝鋭く貫く一条の光（白熱した頭＋グロー）。核動詞「落とす」の象徴・1本のみ */
.hero::before {
  content: ""; position: absolute; top: 19%; left: -18%; width: 72%; height: 1.5px; z-index: 1;
  background: linear-gradient(90deg,
    transparent 0%, transparent 35%, var(--beam) 68%,
    var(--beam-bright) 86%, var(--starlight) 93%, transparent 100%);
  border-radius: 2px;
  filter: drop-shadow(0 0 4px var(--beam)) drop-shadow(0 0 12px var(--beam)) drop-shadow(0 0 3px var(--starlight));
  transform: rotate(-10deg); opacity: 0;
  animation: streak 4.6s var(--ease-out) infinite;
}
@keyframes streak {
  0%, 64% { transform: translateX(0) rotate(-10deg); opacity: 0; }
  67%     { opacity: 1; }
  100%    { transform: translateX(78%) rotate(-10deg); opacity: 0; }
}

/* 朝日：夜明けの先に輝く希望（主役の光は1つ＝朝日。径と暖色面積は控えめに） */
.sunrise { position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%);
  width: 92%; height: 30%; z-index: 1; pointer-events: none;
  background: radial-gradient(40% 64% at 50% 100%,
    color-mix(in srgb, var(--sun-core) 36%, transparent) 0%,
    color-mix(in srgb, var(--sun-warm) 60%, transparent) 26%,
    color-mix(in srgb, var(--dawn) 14%, transparent) 50%, transparent 70%);
}
.sunrise .sun { position: absolute; left: 50%; bottom: -56px; transform: translateX(-50%);
  width: 118px; height: 118px; border-radius: 50%;
  background: radial-gradient(circle, var(--sun-core) 0%, var(--sun-glow) 34%, var(--sun-warm) 60%, transparent 73%);
  animation: sun-rise 7s var(--ease-out) infinite alternate; }
.sunrise .rays { position: absolute; left: 50%; bottom: -90px; transform: translateX(-50%);
  width: 360px; height: 200px;
  background: conic-gradient(from 180deg at 50% 100%,
    transparent 0deg, color-mix(in srgb, var(--sun-glow) 12%, transparent) 8deg, transparent 16deg,
    transparent 28deg, color-mix(in srgb, var(--sun-glow) 9%, transparent) 36deg, transparent 44deg,
    transparent 56deg, color-mix(in srgb, var(--sun-glow) 12%, transparent) 64deg, transparent 72deg);
  -webkit-mask: radial-gradient(60% 100% at 50% 100%, #000 0%, transparent 72%);
          mask: radial-gradient(60% 100% at 50% 100%, #000 0%, transparent 72%);
  opacity: .55; }
@keyframes sun-rise { 0%{ transform:translateX(-50%) translateY(14px); opacity:.85;} 100%{ transform:translateX(-50%) translateY(-8px); opacity:1;} }
.sunrise .sun::after { content:""; position:absolute; inset:-28px; border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sun-glow) 22%, transparent) 0%, transparent 60%); }

/* 朝日へ伸びる一本の道（道のり）。静的な光の筋として残す */
.road { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 54%; height: 36%; z-index: 1; pointer-events: none; overflow: hidden;
  clip-path: polygon(28% 100%, 72% 100%, 53% 0, 47% 0);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--sun-glow) 12%, transparent),
    color-mix(in srgb, var(--sun-warm) 4%, transparent) 55%, transparent 85%); }

.overline {
  font-size: .8125rem; letter-spacing: var(--tracking-wide);
  color: var(--muted); margin: 0 0 var(--space-6);
}
.hero h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.9rem, 6.5vw, 4.5rem); line-height: var(--leading-tight);
  margin: 0; letter-spacing: .04em;
}
.hero h1 .beam { color: var(--beam); } /* 芯のあるシャープな青 */
/* 明るい背景（朝日・光の道）に乗るため lead は --starlight で AA を確保 */
.hero .lead { color: var(--starlight); max-width: 44ch; margin: var(--space-6) 0 0; }
/* ヒーローの「何屋か」を明快に。詩的見出しの直下に、控えめだが読める一行で */
.hero-do { color: var(--muted); font-size: 1.0625rem; letter-spacing: var(--tracking); max-width: 44ch; margin: var(--space-4) 0 0; }
.hero .btns { margin-top: var(--space-8); }

/* === セクション === */
main > section { padding-block: var(--space-32); scroll-margin-top: 112px; }
main > section:first-child { padding-top: var(--space-20); }
.eyebrow {
  font-size: .9375rem; font-weight: 700; letter-spacing: var(--tracking-wide);
  color: var(--beam); margin: 0 0 var(--space-6); text-transform: uppercase;
}
h2 { font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: var(--leading-tight); margin: 0 0 var(--space-8); }
h3 { font-size: 1.25rem; margin: 0 0 var(--space-3); }
h1, h2, h3 { text-wrap: balance; } /* 見出しの行を均す（変な改行を防ぐ） */
.lead-text { color: var(--starlight); font-size: 1.0625rem; max-width: var(--measure); margin: 0; }
.muted { color: var(--muted); }

/* 核ステートメント：明朝の一文を大きく、余白の中に置く（沈黙→疾走） */
.statement {
  text-align: center;
  background:
    radial-gradient(60% 120% at 50% 120%, var(--dawn-glow) 0%, transparent 60%),
    var(--void);
  border-block: 1px solid var(--line);
}
.statement p {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.375rem, 3vw, 2rem); line-height: 1.7;
  max-width: 30ch; margin-inline: auto; letter-spacing: .04em;
}
.statement .sub { font-family: var(--font-sans); font-size: 1rem; color: var(--muted);
  max-width: 46ch; margin: var(--space-6) auto 0; letter-spacing: var(--tracking); }

/* === カード（柱） === */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.card { background: var(--veil); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-8); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card .num { font-family: var(--font-serif); color: var(--beam); font-size: 1.5rem; margin: 0 0 var(--space-3); }
.card p { color: var(--muted); margin: 0; }
.star-dot { color: var(--star); }

/* === 同志リスト（誰と組むか） === */
.creed { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6) var(--space-8); }
.creed li { border-left: 1px solid var(--line-strong); padding-left: var(--space-6); }
.creed b { display: block; font-size: 1.125rem; margin-bottom: var(--space-2); color: var(--starlight); }
.creed span { color: var(--muted); font-size: .9375rem; }

/* === ボタン・リンク === */
.btns { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block; padding: var(--space-3) var(--space-6); border-radius: var(--radius);
  font-weight: 700; text-decoration: none; font-size: .95rem; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out); border: 1px solid transparent;
}
.btn-primary { background: var(--beam); color: var(--void); }
.btn-primary:hover { filter: brightness(1.12); box-shadow: 0 0 0 6px var(--beam-soft); }
.btn-secondary { background: transparent; color: var(--starlight); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--beam); color: var(--beam); }
a.btn:focus-visible { outline: 2px solid var(--beam); outline-offset: 3px; }

a.link { color: var(--beam); text-decoration: none; position: relative; }
a.link::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background: var(--beam); transition: width var(--dur-fast) var(--ease-out); }
a.link:hover::after { width:100%; }
a.link:focus-visible { outline: 2px solid var(--beam); outline-offset: 3px; }

/* === 締めの CTA === */
.cta-end { text-align: center; }
.cta-end h2 { margin-bottom: var(--space-8); }
.cta-end .btns { justify-content: center; }

/* === 作るもの（offer 行） === */
.offer-list { display: grid; }
.offer { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-6); align-items: baseline;
  padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.offer:last-child { border-bottom: 1px solid var(--line); }
.offer .k { font-family: var(--font-serif); color: var(--beam); font-size: 1.125rem; }
.offer h3 { margin: 0 0 var(--space-2); }
.offer p { color: var(--muted); margin: 0; max-width: 56ch; }

/* === プロフィール（屋号・所在地・略歴の事業者概要） === */
.profile { display: grid; gap: var(--space-6); margin: var(--space-8) 0 0; max-width: var(--measure); }
.profile > div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-6); align-items: baseline;
  padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.profile > div:last-child { border-bottom: none; padding-bottom: 0; }
.profile dt { color: var(--muted); font-size: .875rem; letter-spacing: var(--tracking-wide); }
.profile dd { margin: 0; color: var(--starlight); }
.profile dd p { margin: 0; }
.profile dd p + p { margin-top: var(--space-4); }
@media (max-width: 640px) {
  .profile > div { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* === 文章ブロック（about / services 本文） === */
.prose { max-width: 64ch; }
.prose p { color: var(--muted); margin: 0 0 var(--space-6); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--starlight); font-weight: 700; }
.prose .big, .prose.big { font-family: var(--font-serif); color: var(--starlight);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem); line-height: 1.7; }

/* === ステップ（道のり） === */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: var(--space-8); max-width: 64ch; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-6); align-items: baseline; }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-serif); color: var(--beam); font-size: 1.25rem; }
.steps b { display: block; color: var(--starlight); margin-bottom: var(--space-2); font-size: 1.0625rem; }
.steps span { color: var(--muted); }

/* === 大枠の特集カード（専門領域＝ネイティブアプリ開発） === */
.card-feature { padding: var(--space-12); }
.card-feature p { max-width: var(--measure); } /* 本文の行長を全体と揃える */
@media (max-width: 640px) { .card-feature { padding: var(--space-8); } }

/* === スクリーンリーダー用（視覚的に隠す見出し） === */
.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;
}

/* === フッター === */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--void);
  padding-block: var(--space-12);
  color: var(--muted); font-size: .875rem;
}
.site-footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.site-footer .tag { font-family: var(--font-serif); color: var(--starlight); letter-spacing: .04em; }
.site-footer a { color: var(--muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.site-footer a:hover { color: var(--starlight); }
.site-footer a:focus-visible { outline: 2px solid var(--beam); outline-offset: 3px; border-radius: 2px; }

/* === スクロールの旅：夢想(宇宙・上) → 現実(地上・下)（原則7：1ページ構成） === */
/* ページ全体の地を、上から下へ「宇宙→夜明け→地上」のグラデで貫く。
   闇は支配的に保ち、夜明けの暖色は一帯の"帯"として滲ませ、最後は地上の闇に着地する。 */
body.journey {
  /* 冷たい闇(上) → 暖かい夜明け(下) の一方向。明るさは抑え、"色温度"でコントラストを出す
     （解析 video-refs/p0RCsmFAXXY.md の「青→オレンジ」に倣う。闇85%を保ちつつ強い対比） */
  background:
    linear-gradient(to bottom,
      #010207   0%,    /* 最深部の宇宙（ほぼ黒・冷たい）＝コントラスト最大 */
      var(--void) 12%,
      var(--night) 34%,
      #121739   50%,   /* 深い藍（夜の底） */
      #1C1A40   62%,   /* 藍 → 紫 */
      #2A1F45   72%,   /* 夜明け前の紫 */
      #3A2442   80%,   /* 紫から暖色へ転調 */
      #4A2C34   88%,   /* 暖かい闇（夜明けの色温度） */
      #5E382F   100%); /* 地平の暖かい残り火（旅の終着＝色温度の頂点） */
}
/* フッターも地続き（冷たい闇に戻さない）。旅の暖かい地平の上に置く */
body.journey .site-footer { background: transparent; }
/* 旅の途中のセクションは地を透過させ、グラデを見せる */
body.journey .statement { background: transparent; }

/* === 地上（現実）＝旅の最下部。締めのCTAに敷くシーン === */
.ground { position: relative; overflow: hidden; }
.ground > .container { position: relative; z-index: 2; }
.ground .ground-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* 微かな街明かり（動画の「地上の街並み」＝暖色の点を控えめに） */
/* 地上＝夜明けの街並みのシルエット（参考動画の「微かに光る街並み」） */
.ground .skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none; }
.ground .skyline svg { display: block; width: 100%; height: 100%; }

/* === スクロール演出（沈黙→疾走）：下から静かに浮上 === */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* === モーション抑制（必須対応） === */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::before { animation: none; opacity: 0; }
  .stars b { animation: none; opacity: .9; transform: none; }
  .sunrise .sun { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; }
}

/* === レスポンシブ === */
@media (max-width: 640px) {
  /* ブランドを1行目、ナビを2行目に。詰め込まず崩さない */
  .site-header { flex-wrap: wrap; gap: var(--space-3); }
  .site-nav { width: 100%; gap: var(--space-6); }
  .site-nav a { white-space: nowrap; font-size: .875rem; }
  .hero { min-height: 92vh; }
  .creed li { border-left: none; padding-left: 0; border-top: 1px solid var(--line-strong); padding-top: var(--space-4); }
}