/* ============================================================
   合同会社DRAI — WHO WE ARE / about 試作 v3
   モノクロ紙×インク＋画像ふんだん（グレースケール）。
   見出しはDRAI自身の言葉。プロ水準モーション(GSAP)前提の
   構造・初期状態を内包。brand base = style.css を上書き。
   ============================================================ */

:root{
  --paper:   #F4F1EA;
  --paper-2: #ECE7DC;
  --paper-3: #E3DDD0;
  --inkk:    #1A1915;
  --ink-2:   #3A372F;
  --ink-soft2:#6B665B;
  --line:    #D8D2C4;
  --accent:  #FF6A1A;
}

/* ---- ページ全体：紙 ---- */
body.ww-page{ background:var(--paper); color:var(--inkk); }
body.ww-page .site-header{ background:rgba(244,241,234,0); }
/* backdrop-filter blur はスクロール毎に再計算され重いので使わず、ほぼ不透明な地で代替 */
body.ww-page .site-header.scrolled{ background:rgba(244,241,234,.97); border-bottom:1px solid var(--line); }
body.ww-page .site-header .brand,
body.ww-page .site-header .nav>a{ color:var(--inkk) !important; }
body.ww-page .brand-tag{ color:var(--ink-soft2); }
body.ww-page .nav>a .en{ color:var(--ink-soft2); opacity:.8; }
body.ww-page .nav>a:not(.nav-cta)::after{ background:var(--inkk); }
body.ww-page .nav-cta{ background:var(--inkk) !important; color:#fff !important; box-shadow:none !important; }
body.ww-page .nav-cta:hover{ background:#000 !important; }
body.ww-page .burger span{ background:var(--inkk); }
body.ww-page .site-footer{ background:var(--inkk); }

/* 紙テクスチャは別レイヤー(::before)を作らず stage の背景に直接タイル描画＝合成コストゼロ */
.ww-stage{ position:relative; background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---- 画像：グレースケール→ホバーで色復帰 ---- */
.ww-img{ filter:grayscale(1) contrast(1.04) brightness(1.02); transition:filter .7s var(--ease); }
.ww-card:hover .ww-img, .g:hover .ww-img, .ww-band:hover .ww-img, .fig:hover .ww-img{ filter:grayscale(0) contrast(1); }

/* ---- ヒーロー（紙・インク・DRAIの言葉） ---- */
.ww-hero{ position:relative; z-index:1; padding:clamp(120px,16vw,200px) 0 clamp(30px,4.5vw,52px); }
.ww-hero .wrap{ max-width:1180px; }
.ww-crumb{ font-family:var(--ff-disp); font-size:.7rem; letter-spacing:.2em; color:var(--ink-soft2); margin:0 0 24px; }
.ww-crumb a{ color:var(--inkk); text-decoration:underline; text-underline-offset:3px; }
.ww-hero .eyebrow{ display:block; font-family:var(--ff-disp); font-weight:700; font-size:.74rem; letter-spacing:.32em; color:var(--ink-soft2); margin:0 0 14px; }
.ww-bigen{ font-family:var(--ff-ja); font-weight:900; letter-spacing:.005em; line-height:1.02;
  font-size:clamp(2.7rem,9.2vw,7.6rem); margin:0; color:var(--inkk); }
.ww-bigen .lnw{ display:block; overflow:hidden; padding:.02em 0; }
.ww-bigen .ln{ display:block; will-change:transform; }
.ww-bigen .o{ color:var(--accent); }
.ww-hero .ja{ display:block; margin-top:22px; font-family:var(--ff-disp); font-weight:500; font-size:clamp(.86rem,1.6vw,1rem); color:var(--ink-2); letter-spacing:.06em; }

/* ---- フルブリード画像帯（パララックス枠） ---- */
.ww-band{ position:relative; z-index:1; width:100%; height:clamp(280px,44vw,600px); overflow:hidden; }
.ww-band .ww-imgwrap{ position:absolute; inset:-12% 0; will-change:transform; }
.ww-band .ww-imgwrap img{ width:100%; height:100%; object-fit:cover; }
.ww-band .cap{ position:absolute; left:clamp(16px,4vw,48px); bottom:clamp(14px,3vw,30px); z-index:2;
  font-family:var(--ff-disp); font-weight:700; letter-spacing:.16em; font-size:.74rem; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.6); }
.ww-band::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45)); z-index:1; }

/* ---- 白いシート ---- */
.ww-sheet{ position:relative; z-index:2; background:#FCFBF8; border:1px solid var(--line);
  border-radius:30px 30px 0 0; max-width:1180px; margin:clamp(-54px,-5vw,-34px) auto 0;
  box-shadow:0 -30px 80px -50px rgba(26,25,21,.4);
  padding:clamp(40px,6vw,84px) clamp(22px,5vw,66px) clamp(56px,8vw,104px); }

/* ---- レイアウト：左スティッキー・スパイ＋本文 ---- */
.ww-layout{ display:grid; grid-template-columns:190px 1fr; gap:clamp(28px,5vw,70px); align-items:start; }
.ww-spy{ position:sticky; top:104px; display:flex; flex-direction:column; gap:11px; }
.ww-spy a{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--ff-disp); font-weight:700; font-size:.8rem; letter-spacing:.12em;
  color:var(--inkk); background:transparent; border:1px solid var(--line);
  border-radius:999px; padding:11px 18px; transition:all .35s var(--ease); }
