@charset "UTF-8";

/* =============================================
   sugomori-corp.css
   株式会社SUGOMoRI コーポレートサイト（v2）
   正本＝00 管理ファイル/デザインシステム/株式会社SUGOMoRIデザインシステム/DESIGN.md

   v1（KONAのcommon02/home02を流用）から独立させた。
   理由：v1はKONA子ブランドのCSS（ピルCTA・Cormorant・ゴールド多用）を
   引き継いでいて、「親は色を持たない」というデザインシステムの中核ルールを
   満たせなかったため。
   ============================================= */

:root {
 /* Surfaces */
 --canvas-ivory: #f7f4ee;
 --canvas: #ffffff;
 --band-navy: #12376b;
 --band-navy-deep: #0c2a54;

 /* Ink & greys */
 --ink: #1a222b;
 --ink-jp: #333333;
 --gray-body: #666666;
 --gray-mid: #7f7f7f;
 --gray-label: #878686;
 --on-dark: #f4f7fa;
 --on-dark-soft: rgba(244, 247, 250, 0.78);

 /* Lines & overlays */
 --hairline: #dde6e4;
 --hairline-ivory: #e4dfd4;
 --hairline-gray: #bfbfbf;
 --hairline-on-dark: rgba(255, 255, 255, 0.2);
 --overlay: rgba(10, 20, 28, 0.48);
 --overlay-strong: rgba(10, 20, 28, 0.62);

 /* Borrowed brand accents — そのブランドのブロック内でだけ使う */
 --brand-kai: #c69a5b;
 --brand-koc: #e9663f;
 --brand-holo: #f4b23c;
 --brand-ikuno: #7f7f7f; /* ★未定義 */
 --brand-residence: #7f7f7f; /* ★未定義 */
 --brand-seminyak: #7f7f7f; /* ★未定義 */

 /* Type */
 --en: "Jost", "Poppins", "Century Gothic", sans-serif;
 --jp: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo",
  sans-serif;

 /* Rhythm */
 --section: 120px;
 --wrap: 1180px;
}

/* =============================================
   Reset & base
   ============================================= */
*,
*::before,
*::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

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

ul {
 list-style: none;
}

a {
 color: inherit;
 text-decoration: none;
}

body {
 font-family: var(--jp);
 font-size: 15px;
 font-weight: 400;
 line-height: 1.9;
 letter-spacing: 0.03em;
 color: var(--gray-body);
 background: var(--canvas-ivory);
 -webkit-font-smoothing: antialiased;
}

.wrap {
 width: min(var(--wrap), 90vw);
 margin-inline: auto;
}

.skip {
 position: absolute;
 left: -9999px;
}

.skip:focus {
 left: 16px;
 top: 16px;
 z-index: 999;
 background: var(--band-navy);
 color: #fff;
 padding: 12px 20px;
}

/* =============================================
   署名部品：英字アイブロウ＋和文見出し
   ============================================= */
.eyebrow {
 font-family: var(--en);
 font-size: 12px;
 font-weight: 400;
 line-height: 1;
 letter-spacing: 0.26em;
 text-transform: uppercase;
 color: var(--gray-label);
}

.sec-h {
 font-family: var(--jp);
 font-size: clamp(22px, 3vw, 28px);
 font-weight: 400;
 line-height: 1.65;
 letter-spacing: 0.04em;
 color: var(--ink);
 margin-top: 18px;
}

.lead {
 font-size: 17px;
 line-height: 1.95;
 color: var(--gray-body);
 margin-top: 22px;
 max-width: 740px;
}

/* 本文中のリンク。親は色を持たないので、色ではなく下線で示す */
.link-in {
 color: inherit;
 border-bottom: 1px solid var(--hairline-gray);
 padding-bottom: 1px;
 transition: border-color 0.35s ease;
 white-space: nowrap;
}

.link-in:hover {
 border-bottom-color: currentColor;
}

.sec--navy .link-in {
 border-bottom-color: var(--hairline-on-dark);
}

/* デザインシステムの body-strong。強調は色ではなくウェイトとインクの濃さで出す */
.lead strong,
.bblock__desc strong {
 font-weight: 700;
 color: var(--ink);
}

.sec--navy .lead strong {
 color: var(--on-dark);
}

