/* =========================================================
   GOAT Cloud - style.css
   Design tokens + component styles (extracted from inline styles)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --color-primary: #00505A;
  --color-primary-dark: #003a42;
  --color-primary-darker: #0a1518;
  --color-primary-hover: #007a8a;
  --color-accent: #ff6b3d;
  --color-accent-mint: #7cf6c8;

  --color-text: #0f1f22;
  --color-text-muted: #33445f;
  --color-text-subtle: #4a5b5f;
  --color-text-faint: #6d7f83;
  --color-text-mute: #8b9a9d;

  --color-bg: #fff;
  --color-bg-alt: #f2f6f7;
  --color-bg-soft: #e6f4f5;
  --color-bg-cell-2: #eef1f2;
  --color-bg-thumb: #f0f3f4;
  --color-bg-card: #fafbfb;
  --color-bg-hero-fade-end: #b8dee1;

  --color-border: #d3e0e2;
  --color-border-soft: #e6ecee;
  --color-border-dashed: #cfd8db;

  --font-sans: 'Noto Sans JP', system-ui, sans-serif;
  --font-display: 'Manrope', sans-serif;

  --radius-sm: 3px;
  --radius: 4px;
  --radius-md: 6px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-header: 0 8px 24px rgb(0 80 90 / 8%);
  --shadow-board: 0 12px 32px rgb(0 0 0 / 10%);

  --max-w-nav: 1240px;
  --max-w-md: 1080px;
  --max-w-contact: 820px;
  --max-w-cta: 720px;
  --max-w-hero-copy: 1176px;
}

/* ---------- Global reset / base ---------- */
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
img { max-width: 100%; }

/* ---------- Layout primitives ---------- */
.page {
  min-height: 100vh;
  background: var(--color-bg);
}
.container {
  max-width: var(--max-w-nav);
  margin: 0 auto;
}
.container--contact { max-width: var(--max-w-contact); }

/* ---------- Header ---------- */
.header-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px 24px 0;
}
.header {
  max-width: var(--max-w-nav);
  margin: 0 auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-header);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.header__brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.header__brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}
.header__brand-name--dark {
  color: var(--color-text);
  margin-left: 2px;
}
.header__brand-tag {
  font-size: 11px;
  color: var(--color-text-faint);
}
.header__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}
.header__link { color: inherit; }
.header__cta {
  background: var(--color-accent);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.header__cta:hover { color: #fff; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 55%, #06262b 100%);
  position: relative;
  overflow: hidden;
  min-height: 440px;
  isolation: isolate; /* art の screen 合成を hero 内に閉じ込める */
}
.hero__art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__art picture {
  display: contents; /* picture を挟んでも img の絶対配置を維持する */
}
.hero__art-img {
  position: absolute;
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
  height: 80%;
  width: auto;
  max-width: none;

  /* 素材は透過画像ではなく背景が黒。screen 合成が黒を消すことで縁が出ない。
     この見え方は screen 依存なので、blend mode を変えたり明るい背景に置くと黒い矩形が出る */
  mix-blend-mode: screen;

  /* 彩度と明度を落とし、コピーを主役にする */
  filter: hue-rotate(25deg) saturate(0.7) brightness(0.9);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgb(0 58 66 / 55%) 0%, rgb(0 58 66 / 25%) 45%, rgb(0 58 66 / 0%) 70%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w-nav);
  margin: 0 auto;
  padding: 88px 32px 104px;
}
.hero__content { max-width: var(--max-w-hero-copy); }
.hero__kicker {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-accent-mint);
  margin-bottom: 20px;
}
.hero__title {
  font-size: 56px;
  line-height: 1.25;
  font-weight: 900;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: pretty;
  text-shadow: 0 2px 24px rgb(0 0 0 / 35%);
}
.hero__title-sub {
  font-size: 24px;
  line-height: 1.6;
  font-weight: 700;
  color: rgb(255 255 255 / 90%);
  margin: 0 0 22px;
  text-wrap: pretty;
  text-shadow: 0 1px 16px rgb(0 0 0 / 30%);
}
.hero__sub {
  font-size: 15px;
  line-height: 2;
  color: rgb(255 255 255 / 78%);
  margin: 0 0 36px;
  max-width: 640px;
}
.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

