/* エイトラボウェブワークス 共通スタイル
   承認済みのデザイン案は docs/デザイン案/index.html。方針は project.md §2〜§3。
   色は必ず :root の変数経由で参照する（生HEXの直書き禁止）。 */

:root {
  --ink: #231815;          /* 墨（ロゴシートの K100）。文字・罫線・ボタン */
  --ink-2: #595757;        /* ロゴタイプの K80。補足の文字 */
  --blue: #008ED1;         /* ロゴの青 */
  --purple: #562283;       /* ロゴの重なりの紫。単色では使わず、下のグラデーションで使う */
  --yellow: #FFD900;       /* マーカーとリンクのホバー専用 */
  --paper: #FFFFFF;
  --rule: #B5B5B6;
  --pale: #F1F1F8;         /* 行ホバーの地 */
  --pale-blue: #E3F2FA;    /* ヒーローの淡い背景（青側） */
  --pale-purple: #EDE7F3;  /* ヒーローの淡い背景（紫側） */
  --alert-bg: #FFF3BF;     /* 未確定プレースホルダ */
  --alert-ink: #7A4B00;

  /* ロゴと同じ、青から紫へのグラデーション。ボタン・行の帯・小見出しの棒に使う */
  --grad: linear-gradient(90deg, var(--blue), var(--purple));
  --grad-v: linear-gradient(180deg, var(--blue), var(--purple));

  --latin: "Avenir Next", "Nunito Sans";
  --body: var(--latin), "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --head: var(--latin), "Noto Sans JP", "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", sans-serif;

  --r: 8px;                /* 角の丸み（少し丸い） */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 少し行き過ぎて戻る */

  --wrap: 1000px;
  --gutter: clamp(20px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1rem; line-height: 1.9; overflow-x: hidden; overflow-wrap: anywhere; }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, .hd { font-family: var(--head); font-weight: 800; line-height: 1.5; }
b, strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
[id] { scroll-margin-top: 24px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: absolute; left: 8px; top: -64px; z-index: 10; padding: 8px 16px; border-radius: var(--r); background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 8px; }
.note { color: var(--ink-2); font-size: 0.875rem; }
.todo { background: var(--alert-bg); color: var(--alert-ink); padding: 0 0.3em; font-weight: 700; }

/* ── マーカー（黄）：画面に入ると左から引かれる ── */
.mk { background: linear-gradient(transparent 58%, var(--yellow) 58%) no-repeat 0 0 / 100% 100%; }
.js .mk { background-size: 0% 100%; transition: background-size 0.7s var(--ease) 0.9s; }
.js .is-in .mk { background-size: 100% 100%; }

/* ── リンク：青い下線。ホバーで黄色が左から塗られる。塗りが文字に貼りつかないよう左右に余白 ── */
a { color: var(--ink); }
.lnk, .prose a, .facts a {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 0.3em;
  padding: 0.2em 0.4em; margin: 0 -0.4em; border-radius: calc(var(--r) / 2);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 0 / 0% 100%; transition: background-size 0.3s var(--ease);
}
.lnk:hover, .lnk:focus-visible, .prose a:hover, .facts a:hover { background-size: 100% 100%; }

/* ── ボタン：墨の角丸。ホバーでグラデーションが差し込み、文字が下から入れ替わる ── */
.act {
  position: relative; display: inline-block; overflow: hidden; padding: 12px 32px; border: 0; border-radius: var(--r);
  background: var(--ink); color: var(--paper); font: inherit; font-weight: 700; line-height: 1.9; text-decoration: none; cursor: pointer; isolation: isolate;
}
.act::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad); transform: translateX(-101%); transition: transform 0.4s var(--ease); }
.act:hover::before, .act:focus-visible::before { transform: none; }
.act__w { display: block; overflow: hidden; }
.act__t { position: relative; display: block; transition: transform 0.4s var(--spring); }
.act__t::after { content: attr(data-t); position: absolute; left: 0; top: 100%; }
.act:hover .act__t, .act:focus-visible .act__t { transform: translateY(-100%); }
.act[disabled] { opacity: 0.6; cursor: progress; }