/* =============================================
   Buttons — 角は直角。ピルは使わない
   ============================================= */
.btn {
 display: inline-block;
 font-family: var(--en);
 font-size: 13px;
 font-weight: 500;
 line-height: 1;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 padding: 17px 42px;
 border-radius: 0;
 border: 1px solid transparent;
 transition: 0.35s ease;
 text-align: center;
}

.btn--primary {
 background: var(--band-navy);
 color: var(--on-dark);
 border-color: var(--band-navy);
}

.btn--primary:hover {
 background: var(--band-navy-deep);
 border-color: var(--band-navy-deep);
}

.btn--outline {
 background: transparent;
 color: var(--ink);
 border-color: var(--hairline-gray);
}

.btn--outline:hover {
 border-color: var(--ink);
}

.btn--photo {
 background: transparent;
 color: #fff;
 border-color: rgba(255, 255, 255, 0.85);
}

.btn--photo:hover {
 background: rgba(255, 255, 255, 0.14);
}

/* =============================================
   Header
   ============================================= */
.hd {
 position: fixed;
 inset: 0 0 auto 0;
 z-index: 200;
 height: 76px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 clamp(20px, 4vw, 46px);
 transition: background 0.35s ease;
}

.hd--scrolled {
 background: var(--canvas-ivory);
 box-shadow: 0 1px 0 rgba(26, 34, 43, 0.1);
}

/* ── KONA RESORT ロゴ（トップページのヘッダー・フッター用）──
   多色（海のグラデーション）なので filter:invert は使わず、
   明背景用と写真上用の2ファイルを差し替える。 */
.hd__logo {
 height: 52px;
 display: flex;
 align-items: center;
}

.hd__logo img {
 height: 100%;
 width: auto;
}

.hd__logo .is-on-photo {
 display: block;
}

.hd__logo .is-on-light {
 display: none;
}

.hd--scrolled .hd__logo .is-on-photo {
 display: none;
}

.hd--scrolled .hd__logo .is-on-light {
 display: block;
}

.foot__logo {
 height: 56px;
 margin-bottom: 18px;
}

.foot__logo img {
 height: 100%;
 width: auto;
}

/* ★ロゴ素材が届いたら .wordmark を <img> に差し替える */
.wordmark {
 display: flex;
 flex-direction: column;
 justify-content: center;
 color: #fff;
 transition: color 0.35s ease;
}

.hd--scrolled .wordmark {
 color: var(--ink);
}

.wordmark strong {
 font-family: var(--en);
 font-size: 26px;
 font-weight: 400;
 line-height: 1.1;
 letter-spacing: 0.16em;
}

.wordmark span {
 font-size: 10px;
 letter-spacing: 0.24em;
 line-height: 1.4;
 opacity: 0.75;
}

.hd__nav ul {
 display: flex;
 align-items: center;
 gap: clamp(16px, 2.2vw, 32px);
}

.hd__nav a {
 font-family: var(--en);
 font-size: 13px;
 font-weight: 400;
 line-height: 1;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: #fff;
 transition: color 0.35s ease;
}

.hd--scrolled .hd__nav a {
 color: var(--ink);
}

.hd__nav .is-btn {
 border: 1px solid rgba(255, 255, 255, 0.8);
 padding: 12px 22px;
}

/* 現在地。色ではなく下線で示す（親は色を持たないため） */
.hd__nav .is-current {
 border-bottom: 1px solid currentColor;
 padding-bottom: 4px;
}

.hd--scrolled .hd__nav .is-btn {
 border-color: var(--hairline-gray);
}

.hd__burger {
 display: none;
 flex-direction: column;
 gap: 5px;
 background: none;
 border: none;
 cursor: pointer;
 padding: 6px;
}

.hd__burger span {
 display: block;
 width: 24px;
 height: 1px;
 background: #fff;
 transition: background 0.35s ease;
}

.hd--scrolled .hd__burger span {
 background: var(--ink);
}

/* Drawer */
.drawer {
 position: fixed;
 top: 0;
 right: -100%;
 width: min(330px, 100vw);
 height: 100vh;
 z-index: 300;
 background: var(--band-navy);
 padding: 84px 36px 40px;
 transition: right 0.4s ease;
 display: flex;
 flex-direction: column;
}

.drawer--open {
 right: 0;
}