@media (width <= 640px) {
  .hero__title { font-size: 34px; }
  .hero__title-sub { font-size: 18px; }
  .hero__art-img { opacity: 0.55; } /* 狭幅ではコピーの真裏に来るため減光 */
}

/* ---------- Floating board + anchor nav ---------- */
.board-wrap {
  background: var(--color-bg-alt);
  padding: 0 32px 64px;
}
.board-inner {
  max-width: var(--max-w-nav);
  margin: -80px auto 0;
  position: relative;
  z-index: 3;
}
.board {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-board);
}
.board__body {
  padding: 32px 64px 36px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.board__title {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  color: var(--color-primary);
  letter-spacing: -0.01em;
  line-height: 1.5;
}
.board__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
  margin-bottom: -8px;
}
.board__initial {
  color: var(--color-accent);
}
.board__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-muted);
}
.board__divider {
  height: 1px;
  background: var(--color-border-soft);
}
.board-nav {
  background: var(--color-primary);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.board-nav__link {
  color: #fff;
  padding: 22px 12px 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-right: 1px solid rgb(255 255 255 / 28%);
}
.board-nav__link:hover { color: #fff; }
.board-nav__link:last-child { border-right: none; }
.board-nav__arrow {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 1px solid rgb(255 255 255 / 75%);
  border-radius: var(--radius-pill);
  position: relative;
}
.board-nav__arrow-inner {
  position: absolute;
  top: 5px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(45deg);
}

/* ---------- Section base ---------- */

/* アンカー遷移先が sticky ヘッダー（実高 約 66px）の裏に隠れないようにする */
[id] {
  scroll-margin-top: 96px;
}
.section {
  padding: 72px 32px;
}
.section--alt { background: var(--color-bg-alt); }
.section--white { background: var(--color-bg); }
.section--contact {
  padding: 80px 32px;
  background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg-hero-fade-end) 100%);
}
.section--mid-cta {
  padding: 56px 32px;
  background: var(--color-bg-soft);
}

/* ---------- Entry section ---------- */
.entry__head { margin-bottom: 36px; text-align: center; }
.entry__title {
  font-size: 30px;
  font-weight: 900;
  margin: 0 0 10px;
  color: var(--color-primary-dark);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.entry__sub {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-subtle);
  margin: 0;
  line-height: 1.7;
}
.entry-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 36px;
}
.entry-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.entry-card__head {
  /* gap は Google ロゴのクリアスペース（ロゴ高の約 1/2）を満たす値にする */
  border-bottom: 1px solid var(--color-border-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 20px;
}
.entry-card__logo {
  height: 40px;
  flex-shrink: 0;
}
.entry-card__logo .img-fill {
  width: auto;
  height: 100%;
}
.entry-card__icons {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.entry-card__icon {
  width: 40px;
  height: 40px;
}
.entry-card__body {
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.entry-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
}
.entry-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-subtle);
}
.entry-card__link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
}
.entry-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.entry-cta__note {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
}