.ww-spy a .ar{ color:var(--ink-soft2); transition:transform .35s var(--ease); }
.ww-spy a:hover{ border-color:var(--inkk); }
.ww-spy a.active{ background:var(--inkk); color:#fff; border-color:var(--inkk); }
.ww-spy a.active .ar{ color:var(--accent); transform:translateY(2px); }

/* ---- セクション共通 ---- */
.ww-sec{ scroll-margin-top:96px; padding:clamp(8px,2vw,16px) 0 clamp(46px,7vw,82px); }
.ww-eyebrow{ display:flex; align-items:center; gap:14px; margin:0 0 22px; }
.ww-eyebrow b{ font-family:var(--ff-disp); font-weight:800; font-size:clamp(1.3rem,3vw,1.9rem); letter-spacing:.05em; color:var(--inkk); }
.ww-eyebrow .rule{ flex:1; height:1px; background:linear-gradient(90deg, var(--inkk) 0 40px, var(--line) 40px); }
.ww-h{ font-family:var(--ff-ja); font-weight:900; line-height:1.32; font-size:clamp(1.5rem,3.4vw,2.25rem); color:var(--inkk); margin:0 0 18px; }
.ww-h em{ font-style:normal; position:relative; white-space:nowrap; }
.ww-h em::after{ content:""; position:absolute; left:-.05em; right:-.05em; bottom:.06em; height:.26em; background:rgba(255,106,26,.22); z-index:-1; }
.ww-p{ color:var(--ink-2); font-size:1.02rem; line-height:1.95; margin:0 0 14px; max-width:62ch; }
.ww-p .mk{ border-bottom:2px solid var(--accent); font-weight:700; }

/* ---- MISSION：テキスト＋画像 ---- */
.ww-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(22px,4vw,48px); align-items:center; margin:30px 0 6px; perspective:1100px; }
.ww-split .fig{ position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--paper-2); }
.ww-split .fig .ww-imgwrap{ position:absolute; inset:-10% 0; will-change:transform; }
.ww-split .fig .ww-imgwrap img{ width:100%; height:100%; object-fit:cover; }