.drawer__list {
 flex: 1 1 auto;
 min-height: 0;
 overflow-y: auto;
 overscroll-behavior: contain;
}

.drawer__list li {
 border-bottom: 1px solid var(--hairline-on-dark);
}

.drawer__list a {
 display: block;
 padding: 16px 0;
 color: #fff;
 font-family: var(--en);
 font-size: 14px;
 letter-spacing: 0.2em;
 text-transform: uppercase;
}

.drawer__sub li {
 border-bottom: none;
}

.drawer__sub a {
 padding: 8px 0 8px 12px;
 font-family: var(--jp);
 font-size: 13px;
 letter-spacing: 0.04em;
 text-transform: none;
 color: var(--on-dark-soft);
}

.drawer__close {
 position: absolute;
 top: 26px;
 right: 26px;
 background: none;
 border: none;
 cursor: pointer;
 font-family: var(--en);
 font-size: 12px;
 letter-spacing: 0.2em;
 color: var(--on-dark-soft);
}

/* =============================================
   Hero
   ============================================= */
.hero {
 position: relative;
 min-height: 84svh;
 display: flex;
 align-items: flex-end;
 overflow: hidden;
}

.hero__bg,
.hero__bg img,
.hero__bg video {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

/* 動画は装飾。操作させない */
.hero__video {
 pointer-events: none;
}

/* 2026-09-09：映像をそのまま見せたいという指示により、ヒーローの覆い（シェード）を外した。
   戻すときは下の background を復活させる：
   background: linear-gradient(180deg, rgba(10,20,28,.3), var(--overlay) 60%, var(--overlay-strong)); */
.hero__veil {
 position: absolute;
 inset: 0;
 background: none;
}

/* 下層ページ用の低いヒーロー（トップの全画面と差をつける） */
.hero--sub {
 min-height: 56svh;
}

/* 低いヒーローは横長に切り取られるため、写真の中央ではなく
   やや上（軒裏・庇・ガラス面＝建築が読める帯）を見せる */
.hero--sub .hero__bg img {
 object-position: center 35%;
}

/* ヒーローは下端そろえ。下の余白を詰めるとコピー全体が下がる。
   動画の冒頭に「KONA RESORT AWAJI KAI」のロゴが焼き込まれていて、
   画面が狭いとコピーと近づくため、余白を浅くして距離を取っている。 */
.hero__in {
 position: relative;
 padding: 0 clamp(20px, 5vw, 70px) clamp(28px, 5vh, 72px);
 max-width: 980px;
}

.hero .eyebrow {
 color: rgba(255, 255, 255, 0.85);
}

/* 下限を21pxにしているのは、スマホ幅（本文領域335px）で
   1行目「自分たちが泊まりたいと感じる」が折り返さずに収まる大きさのため。
   24pxだと356pxになり「る」だけが next line に落ちる。 */
.hero h1 {
 font-family: var(--jp);
 font-size: clamp(21px, 3.6vw, 34px);
 font-weight: 400;
 line-height: 1.75;
 letter-spacing: 0.06em;
 color: #fff;
 margin-top: 22px;
}

.hero p {
 color: rgba(255, 255, 255, 0.86);
 margin-top: 20px;
 max-width: 620px;
}

.hero__btns {
 display: flex;
 gap: 12px;
 margin-top: 34px;
 flex-wrap: wrap;
}

/* ヒーロー直下のボタン帯。
   動画の上に文字やボタンを重ねたくないので、映像の外に置く場所を用意した。 */
.hero-actions {
 background: var(--canvas-ivory);
 padding: clamp(26px, 4vh, 44px) 0;
}

.hero-actions__in {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
 align-items: center;
}

/* =============================================
   Sections
   ============================================= */
.sec {
 padding: var(--section) 0;
}

.sec--ivory {
 background: var(--canvas-ivory);
}

.sec--white {
 background: var(--canvas);
}

.sec--navy {
 background: var(--band-navy);
 color: var(--on-dark);
}

.sec--navy .eyebrow {
 color: var(--on-dark-soft);
}

.sec--navy .sec-h {
 color: var(--on-dark);
}

.sec--navy .lead {
 color: var(--on-dark-soft);
}

/* Stats — 数字はJost 300 */
.stats {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 40px;
 margin-top: 60px;
 max-width: 780px;
}

.stat b {
 display: block;
 font-family: var(--en);
 font-size: clamp(48px, 6vw, 64px);
 font-weight: 300;
 line-height: 1;
 letter-spacing: 0.02em;
 color: var(--ink);
}

.stat span {
 display: block;
 font-size: 12px;
 color: var(--gray-mid);
 margin-top: 14px;
}

/* =============================================
   Brands — 縦積みブロック（1件＝半画面弱）
   ============================================= */
.bindex {
 display: flex;
 flex-wrap: wrap;
 gap: 10px 28px;
 margin-top: 40px;
 padding-bottom: 4px;
}

.bindex a {
 font-family: var(--en);
 font-size: 12px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--gray-mid);
 border-bottom: 1px solid transparent;
 padding-bottom: 3px;
 transition: 0.35s ease;
}