/* ── 和文の見出しの文字：1文字ずつ下から跳ねて入る ── */
.ln { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.ch { display: inline-block; }
.js .ch { transform: translateY(110%) rotate(12deg); transform-origin: 0 100%; transition: transform 0.65s var(--spring); transition-delay: calc(var(--i) * 30ms); }
.js .is-in .ch { transform: none; }

/* ── 英語の見出しの文字：左から1文字ずつ弾んで出る。色は script.js が1文字ごとに青から紫へ付ける ── */
.pop { display: inline-block; }
.js .pop { transform: scale(0) translateY(0.3em); transform-origin: 50% 100%; opacity: 0; transition: transform 0.5s var(--spring), opacity 0.15s; transition-delay: calc(0.1s + var(--i) * 55ms); }
.js .is-in .pop { transform: none; opacity: 1; }

/* ── 画面に入ったら、中身が順に上がってくる ── */
.js .up { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js .is-in .up, .js .up.is-in { opacity: 1; transform: none; }

/* ── ヘッダー：メニューは章見出し・フッターと同じく英語が主役。下に小さく和文。相談だけボタン ── */
.site-header__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 20px; }
.site-header__logo { display: block; line-height: 0; }
.site-header__logo img { width: auto; height: 56px; }
.nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; }
.nav__link { display: block; text-decoration: none; }
.nav__link b { display: inline-block; font-family: var(--latin), sans-serif; font-weight: 800; font-size: 1.0625rem; line-height: 1.3; background: var(--grad) no-repeat 0 100% / 0% 3px; transition: background-size 0.3s var(--ease); }
.nav__link:hover b, .nav__link:focus-visible b, .nav__link[aria-current="page"] b { background-size: 100% 3px; }
.nav__link span { display: block; color: var(--ink-2); font-size: 0.6875rem; line-height: 1.5; }
.act--s { padding: 6px 20px; font-size: 0.875rem; }

/* ── トップ：ヒーロー。ヘッダーの下に、淡いグラデーションを画面の左右いっぱいに敷く ── */
.band { background: linear-gradient(120deg, var(--pale-blue), var(--pale-purple)); }
.hero { position: relative; padding-block: clamp(40px, 7vw, 88px) clamp(48px, 7vw, 88px); }
.hero__text { position: relative; max-width: 560px; }
.hero__title { font-size: clamp(1.75rem, 8.4vw, 3.375rem); line-height: 1.4; letter-spacing: 0.01em; }
.hero__lead { margin-top: 24px; max-width: 30em; }
.hero__act { margin-top: 28px; }
/* ロゴの 8：スクロールした分だけ、その場で回る。
   横倒しになったときの幅（対角線）が紙面に収まり、見出しにも触れないよう、右端から中心まで半径ぶん以上あけてある */
.hero__mark { position: absolute; right: calc(var(--gutter) + 69px); top: clamp(40px, 7vw, 88px); width: 150px; will-change: transform; }

/* ── 章見出し：英語を大きく主役に、和文をその横に小さく。下に罫線が左から引かれる ── */
.sec { position: relative; padding-block: clamp(36px, 5vw, 56px); }
.sec__h { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; padding-bottom: 12px; line-height: 1.3; }
.sec__en { font-family: var(--latin), sans-serif; font-weight: 800; font-size: clamp(2.5rem, 7vw, 3.75rem); letter-spacing: -0.01em; line-height: 1.1; white-space: nowrap; color: var(--blue); }
.sec__jp { font-size: 1.0625rem; }
.sec__h::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform-origin: 0 50%; }
.js .sec__h::after { transform: scaleX(0); transition: transform 0.9s var(--ease); }
.js .is-in > .sec__h::after, .js .is-in .sec__h::after { transform: none; }
.sec__p { margin-top: 18px; max-width: 36em; }
.sec__more { margin-top: 24px; }
/* 章の中の、太い一文（マーカーつき）と、それに続く説明 */
.lead-l { margin-top: 32px; max-width: 30em; font-family: var(--head); font-weight: 800; font-size: clamp(1.1875rem, 3vw, 1.375rem); line-height: 1.7; }
.lead-l + p { margin-top: 14px; max-width: 36em; }
.about__p { margin-top: 1em; max-width: 36em; }
/* 概要：8 のこと。ロゴの 8 は、マウスを載せると向きが変わって ∞ に見える（「見方を変えると」の絵解き） */
.eight { display: flex; align-items: flex-start; gap: 36px; margin-top: 48px; max-width: 40em; padding-top: 28px; border-top: 1px solid var(--rule); }
.eight__mark { flex: none; width: 60px; height: auto; margin: 8px 26px 0; transition: transform 0.9s var(--spring); }
.eight:hover .eight__mark { transform: rotate(90deg); }
.eight__h { font-size: 1.125rem; }
.eight__h + p { margin-top: 6px; }
.eight p + p { margin-top: 0.8em; }