/* STEPフロー */
.ww-flow{ margin-top:30px; display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.ww-step{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:20px 16px 18px; }
.ww-step .no{ font-family:var(--ff-disp); font-weight:800; font-size:.74rem; letter-spacing:.1em; color:var(--ink-soft2); }
.ww-step h4{ font-family:var(--ff-ja); font-weight:800; font-size:1rem; color:var(--inkk); margin:8px 0 6px; }
.ww-step p{ margin:0; font-size:.84rem; color:var(--ink-soft2); line-height:1.7; }
.ww-step:not(:last-child)::after{ content:"→"; position:absolute; right:-11px; top:50%; transform:translateY(-50%); color:var(--inkk); font-weight:800; z-index:2; }

/* ---- VALUES：画像つきカード ---- */
.ww-values{ margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:18px; perspective:1200px; }
.ww-card{ background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; transform-style:preserve-3d; will-change:transform; transition:box-shadow .45s var(--ease); }
.ww-card:hover{ box-shadow:0 36px 60px -34px rgba(26,25,21,.45); }
.ww-card .ph{ height:160px; overflow:hidden; border-bottom:1px solid var(--line); }
.ww-card .ph img{ width:100%; height:100%; object-fit:cover; }
.ww-card .bd{ padding:24px 26px 28px; transform:translateZ(20px); }
.ww-card .no{ font-family:var(--ff-disp); font-weight:800; font-size:.72rem; letter-spacing:.14em; color:var(--accent); }
.ww-card h4{ font-family:var(--ff-ja); font-weight:800; font-size:1.16rem; color:var(--inkk); margin:6px 0 10px; }
.ww-card p{ margin:0; font-size:.92rem; color:var(--ink-2); line-height:1.8; }

/* ---- ギャラリー帯 ---- */
.ww-gallery{ margin-top:34px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ww-gallery .g{ position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.ww-gallery .g .ww-imgwrap{ position:absolute; inset:-12% 0; will-change:transform; }
.ww-gallery .g img{ width:100%; height:100%; object-fit:cover; }

/* ---- NUMBERS ---- */
.ww-nums{ margin-top:26px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.ww-num{ padding:30px 18px; text-align:center; background:var(--inkk); color:#fff; }
.ww-num .n{ font-family:var(--ff-disp); font-weight:800; font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1; }
.ww-num .n i{ font-style:normal; font-size:.42em; color:var(--accent); margin-left:.15em; }
.ww-num .l{ font-size:.72rem; color:rgba(255,255,255,.66); margin-top:10px; letter-spacing:.05em; }

/* ---- 黒フッター透かしCTA ---- */
.ww-cta{ position:relative; z-index:2; background:#100F0C; color:#fff; overflow:hidden; }
.ww-cta .bg{ position:absolute; inset:-12% 0; z-index:0; will-change:transform; }
.ww-cta .bg img{ width:100%; height:100%; object-fit:cover; opacity:.16; filter:grayscale(1) contrast(1.1); animation:kb 18s ease-in-out infinite alternate; }
@keyframes kb{ from{ transform:scale(1.04) } to{ transform:scale(1.16) } }
.ww-cta-wm{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); white-space:nowrap; z-index:1;
  font-family:var(--ff-disp); font-weight:800; letter-spacing:.02em; font-size:clamp(4rem,17vw,15rem);
  line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.09); pointer-events:none; user-select:none; }
.ww-cta-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center; padding:clamp(92px,12vw,156px) var(--gutter); }
.ww-cta-inner .eyebrow{ display:block; font-family:var(--ff-disp); font-weight:700; letter-spacing:.32em; font-size:.72rem; color:rgba(255,255,255,.65); margin:0 0 16px; }
.ww-cta-inner h2{ font-family:var(--ff-ja); font-weight:900; font-size:clamp(1.7rem,4vw,2.7rem); margin:0 0 28px; }
.ww-cta-inner h2 em{ font-style:normal; color:var(--accent); }
.ww-cta-inner .btn-ink{ display:inline-flex; align-items:center; gap:.6em; background:#fff; color:var(--inkk);
  font-family:var(--ff-disp); font-weight:700; padding:16px 34px; border-radius:999px; transition:background .3s; }
.ww-cta-inner .btn-ink:hover{ background:var(--accent); color:#fff; }

/* ============================================================
   モーション初期状態（GSAPが visible へアニメ）。
   .js-anim が付いている間だけ隠す → JS失敗時/安全タイマーで表示。
   ============================================================ */
.js-anim .ww-bigen{ opacity:0; }
/* 安全装置：アニメが進まない環境(js-anim解除)では見出しを強制表示 */
html:not(.js-anim) .ww-bigen{ opacity:1 !important; }
html:not(.js-anim) .ww-bigen .ln{ transform:none !important; }
.js-anim .ww-hero [data-anim]{ opacity:0; transform:translateY(24px); }
.js-anim .ww-band{ clip-path:inset(0% 0% 100% 0%); }
.js-anim [data-anim]{ opacity:0; transform:translateY(30px); }
.js-anim [data-reveal='clip']{ clip-path:inset(0% 0% 100% 0%); opacity:.001; }
.js-anim .ww-split .fig{ clip-path:inset(0% 0% 100% 0%); }
.js-anim .ww-flow .ww-step{ opacity:0; transform:translateY(28px); }
.js-anim .ww-values .ww-card{ opacity:0; transform:translateY(56px) scale(.97); }
.js-anim .ww-gallery .g{ opacity:0; transform:translateY(38px); }
.js-anim .ww-nums{ opacity:0; transform:translateY(28px); }
.js-anim .ww-eyebrow b{ opacity:0; }
.js-anim .ww-eyebrow .rule{ transform:scaleX(0); transform-origin:left; }

/* ============================================================
   カスタムカーソル / チルト
   ============================================================ */
.cursor-dot, .cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; mix-blend-mode:difference; }
.cursor-dot{ width:7px; height:7px; background:#fff; margin:-3.5px 0 0 -3.5px; }
.cursor-ring{ width:38px; height:38px; margin:-19px 0 0 -19px; border:1px solid rgba(255,255,255,.9);
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s var(--ease); }
.cursor-ring.is-hover{ width:66px; height:66px; margin:-33px 0 0 -33px; background:rgba(255,255,255,.06); }
@media (hover:hover) and (pointer:fine){ body.has-cursor, body.has-cursor a, body.has-cursor button{ cursor:none; } }

/* ---- レスポンシブ ---- */
@media (max-width:900px){
  .ww-layout{ grid-template-columns:1fr; gap:18px; }
  .ww-spy{ position:static; flex-direction:row; flex-wrap:wrap; top:auto; }
  .ww-spy a{ font-size:.72rem; padding:9px 14px; }
  .ww-split{ grid-template-columns:1fr; }
  .ww-flow{ grid-template-columns:1fr 1fr; }
  .ww-step:not(:last-child)::after{ display:none; }
  .ww-values{ grid-template-columns:1fr; }
  .ww-gallery{ grid-template-columns:1fr 1fr; }
  .ww-nums{ grid-template-columns:1fr 1fr; }
  .cursor-dot,.cursor-ring{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .ww-cta .bg img{ animation:none; }
}

/* ============================================================
   HOME : シネマティック・スクロール拡大ヒーロー（モノクロ）
   既定(JS無/縮退)＝全画面の静的ヒーロー。js-anim中は枠から拡大。
   ============================================================ */
.home-hero{ position:relative; height:100vh; min-height:600px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#100F0C;
  perspective:1200px; perspective-origin:50% 42%; }
/* 奥行きステージ：preserve-3d で各層が translateZ で前後に並ぶ */
.home-hero .hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; transform-style:preserve-3d; }
/* 共通レイヤー（背景画像をカバー描画。画像が無ければ下の単色グラデが残る＝崩れない） */
.home-hero .hero-layer{ position:absolute; inset:-8% -8%; background-position:center; background-size:cover; background-repeat:no-repeat;
  filter:grayscale(1) contrast(1.08); will-change:transform; backface-visibility:hidden; }
/* 遠景：暗く・大きめスケール（画像未配置時は濃いインク色グラデ） */
.home-hero .hl-back{ z-index:0; transform:translateZ(-120px) scale(1.34); filter:grayscale(1) contrast(1.06) brightness(.62);
  background-color:#0d0c0a; background-image:radial-gradient(120% 90% at 50% 30%, #232017 0%, #100F0C 70%); }
/* 中景：主被写体（画像未配置時はやや明るいグラデ） */
.home-hero .hl-mid{ z-index:1; transform:translateZ(-40px) scale(1.2); mix-blend-mode:normal;
  background-color:#15130f; background-image:radial-gradient(120% 100% at 50% 42%, #2c2820 0%, #14120e 72%); -webkit-mask-image:radial-gradient(120% 120% at 50% 46%, #000 52%, transparent 96%); mask-image:radial-gradient(120% 120% at 50% 46%, #000 52%, transparent 96%); }
/* 手前のインク/粒子 canvas（任意。失敗しても背景は成立） */
.home-hero .hero-ink{ position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block; pointer-events:none; transform:translateZ(20px); }
/* 縮退/モーション無効：3D変形を解除しフラットなフルブリードに（必ず1枚絵として成立） */
html:not(.js-anim) .home-hero{ perspective:none; }
html:not(.js-anim) .home-hero .hl-back{ transform:none; scale:1; }
html:not(.js-anim) .home-hero .hl-mid{ transform:none; scale:1; }
@media (prefers-reduced-motion: reduce){
  .home-hero{ perspective:none; }
  .home-hero .hl-back{ transform:none; }
  .home-hero .hl-mid{ transform:none; }
  .home-hero .hero-ink{ display:none !important; }
}
.home-hero .hero-scrim{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgba(16,15,12,.5) 0%, rgba(16,15,12,.45) 45%, rgba(16,15,12,.66) 100%); }
.home-hero .hero-inner{ position:relative; z-index:4; text-align:center; padding:0 var(--gutter); max-width:1120px; will-change:transform, opacity; transform-style:preserve-3d; }
.home-hero .eyebrow{ display:block; font-family:var(--ff-disp); font-weight:700; font-size:.76rem; letter-spacing:.34em; color:rgba(255,255,255,.82); margin:0 0 20px; }
.home-hero h1{ font-family:var(--ff-ja); font-weight:900; line-height:1.04; font-size:clamp(2.6rem,8.2vw,7rem); margin:0; color:#fff; }
.home-hero h1 .lnw{ display:block; overflow:hidden; padding:.02em 0; }
.home-hero h1 .ln{ display:block; will-change:transform; }
.home-hero h1 .o{ color:var(--accent); }
.home-hero .hero-sub{ margin:26px auto 0; max-width:42ch; font-family:var(--ff-disp); font-weight:500; font-size:clamp(.9rem,1.7vw,1.08rem); letter-spacing:.04em; color:rgba(255,255,255,.85); }
.home-hero .scrollcue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:5; font-family:var(--ff-disp); font-size:.6rem; letter-spacing:.3em; color:rgba(255,255,255,.72); display:flex; flex-direction:column; align-items:center; gap:10px; }
.home-hero .scrollcue .bar{ width:1px; height:42px; background:linear-gradient(rgba(255,255,255,.7), transparent); position:relative; overflow:hidden; }
.home-hero .scrollcue .bar::after{ content:""; position:absolute; inset:0 0 auto 0; height:40%; background:var(--accent); animation:cuemove 1.8s var(--ease) infinite; }
@keyframes cuemove{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(250%) } }

/* ロード時：GSAPで出す要素を隠す。縮退時(js-anim解除)は表示。 */
.js-anim .home-hero h1 .ln,
.js-anim .home-hero .hero-media,
.js-anim .home-hero .eyebrow,
.js-anim .home-hero .hero-sub,
.js-anim .home-hero .scrollcue{ opacity:0; }
html:not(.js-anim) .home-hero h1 .ln{ transform:none !important; opacity:1 !important; }

/* ヘッダー：ヒーロー拡大後（暗転時）は白文字 */
body.ww-page.hero-dark .site-header .brand,
body.ww-page.hero-dark .site-header .nav>a{ color:#fff !important; }
body.ww-page.hero-dark .brand-tag,
body.ww-page.hero-dark .nav>a .en{ color:rgba(255,255,255,.7) !important; }
body.ww-page.hero-dark .site-header.scrolled{ background:rgba(16,15,12,.4); border-bottom-color:rgba(255,255,255,.12); }
body.ww-page.hero-dark .nav-cta{ background:#fff !important; color:var(--inkk) !important; }
body.ww-page.hero-dark .nav>a:not(.nav-cta)::after{ background:#fff; }
body.ww-page.hero-dark .burger span{ background:#fff; }

/* HOME 導入リード */
.home-lead{ position:relative; z-index:2; background:var(--paper); padding:clamp(64px,10vw,128px) 0; }
.home-lead .wrap{ max-width:1000px; }
.home-lead .eyebrow{ display:block; font-family:var(--ff-disp); font-weight:700; letter-spacing:.3em; font-size:.74rem; color:var(--ink-soft2); margin:0 0 18px; }
.home-lead h2{ font-family:var(--ff-ja); font-weight:900; line-height:1.5; font-size:clamp(1.4rem,3.2vw,2.2rem); color:var(--inkk); margin:0 0 18px; }
.home-lead h2 em{ font-style:normal; position:relative; }
.home-lead h2 em::after{ content:""; position:absolute; left:-.04em; right:-.04em; bottom:.08em; height:.28em; background:rgba(255,106,26,.22); z-index:-1; }
.home-lead p{ color:var(--ink-2); font-size:1.05rem; line-height:2; margin:0; max-width:60ch; }

/* HOME セクション枠 */
.home-sec{ position:relative; z-index:2; background:var(--paper); padding:clamp(56px,8vw,104px) 0; }
.home-sec .wrap{ max-width:1180px; }
.home-sec.tinted{ background:var(--paper-2); }

/* サービス4カード（ww-cardを流用） */
.home-svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:34px; }
@media (max-width:760px){ .home-svc-grid{ grid-template-columns:1fr; } }

.center-cta{ text-align:center; margin-top:44px; }

@media (max-width:760px){
  .home-hero .hero-sub{ font-size:.92rem; }
}

/* ヒーロー切替コピー（見出しが抜けた後に立ち上がる） */
.home-hero .hero-tag{ position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:0 var(--gutter); font-family:var(--ff-disp); font-weight:700; font-size:clamp(1.7rem,4.6vw,3.6rem); line-height:1.2;
  color:#fff; opacity:0; pointer-events:none; letter-spacing:.01em; }
.home-hero .hero-tag .o{ color:var(--accent); }

/* ============================================================
   SERVICE 横スクロール（pin + translateX）
   ============================================================ */
.hscroll{ position:relative; z-index:2; background:var(--paper-2); height:100vh; overflow:hidden; }
.hscroll-head{ position:absolute; top:clamp(78px,11vh,116px); left:0; right:0; z-index:3; }
.hscroll-head .wrap{ max-width:1180px; margin:0 auto; padding:0 var(--gutter); }
.hscroll-viewport{ position:absolute; inset:0; display:flex; align-items:center; }
.hscroll-track{ display:flex; flex:none; width:max-content; gap:24px; padding:48px var(--gutter) 0; will-change:transform; }
.hscroll-card{ position:relative; flex:0 0 auto; width:min(64vw,500px); height:62vh; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#14130f; text-decoration:none; }
.hscroll-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08); transition:filter .6s var(--ease), transform 1s var(--ease); }
.hscroll-card:hover img{ filter:grayscale(0); transform:scale(1.05); }
.hscroll-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(16,15,12,.92), rgba(16,15,12,.05) 56%); }
.hscroll-card .cap{ position:absolute; inset:auto 0 0 0; z-index:2; padding:28px 30px; color:#fff; }
.hscroll-card .no{ color:var(--accent); font-family:var(--ff-disp); font-weight:800; letter-spacing:.12em; font-size:.78rem; }
.hscroll-card h4{ font-family:var(--ff-ja); font-weight:800; font-size:1.4rem; margin:8px 0 8px; }
.hscroll-card p{ font-size:.9rem; color:rgba(255,255,255,.82); margin:0; max-width:34ch; line-height:1.7; }
.hscroll-progress{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:38px; height:2px; background:var(--line); z-index:3; }
.hscroll-progress span{ display:block; height:100%; width:0; background:var(--inkk); }
@media (max-width:760px){ .hscroll-card{ width:80vw; height:56vh; } }

/* 縮退/モーション無効：横スクロールをやめ縦に積む（必ず全カード見える） */
html:not(.js-anim) .hscroll{ height:auto; overflow:visible; padding-bottom:clamp(56px,8vw,104px); }
html:not(.js-anim) .hscroll-head{ position:static; padding-top:clamp(56px,8vw,104px); }
html:not(.js-anim) .hscroll-viewport{ position:static; display:block; }
html:not(.js-anim) .hscroll-track{ flex-wrap:wrap; transform:none !important; padding-top:28px; }
html:not(.js-anim) .hscroll-card{ width:min(100%,520px); height:auto; aspect-ratio:16/10; flex:1 1 340px; }
html:not(.js-anim) .hscroll-progress{ display:none; }

/* ============================================================
   ボリューム追加：マーキー帯／選ばれる理由／ご相談の流れ／カーテン
   ============================================================ */
/* マーキー（無限に流れるキーワード帯） */
.marquee{ position:relative; z-index:2; background:var(--inkk); color:#fff; overflow:hidden; padding:24px 0; }
.marquee-track{ display:flex; gap:48px; width:max-content; animation:marq 30s linear infinite; will-change:transform; }
.marquee-track span{ display:inline-flex; align-items:center; font-family:var(--ff-disp); font-weight:800; font-size:clamp(1.1rem,2.4vw,1.7rem); letter-spacing:.04em; white-space:nowrap; opacity:.92; }
.marquee-track .dot{ color:var(--accent); margin:0 24px; font-size:1.1em; }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* 選ばれる理由 */
.home-why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
@media (max-width:820px){ .home-why-grid{ grid-template-columns:1fr; } }
.why-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:34px 30px; }
.why-card .no{ font-family:var(--ff-disp); font-weight:800; color:var(--accent); font-size:.8rem; letter-spacing:.12em; }
.why-card h4{ font-family:var(--ff-ja); font-weight:800; font-size:1.22rem; color:var(--inkk); margin:12px 0 12px; }
.why-card p{ margin:0; color:var(--ink-2); font-size:.95rem; line-height:1.9; }

/* ============================================================
   PRODUCT / 自社プロダクト実績（FaceGuard）
   既存トークン流用。2カラム：左=ビフォーアフター図 / 右=実績ナラティブ
   ============================================================ */
.home-product .wrap{ max-width:1180px; }
.home-product .pg-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(26px,4.4vw,60px); align-items:center; margin-top:34px; }
@media (max-width:900px){ .home-product .pg-grid{ grid-template-columns:1fr; gap:26px; } }

/* 「DRAIが作るもの」2本柱（デザイン事業＋プロダクト） */
.home-make{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:38px; }
@media (max-width:820px){ .home-make{ grid-template-columns:1fr; } }
.make-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:34px 32px 30px; text-decoration:none; color:inherit; transition:box-shadow .45s var(--ease), border-color .35s var(--ease), transform .45s var(--ease); }
.make-card:hover{ box-shadow:0 36px 60px -34px rgba(26,25,21,.45); border-color:var(--inkk); transform:translateY(-3px); }
.make-no{ font-family:var(--ff-disp); font-weight:800; font-size:.74rem; letter-spacing:.14em; color:var(--accent); }
.make-t{ font-family:var(--ff-ja); font-weight:900; font-size:clamp(1.5rem,3vw,2rem); color:var(--inkk); margin:10px 0 4px; line-height:1.2; }
.make-cat{ font-family:var(--ff-disp); font-weight:700; font-size:.84rem; letter-spacing:.04em; color:var(--ink-soft2); margin:0 0 14px; }
.make-d{ margin:0 0 22px; color:var(--ink-2); font-size:.95rem; line-height:1.85; flex:1; }
.make-go{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--ff-disp); font-weight:700; font-size:.9rem; color:var(--inkk); }
.make-go .arr{ color:var(--accent); transition:transform .3s var(--ease); }
.make-card:hover .make-go .arr{ transform:translateX(4px); }

/* FaceGuard 詳細の小見出し */
.pg-head{ margin-top:clamp(46px,7vw,80px); scroll-margin-top:96px; }
.pg-h{ font-family:var(--ff-ja); font-weight:900; font-size:clamp(1.3rem,2.8vw,1.9rem); line-height:1.4; color:var(--inkk); margin:0 0 10px; }
.pg-sub{ color:var(--ink-2); font-size:1rem; line-height:1.9; margin:0; max-width:62ch; }

/* 左：ビフォーアフター（グレースケール→ホバーで色復帰は .ww-img 既存挙動を継承） */
.pg-fig{ position:relative; margin:0; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:var(--paper-2); box-shadow:0 30px 70px -46px rgba(26,25,21,.5); }
.pg-fig .pg-media{ position:relative; aspect-ratio:1380/1140; background:linear-gradient(135deg,#E3DDD0,#ECE7DC); overflow:hidden; }
.pg-fig .pg-media img{ width:100%; height:100%; object-fit:cover; }
.pg-fig .pg-ph{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,#E3DDD0,#ECE7DC); color:var(--ink-soft2);
  font-family:var(--ff-disp); font-weight:700; letter-spacing:.12em; font-size:.82rem; text-align:center; padding:24px; }
.pg-fig .pg-ph small{ font-size:.66rem; letter-spacing:.24em; color:var(--ink-soft2); opacity:.8; text-transform:uppercase; }
.pg-fig figcaption{ padding:13px clamp(16px,2vw,22px); font-family:var(--ff-disp); font-weight:600; font-size:.76rem; letter-spacing:.04em;
  color:var(--ink-soft2); border-top:1px solid var(--line); line-height:1.7; background:#FCFBF8; }
.pg-badge{ position:absolute; left:14px; top:14px; z-index:5; font-family:var(--ff-disp); font-weight:800; letter-spacing:.08em;
  font-size:.7rem; color:#fff; background:var(--inkk); border-radius:999px; padding:6px 15px; }

/* ---- ビフォーアフター：スクロール連動の比較リビール ---- */
/* 2枚(処理前/AI処理後)を重ね、上層(after)をクリップで出してワイプ表現。
   画像はどちらも faceguard-ba.jpg を流用し、CSSフィルタで「処理前(全面)」と
   「処理後(主役以外ぼかし)」の差を演出。画像未配置時は下のプレースホルダが地として残る。 */
.pg-ba .pg-media{ position:relative; }
.pg-ba .ba-img{ position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat;
  filter:grayscale(1) contrast(1.05); }
/* 処理前：全体に軽いブラー＝「処理が必要な状態」を示唆（顔特定は避け全面ソフト） */
.pg-ba .ba-before{ z-index:1; filter:grayscale(1) contrast(1.04) blur(3px) brightness(.96); }
/* 処理後：中央(主役)はくっきり、左右の人物域だけソフトに。clip量をJSがスクロールで広げる */
.pg-ba .ba-after{ z-index:2; filter:grayscale(0) contrast(1.02);
  -webkit-mask-image:none; mask-image:none;
  clip-path:inset(0 100% 0 0); will-change:clip-path; }
/* 主役以外をぼかす擬似表現：左右端だけにブラー帯を重ねる（顔位置に依存しない安全な見せ方） */
.pg-ba .ba-after::after{ content:""; position:absolute; inset:0; pointer-events:none;
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  -webkit-mask-image:linear-gradient(90deg,#000 0 24%,transparent 36% 64%,#000 76% 100%);
  mask-image:linear-gradient(90deg,#000 0 24%,transparent 36% 64%,#000 76% 100%); }
.pg-ba .ba-tag{ position:absolute; bottom:12px; z-index:4; font-family:var(--ff-disp); font-weight:800; letter-spacing:.08em;
  font-size:.66rem; color:#fff; background:rgba(16,15,12,.72); border-radius:999px; padding:5px 12px; }
.pg-ba .ba-tag--b{ left:12px; }
.pg-ba .ba-tag--a{ right:12px; background:var(--accent); }
/* 仕切り線（after のクリップ右端に追従。JSが left を更新） */
.pg-ba .ba-line{ position:absolute; top:0; bottom:0; left:0; width:2px; z-index:3; background:var(--accent);
  box-shadow:0 0 14px rgba(255,106,26,.6); opacity:0; will-change:left,opacity; }
.pg-ba.is-ba-live .ba-line{ opacity:.9; }
/* プレースホルダは画像層の下に置き、画像が無い時だけ視認される地として常設（崩れ防止） */
.pg-ba .pg-ph{ z-index:0; display:flex; }
/* 縮退/モーション無効：after を全面表示（＝処理後の完成形を静止で見せる） */
html:not(.js-anim) .pg-ba .ba-after{ clip-path:inset(0 0 0 0); }
html:not(.js-anim) .pg-ba .ba-line{ display:none; }
@media (prefers-reduced-motion: reduce){
  .pg-ba .ba-after{ clip-path:inset(0 0 0 0) !important; }
  .pg-ba .ba-line{ display:none; }
}

/* ---- 立体ギャラリー（アプリ操作／接写精度）：奥行きカード＋視差＋任意チルト ---- */
.pg-gallery{ margin-top:clamp(26px,4vw,46px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); perspective:1200px; }
@media (max-width:760px){ .pg-gallery{ grid-template-columns:1fr; } }
.pgg-card{ position:relative; margin:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--paper-2);
  box-shadow:0 26px 60px -42px rgba(26,25,21,.5); transform-style:preserve-3d; will-change:transform;
  transition:box-shadow .45s var(--ease), transform .5s var(--ease); }
.pgg-card:hover{ box-shadow:0 40px 70px -36px rgba(26,25,21,.55); }
.pgg-media{ position:relative; aspect-ratio:1536/1024; overflow:hidden; }
.pgg-img{ position:absolute; inset:-6%; background-position:center; background-size:cover; background-repeat:no-repeat;
  filter:grayscale(1) contrast(1.05); transition:filter .6s var(--ease), transform .6s var(--ease); will-change:transform; transform:translateZ(0); }
.pgg-card:hover .pgg-img{ filter:grayscale(0) contrast(1); }
/* 画像未配置時の地（pgg-img の background が透けない様に下層へ） */
.pgg-ph{ position:absolute; inset:0; z-index:-1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,#E3DDD0,#ECE7DC); color:var(--ink-soft2);
  font-family:var(--ff-disp); font-weight:700; letter-spacing:.12em; font-size:.8rem; text-align:center; padding:22px; }
.pgg-ph small{ font-size:.64rem; letter-spacing:.24em; opacity:.8; text-transform:uppercase; }
.pgg-card figcaption{ display:flex; flex-direction:column; gap:4px; padding:14px clamp(16px,2vw,22px);
  font-family:var(--ff-disp); font-weight:600; font-size:.82rem; color:var(--ink-2); line-height:1.7; border-top:1px solid var(--line); background:#FCFBF8; transform:translateZ(20px); }
.pgg-no{ font-family:var(--ff-disp); font-weight:800; font-size:.66rem; letter-spacing:.14em; color:var(--accent); }

/* 右：実績ナラティブ */
.pg-body .pg-lead{ color:var(--ink-2); font-size:1.04rem; line-height:1.95; margin:0 0 24px; max-width:48ch; }
.pg-body .pg-lead .mk{ border-bottom:2px solid var(--accent); font-weight:700; }
.pg-steps{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:14px; }
.pg-steps li{ position:relative; padding-left:0; }
.pg-steps .no{ display:block; font-family:var(--ff-disp); font-weight:800; font-size:.72rem; letter-spacing:.14em; color:var(--accent); margin:0 0 5px; }
.pg-steps h4{ font-family:var(--ff-ja); font-weight:800; font-size:1.04rem; color:var(--inkk); margin:0 0 6px; }
.pg-steps p{ margin:0; color:var(--ink-2); font-size:.93rem; line-height:1.8; }
.pg-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; padding:0; }
.pg-chips li{ font-family:var(--ff-disp); font-weight:700; font-size:.74rem; letter-spacing:.02em; color:var(--inkk);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px; background:#fff; }
.pg-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.pg-actions .btn-ink{ display:inline-flex; align-items:center; gap:.55em; background:var(--inkk); color:#fff;
  font-family:var(--ff-disp); font-weight:700; font-size:.92rem; padding:13px 26px; border-radius:999px; transition:background .3s var(--ease); }
.pg-actions .btn-ink:hover{ background:var(--accent); }
.pg-actions .btn-ink .arr{ transition:transform .3s var(--ease); }
.pg-actions .btn-ink:hover .arr{ transform:translateX(4px); }
.pg-actions .pg-note{ font-family:var(--ff-disp); font-weight:600; font-size:.76rem; color:var(--ink-soft2); letter-spacing:.02em; }
/* ※図のクリップ出現は HTML 側 data-reveal="clip" で既存モーション層が担当（JS改変不要） */

/* カーテン出現（紙の幕が上下に開いて中身を現す） */
.curtain-sec{ position:relative; }
.curtain{ position:absolute; inset:0; z-index:6; pointer-events:none; display:none; overflow:hidden; }
.js-anim .curtain{ display:block; }
.curtain span{ position:absolute; left:-1px; right:-1px; height:51%; background:var(--paper); will-change:transform; }
.curtain .c-top{ top:0; }
.curtain .c-bot{ bottom:0; }

/* ============================================================
   WebGL / 3D / パララックス 本実装（トップ）
   ============================================================ */
/* AI TECHNOLOGY：WebGLシェーダー背景 */
.ai-tech{ position:relative; z-index:2; min-height:80vh; display:flex; align-items:center; overflow:hidden; background:#0a0b0e; color:#fff; }
.ai-tech canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.ai-tech .scrim{ position:absolute; inset:0; z-index:1; background:radial-gradient(120% 120% at 25% 30%, transparent 40%, rgba(8,9,12,.72)); }
.ai-tech .wrap{ position:relative; z-index:2; max-width:1000px; }
.ai-tech .eyebrow{ display:block; font-family:var(--ff-disp); font-weight:700; letter-spacing:.32em; font-size:.74rem; color:rgba(255,255,255,.72); margin:0 0 16px; }
.ai-tech h2{ font-family:var(--ff-ja); font-weight:900; line-height:1.3; font-size:clamp(1.8rem,4.6vw,3.2rem); margin:0 0 18px; color:#fff; }
.ai-tech h2 em{ font-style:normal; color:var(--accent); }
.ai-tech p{ color:rgba(255,255,255,.82); font-size:1.05rem; line-height:1.95; margin:0; max-width:60ch; }

/* APPROACH：Three.js 3Dオブジェクト */
.approach{ position:relative; z-index:2; background:var(--paper); padding:clamp(56px,8vw,104px) 0; }
.approach .wrap{ max-width:1180px; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.approach .three-stage{ position:relative; height:min(58vh,460px); }
.approach .three-stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.approach .three-cap{ position:absolute; left:0; bottom:0; font-family:var(--ff-disp); font-size:.72rem; letter-spacing:.14em; color:var(--ink-soft2); }
@media (max-width:820px){ .approach .wrap{ grid-template-columns:1fr; } .approach .three-stage{ height:46vh; order:-1; } }

/* VISION：奥行きパララックス（マウスで層がずれる） */
.vision{ position:relative; z-index:2; height:92vh; min-height:560px; overflow:hidden; background:#0a0b0e; display:flex; align-items:center; justify-content:center; }
.vision .layer{ position:absolute; inset:-7%; will-change:transform; }
.vision .v-bg{ background-size:cover; background-position:center; filter:grayscale(1) contrast(1.1) brightness(.5); }
.vision .v-mid b{ position:absolute; width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:.85; box-shadow:0 0 14px rgba(255,106,26,.7); }
.vision .v-fg{ position:relative; z-index:3; text-align:center; color:#fff; padding:0 var(--gutter); }
.vision .v-fg .eyebrow{ display:block; font-family:var(--ff-disp); font-weight:700; letter-spacing:.34em; font-size:.74rem; color:rgba(255,255,255,.7); margin:0 0 16px; }
.vision .v-fg h2{ font-family:var(--ff-ja); font-weight:900; line-height:1.16; font-size:clamp(2rem,6vw,4.6rem); margin:0; }
.vision .v-fg h2 em{ font-style:normal; color:var(--accent); }

/* CTA：パーティクル背景 */
.ww-cta .bg canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.55; }

/* ============================================================
   下層ページ共通（about/service/message/notice/contact）
   ============================================================ */
.ix{ position:relative; z-index:2; background:var(--paper); padding:clamp(48px,7vw,92px) 0; }
.ix.tinted{ background:var(--paper-2); }
.ix .wrap{ max-width:1080px; }
.ix-lead{ color:var(--ink-2); font-size:1.05rem; line-height:2; max-width:64ch; margin:0; }
.ix-kicker{ font-family:var(--ff-disp); font-weight:700; letter-spacing:.2em; font-size:.74rem; color:var(--ink-soft2); margin:0 0 12px; }
.ww-split.rev .fig{ order:-1; }

/* about：会社情報テーブル＋地図 */
.ix-dl{ border-top:1px solid var(--line); margin:0; }
.ix-dl > div{ display:grid; grid-template-columns:190px 1fr; gap:20px; padding:20px 4px; border-bottom:1px solid var(--line); }
.ix-dl dt{ font-family:var(--ff-disp); font-weight:700; color:var(--ink-soft2); font-size:.9rem; letter-spacing:.04em; margin:0; }
.ix-dl dd{ margin:0; color:var(--inkk); font-size:1rem; line-height:1.8; }
.ix-dl dd a{ color:var(--inkk); }
@media (max-width:680px){ .ix-dl > div{ grid-template-columns:1fr; gap:4px; } }
.ix-map{ margin-top:30px; border:1px solid var(--line); border-radius:16px; overflow:hidden; aspect-ratio:16/7; }
.ix-map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(1) contrast(1.05); }

/* service/message：タグ・署名・ロゴノート */
.ix-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; }
.ix-tags li{ font-family:var(--ff-disp); font-weight:700; font-size:.78rem; color:var(--inkk); border:1px solid var(--line); border-radius:999px; padding:6px 14px; }
.ix-signoff{ margin-top:28px; text-align:right; }
.ix-signoff .role{ color:var(--ink-soft2); font-size:.88rem; }
.ix-signoff .name{ font-family:var(--ff-ja); font-weight:800; font-size:1.3rem; color:var(--inkk); margin-top:4px; }
.ix-lognote{ display:flex; gap:22px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 32px; max-width:780px; margin:0 auto; }
.ix-lognote .mk{ width:58px; height:58px; flex:0 0 auto; }
.ix-lognote svg{ width:100%; height:100%; stroke:var(--inkk); fill:none; }
.ix-lognote p{ margin:0; color:var(--ink-2); line-height:1.95; font-size:.96rem; }
.ix-lognote strong{ color:var(--inkk); }

/* notice：一覧 */
.ix-notice{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.ix-notice li{ display:flex; align-items:center; gap:20px; padding:22px 4px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ix-notice time{ font-family:var(--ff-disp); font-weight:700; color:var(--ink-soft2); font-size:.9rem; }
.ix-notice .cat{ font-family:var(--ff-disp); font-weight:700; font-size:.7rem; letter-spacing:.1em; color:var(--accent); border:1px solid #f0d8c4; border-radius:999px; padding:3px 12px; }
.ix-notice a{ color:var(--inkk); font-weight:500; text-decoration:none; flex:1; min-width:200px; }
.ix-notice a:hover{ color:var(--accent); }

/* contact：フォーム（モノクロ） */
.ix-form{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:760px; margin:0 auto; }
.ix-form .f-full{ grid-column:1/-1; }
.ix-form label{ display:block; font-family:var(--ff-disp); font-weight:700; font-size:.9rem; color:var(--inkk); margin:0 0 8px; }
.ix-form .req{ color:var(--accent); font-size:.72rem; margin-left:8px; }
.ix-form input:not([type="checkbox"]), .ix-form textarea{ width:100%; background:#fff; border:1px solid var(--line); border-radius:10px; padding:13px 15px; font-family:inherit; font-size:1rem; color:var(--inkk); }
.ix-form input:not([type="checkbox"]):focus, .ix-form textarea:focus{ outline:none; border-color:var(--inkk); box-shadow:0 0 0 3px rgba(255,106,26,.15); }
.ix-form .consent{ display:flex; align-items:flex-start; gap:10px; font-size:.92rem; color:var(--ink-2); }
.ix-form .consent input[type="checkbox"]{ flex:0 0 auto; width:18px; height:18px; margin-top:3px; accent-color:var(--accent); }
.ix-form .consent span{ flex:1; }
.ix-form .consent a{ color:var(--accent); }
.ix-form .submit-row{ text-align:center; margin-top:8px; }
.ix-form button{ display:inline-flex; align-items:center; gap:.6em; background:var(--inkk); color:#fff; border:none; border-radius:999px; font-family:var(--ff-disp); font-weight:700; font-size:.95rem; padding:15px 42px; cursor:pointer; transition:background .3s; }
.ix-form button:hover{ background:var(--accent); }
@media (max-width:680px){ .ix-form{ grid-template-columns:1fr; } }
.ix-tel{ text-align:center; margin-top:34px; color:var(--ink-soft2); }
.ix-tel a{ color:var(--accent); font-weight:700; }