.bindex a:hover {
 color: var(--ink);
 border-bottom-color: var(--ink);
}

.bstack {
 margin-top: 56px;
}

/* ブランドの塊を束ねる見出し。
   KONA RESORT を主役にするため、6件を同格に並べるのをやめて群に分けた。
   罫線は引かず、余白と小さなラベルだけで群を示す（親は色を持たないため）。 */
.bgroup {
 margin-top: clamp(56px, 7vh, 88px);
 padding-bottom: 22px;
}

.bgroup:first-child {
 margin-top: 0;
}

.bgroup__label {
 font-family: var(--en);
 font-size: 12px;
 font-weight: 400;
 line-height: 1;
 letter-spacing: 0.26em;
 text-transform: uppercase;
 color: var(--gray-label);
}

.bgroup__title {
 font-family: var(--jp);
 font-size: clamp(18px, 2.2vw, 22px);
 font-weight: 500;
 line-height: 1.7;
 letter-spacing: 0.04em;
 color: var(--ink);
 margin-top: 12px;
}

.bgroup__note {
 font-size: 13px;
 line-height: 1.85;
 color: var(--gray-body);
 margin-top: 10px;
 max-width: 640px;
}

.bgroup__note strong {
 font-weight: 700;
 color: var(--ink);
}

.bblock {
 display: grid;
 grid-template-columns: 1fr 1fr;
 min-height: 430px;
 border-top: 1px solid var(--hairline);
}

.bblock:last-child {
 border-bottom: 1px solid var(--hairline);
}

.bblock__media {
 position: relative;
 overflow: hidden;
 background: linear-gradient(160deg, #2f3e38, #4e6157 60%, #8b9184);
}

.bblock__media img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.4s ease;
}

.bblock:hover .bblock__media img {
 transform: scale(1.04);
}

.bblock__link-overlay {
 position: absolute;
 inset: 0;
 z-index: 2;
}

/* 写真手配中のプレースホルダー */
.bblock__ph {
 position: absolute;
 inset: 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 6px;
 color: rgba(255, 255, 255, 0.7);
 font-family: var(--en);
 font-size: 12px;
 letter-spacing: 0.26em;
 text-transform: uppercase;
}

.bblock__ph small {
 font-family: var(--jp);
 font-size: 11px;
 letter-spacing: 0.08em;
 text-transform: none;
}

.bblock__body {
 position: relative;
 display: flex;
 flex-direction: column;
 justify-content: center;
 padding: clamp(34px, 4.5vw, 64px);
}

/* 借りた差し色はここ1点だけ（左端の縦棒） */
.bblock__body::before {
 content: "";
 position: absolute;
 left: 0;
 top: clamp(34px, 4.5vw, 64px);
 width: 3px;
 height: 52px;
 background: var(--acc, var(--gray-mid));
}

.bblock__label {
 font-family: var(--en);
 font-size: 12px;
 font-weight: 400;
 line-height: 1.5;
 letter-spacing: 0.26em;
 text-transform: uppercase;
 color: var(--gray-label);
}

.bblock__head {
 display: flex;
 align-items: baseline;
 flex-wrap: wrap;
 gap: 8px 16px;
 margin: 14px 0 8px;
}

.bblock__name {
 font-family: var(--en);
 font-size: clamp(26px, 3.2vw, 34px);
 font-weight: 400;
 line-height: 1.2;
 letter-spacing: 0.06em;
 color: var(--ink);
}