/* ── Issues：相談者の声を吹き出しで並べる。左右2列で、右の列を少し下げて互い違いに。
      画面に入ると、しっぽの側から順にポンと出る。答えは吹き出しにしない ── */
.voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; margin-top: 32px; }
.voices li { justify-self: start; align-self: start; position: relative; padding: 14px 22px; border-radius: 18px; background: var(--pale-blue); line-height: 1.7; }
.voices li::after { content: ""; position: absolute; left: 22px; bottom: -7px; width: 16px; height: 16px; border-radius: 3px; background: inherit; transform: rotate(45deg); }
.voices li:nth-child(even) { justify-self: end; top: 20px; background: var(--pale-purple); }
.voices li:nth-child(even)::after { left: auto; right: 22px; }
.js .voices li { transform: scale(0.5); transform-origin: 28px 100%; opacity: 0; transition: transform 0.5s var(--spring), opacity 0.2s; transition-delay: calc(var(--n) * 110ms); }
.js .voices li:nth-child(even) { transform-origin: calc(100% - 28px) 100%; }
.js .is-in .voices li { transform: none; opacity: 1; }
.voices + .lead-l { margin-top: 56px; }

/* ── Services：名前・説明・たとえば、の3列。箱には入れず罫線で区切る。ホバーで左に帯 ── */
.svc { margin-top: 28px; border-top: 1px solid var(--ink); }
.svc__item { display: grid; grid-template-columns: 12em minmax(0, 1fr) 15em; gap: 6px 28px; padding: 18px 0; border-bottom: 1px solid var(--rule); background: var(--grad-v) no-repeat 0 0 / 0 100%; transition: padding 0.3s var(--ease), background-size 0.25s var(--ease); }
.svc__item:hover { padding-left: 20px; background-size: 6px 100%; }
.svc__name { font-size: 1.3125rem; line-height: 1.6; }
.svc__eg { color: var(--ink-2); font-size: 0.8125rem; line-height: 1.8; }

/* ── Strengths：2列×2段。箱には入れず、小見出しと本文だけ ── */
.strong { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 48px; margin-top: 4px; }
.strong .main-h { margin-top: 26px; }
.strong p { margin-top: 8px; }

/* ── 小見出し：頭に短いグラデーションの棒 ── */
.main-h { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-size: clamp(1.25rem, 2.8vw, 1.5rem); }
.main-h::before { content: ""; flex: none; width: 22px; height: 6px; border-radius: 3px; background: var(--grad); }

/* ── 行の並び：罫線だけ。ホバーで左にグラデーションの帯、行が少し右へ、題にマーカー ── */
.rows { margin-top: 24px; }
.rows__head, .rows__row { display: grid; grid-template-columns: 7em minmax(0, 1fr) 12em; gap: 4px 20px; padding: 12px 0 12px 16px; border-bottom: 1px solid var(--rule); }
.rows__head { border-bottom-color: var(--ink); color: var(--ink-2); font-size: 0.8125rem; }
.rows__row { position: relative; font-size: 0.9375rem; transition: padding 0.3s var(--ease), background-color 0.25s; }
.rows__row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--grad-v); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.25s var(--ease); }
.rows__row:hover { padding-left: 26px; background: var(--pale); }
.rows__row:hover::before { transform: none; }
.rows__t { display: block; font-family: var(--body); font-size: 1rem; font-weight: 700; line-height: 1.9; }
.rows__t span { background: linear-gradient(transparent 58%, var(--yellow) 58%) no-repeat 0 0 / 0% 100%; transition: background-size 0.35s var(--ease); }
.rows__row:hover .rows__t span { background-size: 100% 100%; }
.rows__c { color: var(--ink-2); }
.rows--two { border-top: 1px solid var(--rule); }
.rows--two .rows__row { grid-template-columns: 15em minmax(0, 1fr); }

/* ── Works：画面つきの紹介は3列（狭い画面では1列）。画面の枠は少し丸く、ホバーで少し持ち上がる ── */
.feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; margin-top: 28px; }
.feat__img { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r); background: linear-gradient(120deg, var(--pale-blue), var(--pale-purple)); transition: transform 0.35s var(--spring); }
.feat__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.feat li:hover .feat__img { transform: translateY(-6px); }
.feat__tag { margin-top: 14px; color: var(--ink-2); font-size: 0.75rem; font-weight: 700; }
.feat__name { margin-top: 2px; font-size: 1.0625rem; line-height: 1.6; }
.feat__name + p { margin-top: 4px; font-size: 0.9375rem; }