/* Reusable image-slot img */
.img-fill {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  font-weight: 700;
  text-align: center;
}
.btn__icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}
.btn--primary {
  background: var(--color-accent);
  color: #fff;
}
.btn--primary:hover { color: #fff; }
.btn--outline {
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
.btn--lg {
  padding: 18px 48px;
  font-size: 16px;
}
.btn--md {
  padding: 18px 40px;
  font-size: 15px;
}
.btn--pill-wide {
  padding: 18px 56px;
  font-size: 16px;
}

/* ---------- Service section ---------- */
.service__title {
  font-size: 30px;
  font-weight: 900;
  margin: 0 0 12px;
  color: var(--color-primary-dark);
  text-align: center;
}
.service__lead {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0 0 32px;
  text-align: center;
}
.service-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}
.service-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg);
}
.service-item__head {
  background: var(--color-primary);
  color: #fff;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 14px;
}
.service-item__number {
  font-family: var(--font-display);
  font-size: 13px;
  background: rgb(255 255 255 / 20%);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
.service-item__name {
  /* 見出し階層のため h3。見た目は親（service-item__head）に従わせる */
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.service-item__body {
  padding: 24px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: center;
}
.service-item__icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
}
.service-item__icon--grid {
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px;
}
.service-item__icon--diagonal {
  /* 2 画像の矩形は交差するが、非透過グリフ同士は約 15px 分離しており重ならない
     （2026-08-19 ピクセル検証済み）。画像を差し替える場合は透過形状の再確認が必要 */
  position: relative;
}
.service-item__icon--diagonal > img:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
}
.service-item__icon--diagonal > img:last-child {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56px;
  height: 56px;
  z-index: 1;
}
.service-item__desc {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-muted);
}
.service-item__tags {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 700;
}

.scope-head {
  /* 見出し階層のため h3。配下の scope-cell__name (h4) の親にあたる */
  margin: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius) var(--radius) 0 0;
}
.scope-grid {
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--color-bg);
}
.scope-cell {
  padding: 24px;
  border-right: 1px solid var(--color-border);
}
.scope-cell:last-child { border-right: none; }
.scope-cell__label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 12px;
}
.scope-cell__name {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
}
.scope-cell__desc {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-subtle);
  line-height: 1.8;
}

/* ---------- Mid CTA ---------- */
.mid-cta {
  max-width: var(--max-w-cta);
  margin: 0 auto;
  text-align: center;
}
.mid-cta__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 24px;
  color: var(--color-primary-dark);
}

/* ---------- Reasons ---------- */
.reasons__title {
  font-size: 30px;
  font-weight: 900;
  margin: 0 0 20px;
  color: var(--color-primary-dark);
  text-align: center;
}
.partner-banner { margin-bottom: 48px; }
.partner-banner__lead {
  text-align: center;
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0 0 8px;
  font-weight: 700;
}
.partner-banner__desc {
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-subtle);
  margin: 0 0 32px;
}
.partner-badges {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.badge-frame {
  /* バッジは白背景カード。薄色パネル（.partner-banner）上に直接置き、
     クリアスペース（バッジ内の大きい G の 1/3 以上）はパネル余白と gap で確保する */
  height: 200px;
  width: auto;
}
.badge-frame img {
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
}
.reasons-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.reason-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg);
}
.reason-item__title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  padding: 14px 20px;
  margin: 0;
}
.reason-item__text {
  margin: 0;
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-muted);
}
.reason-item__link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.reason-item__link:hover {
  color: var(--color-primary-hover);
}