/* 規模の数字バッジ — 枠は全ブランド同じ大きさのまま、差はここで伝える */
.badge {
 display: inline-block;
 font-family: var(--jp);
 font-size: 12px;
 font-weight: 500;
 line-height: 1;
 letter-spacing: 0.06em;
 color: var(--ink-jp);
 border: 1px solid var(--hairline-gray);
 padding: 7px 12px;
 white-space: nowrap;
}

.bblock__jp {
 font-size: 14px;
 color: var(--ink-jp);
}

.bblock__place {
 font-size: 12px;
 color: var(--gray-mid);
 margin-top: 12px;
 padding-top: 12px;
 border-top: 1px solid var(--hairline);
}

.bblock__catch {
 font-family: var(--jp);
 font-size: clamp(17px, 2vw, 20px);
 font-weight: 400;
 line-height: 1.8;
 letter-spacing: 0.04em;
 color: var(--ink);
 margin: 20px 0 12px;
}

.bblock__desc {
 font-size: 14px;
 line-height: 1.9;
 color: var(--gray-body);
 margin-bottom: 28px;
 max-width: 480px;
}

.bblock__cta {
 align-self: flex-start;
 font-family: var(--en);
 font-size: 13px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--ink);
 border-bottom: 1px solid var(--ink);
 padding-bottom: 5px;
 transition: 0.35s ease;
}

.bblock__cta:hover {
 color: var(--gray-body);
 border-bottom-color: var(--gray-body);
}

.brands__note {
 font-size: 12px;
 color: var(--gray-mid);
 margin-top: 26px;
}

/* =============================================
   Consulting — 濃色帯・差し色なし
   ============================================= */
.cols3 {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: clamp(24px, 3vw, 44px);
 margin-top: 60px;
}

.col {
 padding-top: 26px;
 border-top: 1px solid var(--hairline-on-dark);
}

.col__no {
 font-family: var(--en);
 font-size: 12px;
 letter-spacing: 0.26em;
 color: var(--on-dark-soft);
}

.col h3 {
 font-family: var(--jp);
 font-size: 19px;
 font-weight: 500;
 line-height: 1.7;
 letter-spacing: 0.04em;
 color: var(--on-dark);
 margin: 12px 0 16px;
}

.col p {
 font-size: 15px;
 line-height: 1.9;
 color: var(--on-dark-soft);
}

/* =============================================
   Statement band
   ============================================= */
.statement {
 position: relative;
 padding: var(--section) 0;
 text-align: center;
 overflow: hidden;
}

.statement__bg,
.statement__bg img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.statement__veil {
 position: absolute;
 inset: 0;
 background: var(--overlay-strong);
}

.statement p {
 position: relative;
 font-family: var(--jp);
 font-size: clamp(20px, 2.6vw, 28px);
 font-weight: 400;
 line-height: 1.85;
 letter-spacing: 0.06em;
 color: #fff;
 max-width: 820px;
 margin-inline: auto;
}

/* =============================================
   節の締めに置く一言＋ボタン
   ============================================= */
.sec-foot {
 margin-top: clamp(40px, 5vh, 60px);
 max-width: 740px;
}

.sec-foot p {
 font-size: 15px;
 line-height: 1.9;
 color: var(--gray-body);
}

/* 濃色帯の中では、帯が持つ文字色をそのまま継承させる */
.sec--navy .sec-foot p {
 color: inherit;
}

.sec-foot .btn {
 margin-top: 22px;
}

/* =============================================
   Case — 実例の1枚（Collaboration節で使う）
   ============================================= */
.case {
 margin-top: 56px;
 padding-top: 26px;
 border-top: 1px solid var(--hairline-ivory);
 max-width: 860px;
}

.case__label {
 font-family: var(--en);
 font-size: 12px;
 letter-spacing: 0.26em;
 text-transform: uppercase;
 color: var(--gray-label);
}

.case h3 {
 font-family: var(--jp);
 font-size: clamp(17px, 2vw, 19px);
 font-weight: 500;
 line-height: 1.7;
 letter-spacing: 0.04em;
 color: var(--ink);
 margin: 12px 0 16px;
}

.case p {
 font-size: 15px;
 line-height: 1.9;
 color: var(--gray-body);
}