/* ── Process：4つの語を「考える／形にする」の2組に分けて並べる。
      下に、ロゴを横に倒した小さな ∞ とキャッチ。∞ の線の上を色が流れ、
      紫の山が通った語は跳ねて、黄色のマーカーが引かれる（動きは script.js） ── */
.loop { margin-top: 36px; }
.loop__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 28px; }
.loop__grp { grid-row: 1; padding-bottom: 6px; border-bottom: 1px solid var(--ink); font-size: 0.875rem; font-weight: 700; }
.loop__grp--l { grid-column: 1 / 3; }
.loop__grp--r { grid-column: 3 / 5; }
.step { grid-row: 2; padding-top: 10px; }
.step__en { display: block; font-family: var(--latin), sans-serif; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; line-height: 1.4; color: var(--blue); }
.step__name { display: inline-block; font-size: 1.625rem; padding: 0 0.15em; margin: 0 -0.15em; transform-origin: 50% 100%;
  background: linear-gradient(transparent 58%, var(--yellow) 58%) no-repeat 0 0 / 0% 100%; transition: background-size 0.4s var(--ease); }
.step.is-on .step__name { background-size: 100% 100%; animation: hop 0.45s var(--spring); }
@keyframes hop { 40% { transform: translateY(-8px) rotate(-4deg); } }
.step p { color: var(--ink-2); font-size: 0.875rem; line-height: 1.75; }
.loop__foot { display: flex; align-items: center; gap: 28px; margin-top: 40px; }
.loop__fig { flex: none; width: 168px; height: auto; max-width: none; overflow: visible; }
.js .loop__fig { opacity: 0; filter: blur(10px); transform: scale(0.9); transition: opacity 1.2s var(--ease) 0.2s, filter 1.2s var(--ease) 0.2s, transform 1.2s var(--ease) 0.2s; }
.js .is-in .loop__fig { opacity: 1; filter: none; transform: none; }
.loop__fig line { stroke: var(--blue); stroke-width: 4.83; stroke-linecap: round; }
.loop__catch { font-family: var(--head); font-weight: 800; font-size: clamp(1.375rem, 4vw, 1.875rem); line-height: 1.5; }

/* ── 下層ページの頭 ── */
.page-head { padding-block: clamp(28px, 5vw, 64px) clamp(4px, 1vw, 12px); }
.page-head__lead { margin-top: 20px; max-width: 34em; }

.cases { margin-top: 18px; padding-left: 1.4em; list-style: disc; max-width: 36em; }

/* ── 概要 ── */
.facts { margin-top: 28px; max-width: 44em; border-top: 1px solid var(--rule); }
.facts__row { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 4px 20px; padding: 14px 0 14px 16px; border-bottom: 1px solid var(--rule); }
.facts__row dt { color: var(--ink-2); }

.prose { max-width: 42em; padding-bottom: 32px; }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { margin-top: 2.4em; font-size: 1.125rem; }

/* ── 相談への導線 ── */
.closing { padding-block: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 40px); }
.closing__p { margin-top: 20px; max-width: 32em; }
.closing__act { margin-top: 24px; }

/* ── フォーム ── */
.form { max-width: 40em; margin-top: 12px; padding-bottom: 40px; }
.form__field + .form__field { margin-top: 1.6em; }
.form__label { display: block; font-weight: 700; }
.form__req { margin-left: 0.8em; color: var(--ink-2); font-size: 0.8125rem; font-weight: 400; }
.form__hint { color: var(--ink-2); font-size: 0.875rem; }
.form__input { display: block; width: 100%; margin-top: 0.4em; padding: 0.7em 0.9em; border: 1px solid var(--ink); border-radius: var(--r); background: var(--paper); color: var(--ink); font: inherit; }
.form__input:focus { outline: 3px solid var(--blue); outline-offset: 0; }
textarea.form__input { min-height: 11em; resize: vertical; }
.form__consent { display: flex; gap: 0.6em; align-items: flex-start; }
.form__consent input { width: 1.2em; height: 1.2em; margin-top: 0.4em; flex: none; accent-color: var(--ink); }
.form__trap { position: absolute; left: -9999px; }
.form__error { margin-top: 1.6em; padding: 0.8em 1em; border: 1px solid var(--alert-ink); border-radius: var(--r); background: var(--alert-bg); color: var(--alert-ink); font-weight: 700; }
.form__actions { margin-top: 2.2em; }