/* ---------- Contact offices (wider sub-block within contact section) ---------- */
.contact-offices {
  max-width: var(--max-w-md);
  margin: 56px auto 0;
  padding-top: 40px;
  border-top: 1px solid var(--color-border-soft);
  text-align: center;
}
.contact-offices__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--color-primary);
}
.contact-offices__lead {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-primary);
  margin: 0 auto 28px;
  max-width: 640px;
}
.contact-offices__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (width <= 900px) {
  .contact-offices__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.contact-office {
  padding: 20px 16px;
  background: rgb(255 255 255 / 60%);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  text-align: left;
}
.contact-office__name {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
}
.contact-office__address {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* ---------- Members ---------- */
.members__title {
  font-size: 30px;
  font-weight: 900;
  margin: 0 0 12px;
  color: var(--color-primary-dark);
  text-align: center;
}
.members__lead {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0 0 40px;
  text-align: center;
}
.members-grid {
  /* auto-fit で人数の増減にレイアウトが追従する */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.member {
  /* entry-card と同じ「画像エリア + 本文エリア」構造 */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.member__photo {
  /* 元素材が約 1:1.34 の横長のため 4:3 に合わせ、トリミングを発生させない。
     写真が入るまでは姓を表示するプレースホルダ */
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-bg-alt);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}
.member__photo img {
  /* 画像は枠（4:3）より大きく書き出してあるので object-position でパンできる。
     --focus-x / --focus-y を .member--<名前> 側で上書きして人物ごとに微調整する
     （0% = 左/上端寄り、50% = 中央、100% = 右/下端寄り）。
     ズームを変えたい場合は画像の再生成が必要（原本は _original/ に保全）。
     ※ koki のみ元画像が 512px と小さいため、余白 20% を付けず正方形のまま書き出し、
       縦方向のパン余白で上端合わせを行う（引き伸ばしを避けるため） */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
  display: block;
}
.member--iida  { --focus-x: 50%; --focus-y: 50%; }
.member--koki  { --focus-x: 50%; --focus-y: 0%; }
.member--oku   { --focus-x: 50%; --focus-y: 50%; }
.member--koike { --focus-x: 50%; --focus-y: 50%; }
.member__body {
  padding: 20px 20px 22px;
  text-align: center;
  flex: 1;
}
.member__role {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}
.member__name {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
}
.member__career {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* ---------- Cases ---------- */
.cases__title {
  font-size: 30px;
  font-weight: 900;
  margin: 0 0 12px;
  color: var(--color-primary-dark);
  text-align: center;
}
.cases__lead {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 32px;
  line-height: 1.9;
  text-align: center;
}
.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.case-card {
  border: 1px dashed var(--color-border-dashed);
  border-radius: var(--radius);
  padding: 32px 24px;
  background: var(--color-bg-card);
}
.case-card__thumb {
  aspect-ratio: 16 / 10;
  background: var(--color-bg-thumb);
  border-radius: var(--radius);
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  color: var(--color-text-mute);
  font-size: 12px;
}
.case-card__label {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--color-text-mute);
  font-weight: 700;
  margin-bottom: 10px;
}
.case-card__line {
  height: 12px;
  background: var(--color-bg-cell-2);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.case-card__line--last { margin-bottom: 0; }
.case-card__line--w80 { width: 80%; }
.case-card__line--w60 { width: 60%; }
.case-card__line--w75 { width: 75%; }
.case-card__line--w55 { width: 55%; }
.case-card__line--w70 { width: 70%; }
.case-card__line--w50 { width: 50%; }

/* ---------- Contact ---------- */
.contact {
  text-align: center;
}
.contact__title {
  font-size: 30px;
  font-weight: 900;
  margin: 0 0 16px;
  color: var(--color-primary-dark);
}
.contact__lead {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0 0 40px;
}
.contact-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.contact-meta {
  font-size: 13px;
  color: var(--color-text-muted);
}
.contact-meta__mail {
  color: var(--color-primary);
  font-weight: 700;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--color-primary-darker);
  color: rgb(255 255 255 / 70%);
  padding: 72px 32px 32px;
}
.footer__inner {
  /* 本文セクション（.container）と左右端を揃える */
  max-width: var(--max-w-nav);
  margin: 0 auto;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}
.footer__top > div:not(:first-child) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.footer__brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.footer__brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: #fff;
}
.footer__brand-name--accent {
  color: var(--color-accent-mint);
  font-weight: 700;
  margin-left: 2px;
}
.footer__brand-desc {
  font-size: 12px;
  line-height: 1.9;
  margin: 0 0 16px;
  color: rgb(255 255 255 / 55%);
}
.footer__brand-desc--last { margin: 0; }
.footer__col-title {
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
}
.footer__list a { color: rgb(255 255 255 / 70%); }
.footer__list a:hover { color: #fff; }
.footer__bottom {
  padding-top: 24px;
  font-size: 12px;
  color: rgb(255 255 255 / 35%);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}