.case p + p {
 margin-top: 1em;
}

.case p strong {
 font-weight: 700;
 color: var(--ink);
}

/* =============================================
   Company
   ============================================= */
.rows {
 max-width: 780px;
 margin-top: 48px;
}

.row {
 display: grid;
 grid-template-columns: 190px 1fr;
 gap: 20px;
 padding: 20px 4px;
 border-bottom: 1px solid var(--hairline-ivory);
}

.row dt {
 font-size: 12px;
 letter-spacing: 0.1em;
 color: var(--gray-mid);
}

.row dd {
 font-size: 15px;
 line-height: 1.9;
 color: var(--ink-jp);
}

.row dd li {
 position: relative;
 padding-left: 15px;
}

/* 一覧の中に添える小さな補足（運営委託先など） */
.note-inline {
 font-size: 12px;
 color: var(--gray-mid);
 letter-spacing: 0.03em;
}

.row dd li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.9em;
 width: 6px;
 height: 1px;
 background: var(--gray-mid);
}

/* =============================================
   Contact — 入口を2本に分ける
   ============================================= */
.contact2 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: clamp(24px, 3vw, 44px);
 margin-top: 56px;
}

.ccard {
 background: var(--canvas);
 border: 1px solid var(--hairline);
 padding: clamp(30px, 3.4vw, 48px);
 display: flex;
 flex-direction: column;
}

.ccard h3 {
 font-family: var(--jp);
 font-size: 19px;
 font-weight: 500;
 line-height: 1.7;
 letter-spacing: 0.04em;
 color: var(--ink);
 margin: 12px 0 14px;
}

.ccard p {
 font-size: 14px;
 line-height: 1.9;
 color: var(--gray-body);
 margin-bottom: 28px;
}

.ccard .btn {
 align-self: flex-start;
 margin-top: auto;
}

/* =============================================
   Footer
   ============================================= */
.foot {
 background: var(--band-navy);
 color: var(--on-dark-soft);
 padding: 72px 0 32px;
}

.foot .wordmark {
 color: #fff;
}

.fgrid {
 display: grid;
 grid-template-columns: 1.5fr 1fr 1fr 1fr;
 gap: 36px;
}

.fnote {
 font-size: 12px;
 line-height: 1.8;
 margin-top: 18px;
}

.fhead {
 font-family: var(--en);
 font-size: 12px;
 font-weight: 400;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: #fff;
 margin-bottom: 16px;
}

.flist li {
 font-size: 13px;
 margin-bottom: 11px;
}

.flist a:hover {
 color: #fff;
}

.fbottom {
 border-top: 1px solid var(--hairline-on-dark);
 margin-top: 46px;
 padding-top: 22px;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 12px;
 font-size: 12px;
}

/* =============================================
   Reveal animation
   ============================================= */
.rv {
 opacity: 0;
 transform: translateY(24px);
 transition:
  opacity 0.7s ease,
  transform 0.7s ease;
}

.rv.in {
 opacity: 1;
 transform: none;
}

@media (prefers-reduced-motion: reduce) {
 .rv {
  opacity: 1;
  transform: none;
  transition: none;
 }

 .bblock:hover .bblock__media img {
  transform: none;
 }
}

/* =============================================
   Responsive
   ============================================= */
@media screen and (max-width: 1024px) {
 .cols3 {
  grid-template-columns: 1fr;
  gap: 30px;
 }

 .contact2 {
  grid-template-columns: 1fr;
 }
}

@media screen and (max-width: 860px) {
 :root {
  --section: 72px;
 }

 .hd__nav {
  display: none;
 }

 .hd__burger {
  display: flex;
 }

 .bblock {
  grid-template-columns: 1fr;
  min-height: 0;
 }

 .bblock__media {
  min-height: 260px;
 }

 .stats {
  grid-template-columns: 1fr;
  gap: 30px;
 }

 .row {
  grid-template-columns: 1fr;
  gap: 4px;
 }

 .fgrid {
  grid-template-columns: 1fr 1fr;
  gap: 28px;
 }
}

@media screen and (max-width: 560px) {
 .fgrid {
  grid-template-columns: 1fr;
 }

 .hero__btns .btn,
 .hero-actions__in .btn,
 .ccard .btn {
  width: 100%;
 }
}