/* ── フッター：ヒーローと対になる、淡いグラデーションの全幅の帯（向きは逆）。
      左にロゴ・屋号・一文・英語主役のメニュー、右に 8。8 は、画面に入ると倒れて ∞ になる ── */
.site-footer { margin-top: clamp(40px, 6vw, 72px); background: linear-gradient(300deg, var(--pale-blue), var(--pale-purple)); }
.site-footer__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px 48px; padding-block: 64px 28px; }
.site-footer__logo { width: auto; height: 60px; }
.site-footer__name { margin-top: 18px; font-family: var(--head); font-weight: 800; font-size: 1.125rem; line-height: 1.5; }
.site-footer__line { margin-top: 2px; font-size: 0.9375rem; }
.site-footer__list { display: flex; flex-wrap: wrap; gap: 20px 36px; margin-top: 36px; }
.site-footer__list a { display: block; text-decoration: none; }
.site-footer__list b { display: inline-block; padding-bottom: 2px; font-family: var(--latin), sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.01em; background: var(--grad) no-repeat 0 100% / 0% 4px; transition: background-size 0.3s var(--ease); }
.site-footer__list a:hover b, .site-footer__list a:focus-visible b { background-size: 100% 4px; }
.site-footer__list span { display: block; color: var(--ink-2); font-size: 0.75rem; line-height: 1.6; }
.site-footer__mark { position: relative; width: 232px; height: 126px; }
.site-footer__mark img { position: absolute; left: 50%; top: 50%; width: 124px; height: auto; max-width: none; transform: translate(-50%, -50%) rotate(90deg); }
.js .site-footer__mark img { transform: translate(-50%, -50%); transition: transform 1.3s var(--spring) 0.3s; }
.js .is-in .site-footer__mark img { transform: translate(-50%, -50%) rotate(90deg); }
.site-footer__copy { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 0.8125rem; }

/* ── 8 と見出しを横に並べられない幅：8 を小さくして見出しの上へ ── */
@media (max-width: 960px) {
  .hero { padding-top: 132px; }
  .hero__mark { right: calc(var(--gutter) + 16px); top: 14px; width: 52px; }
}

/* ── 狭い画面 ── */
@media (max-width: 720px) {
  .site-header__logo img { height: 44px; }
  .rows__head { display: none; }
  .rows { border-top: 1px solid var(--ink); }
  .rows__row, .rows--two .rows__row, .facts__row { grid-template-columns: minmax(0, 1fr); }
  .rows__a { color: var(--ink-2); font-size: 0.8125rem; font-weight: 700; }
  .loop__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }
  .loop__grp, .step { grid-row: auto; }
  .loop__grp--l, .loop__grp--r { grid-column: 1 / 3; }
  .loop__grp--r { margin-top: 18px; }
  .loop__foot { gap: 16px; }
  .loop__fig { width: 96px; }
  .voices, .strong, .svc__item, .feat { grid-template-columns: minmax(0, 1fr); }
  .voices { gap: 18px; }
  .voices li:nth-child(even) { top: 0; }
  .eight { gap: 16px; align-items: flex-start; }
  .eight__mark { width: 44px; margin-inline: 4px; }
  .site-footer__in { grid-template-columns: minmax(0, 1fr); padding-block: 44px 24px; }
  .site-footer__mark { width: 150px; height: 82px; }
  .site-footer__mark img { width: 80px; }
  .site-footer__list { gap: 16px 28px; }
  .nav__list { gap: 4px 18px; }
  .nav__link b { font-size: 0.9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .mk, .js .ch, .js .pop, .js .up, .js .sec__h::after, .js .loop__fig, .js .voices li, .js .site-footer__mark img, .step__name, .act::before, .act__t, .lnk, .rows__row, .rows__row::before, .rows__t span { transition: none !important; animation: none !important; }
  .js .mk { background-size: 100% 100%; }
  .js .ch, .js .pop, .js .up, .js .sec__h::after { transform: none; opacity: 1; }
  .js .loop__fig, .js .voices li { opacity: 1; filter: none; transform: none; }
  .js .site-footer__mark img { transform: translate(-50%, -50%) rotate(90deg); }
}