/* ============================================================
   クルスタ LP ─ ベースCSS（構成に依存しない骨格だけ）

   これは「原稿v4が来たら即組める」ように用意した土台です。
   セクション固有のスタイル（旧 PROBLEM / BEFORE-AFTER 等）は
   構成を作り直すため、ここには入れていません。
   旧v3構成の実装は _legacy/style.v3-structure.css に退避してあります。

   ■ 骨格：AccompanyOn コーポレート案B（~/bcinc-corporate/_deploy/style.css）踏襲
       Inter + Noto Sans JP 本文 ／ Space Grotesk 英語大見出し
       .sec-head（英語大見出し + 日本語小見出し + 短い横棒）
       --max:1160px ／ --r:16px ／ --r-lg:24px ／ pill ボタン
       セクション余白 clamp(72px,9vw,120px) ／ 行間 1.85 ／ .reveal

   ■ 配色：C案（確定）
       ヘッダー＝白。文字はスレート。サーモンは「面」とアクセントで使う。
       セクション背景は 白（.sec-white）と #FBECE9（.sec-tint）を交互に。
============================================================ */

/* ============================================================
   コントラスト実測値（2026-08-20 実測。目分量で変えないこと）
   通常文=4.5:1 / 大見出し(24px以上 or 18.66px以上の太字)=3.0:1

     白文字 on #D2563F (accent-strong) ...  4.08:1  ← 本文NG
     白文字 on #B8412C (accent-deeper) ...  5.48:1  ← ボタンはこれを使う
     白文字 on #EF7E6D (accent) .........   2.67:1  ← 文字色には絶対使わない
     #0f172a 見出し on #FBECE9 ..........  15.54:1  OK
     #334155 本文   on #FBECE9 ..........   9.01:1  OK
     #64748b 補足   on #FBECE9 ..........   4.14:1  ← NG。tint上では使わない
     #475569 補足   on #FBECE9 ..........   6.59:1  ← tint上の補足文字はこれ
     #94a3b8        on #FBECE9 ..........   2.23:1  ← NG
     #A63E2A ラベル on #FBECE9 ..........   5.47:1  OK
     #A63E2A ラベル on 白      ..........   6.28:1  OK
     #64748b 補足   on 白      ..........   4.76:1  OK

   → 主ボタンの塗りは指定の --accent-strong ではAAに届かないため
     --accent-deeper (#B8412C) を採用した。--accent-strong はホバーと
     装飾（グラデ・罫）側に回している。
   → 補足文字は地の色で変わるので、--muted 変数を経由すること。
     直に #64748b と書かない。
============================================================ */

:root{
  /* サーモン（クルスタ・ダッシュボードの実値がベース） */
  --accent:#EF7E6D;          /* 下線・図版・アイコン・罫のアクセント（文字には使わない） */
  --accent-strong:#D2563F;   /* 装飾・ホバー・グラデーション */
  --accent-deeper:#B8412C;   /* 主ボタンの塗り（白文字でAA） */
  --accent-darkest:#9C351F;  /* 主ボタンのホバー */
  --accent-ink:#A63E2A;      /* eyebrow・セクションラベル・強調文字 */
  --accent-tint:#FBECE9;     /* 面。ヒーローと交互セクションの地 */
  --accent-tint-2:#F6DAD3;   /* ヘッダー下境界・区切り罫 */

  /* 文字と地（スレート） */
  --panel:#171d31;      /* 濃色パネル（ヒーロー図版）。ダッシュボードの --header-1 と同値 */
  --panel-2:#0d1220;
  --ink:#0f172a;
  --ink-2:#334155;
  --ink-3:#64748b;
  --ink-4:#94a3b8;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#f1f5f9;
  --line:#e6eaf0;
  --line-2:#d9e0e9;

  /* 地の色によって切り替える「補足文字」。直に色を書かずこれを使う */
  --muted:var(--ink-3);

  --font:"Inter","Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  --font-en:"Space Grotesk","Inter","Noto Sans JP",system-ui,sans-serif;

  --max:1160px;
  --r:16px;      /* 参考サイトに寄せて角丸を大きく（14→16） */
  --r-lg:24px;   /* 同上（18→24）。柔らかさの主因はここ */
  --pill:999px;

  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 8px 20px -14px rgba(15,23,42,.24);
  --shadow-lg:0 18px 42px -28px rgba(15,23,42,.28);
  --shadow-accent:0 10px 26px -8px rgba(239,126,109,.55);

  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.35,.5,1);

  --sticky-h:0px;   /* 追従バーの高さ。768px以下で値が入る */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px;}
body{margin:0;font-family:var(--font);color:var(--ink-2);background:var(--surface);
  line-height:1.85;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"palt" 1;                  /* 日本語の約物を詰める */
  overflow-x:hidden;padding-bottom:var(--sticky-h);}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{color:var(--ink);font-weight:700;letter-spacing:0;margin:0;}
p,ul,ol,dl,dd,figure,blockquote{margin:0;}
ul,ol{padding:0;list-style:none;}
em,i{font-style:normal;}
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(182,65,44,.5);outline-offset:3px;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,5vw,40px);}
.wrap--narrow{max-width:860px;}
section{padding:clamp(72px,9vw,120px) 0;}

.skip-link{position:fixed;top:8px;left:8px;z-index:200;padding:10px 18px;border-radius:var(--pill);
  background:var(--ink);color:#fff;font-size:13px;font-weight:700;transform:translateY(-180%);}
.skip-link:focus{transform:none;}

/* ============================================================
   セクションの地（白 ⇄ サーモンtint を交互に置いてリズムを作る）
============================================================ */
.sec-white{background:var(--surface);}
.sec-tint{background:var(--accent-tint);--muted:#475569;}   /* tint上はAA確保のため補足文字を濃く */

/* 地の上に置くカード。白セクションでは surface-2、tint セクションでは白 */
.card{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--spring),box-shadow .4s var(--ease),border-color .4s var(--ease);}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent-tint-2);}
.sec-white .card{background:var(--surface-2);}
.sec-tint .card{background:var(--surface);border-color:var(--accent-tint-2);}

/* ============================================================
   セクションラベル（英語大見出し + 日本語小見出し + 短い横棒）
============================================================ */
.sec-head{margin-bottom:clamp(32px,5vw,52px);}
.sec-head .en{display:block;font-family:var(--font-en);font-size:clamp(30px,5vw,54px);font-weight:700;
  color:var(--ink);letter-spacing:.03em;line-height:1.1;text-transform:uppercase;}
.sec-head .ja{display:inline-flex;align-items:flex-start;gap:10px;margin-top:12px;
  font-size:13.5px;font-weight:700;color:var(--accent-ink);letter-spacing:.08em;line-height:1.7;}
.sec-head .ja::before{content:"";flex:none;width:26px;height:2px;border-radius:2px;
  background:var(--accent);margin-top:.72em;}
.sec-head h2{margin:16px 0 0;font-size:clamp(25px,3.6vw,40px);line-height:1.5;
  letter-spacing:-.01em;font-weight:800;}
.sec-head h2 .hl{color:var(--accent-ink);}
.sec-head p.desc{margin:16px 0 0;font-size:15.5px;color:var(--ink-2);max-width:44em;line-height:2;}
.sec-head.center{text-align:center;}
.sec-head.center .ja::before{display:none;}
.sec-head.center h2,.sec-head.center p.desc{margin-left:auto;margin-right:auto;}

/* 見出しの下に引くアクセントの短い横棒（単体で使う場合） */
.rule{width:44px;height:3px;border-radius:3px;background:var(--accent);}

/* ============================================================
   ボタン
   ★主ボタンの塗りは --accent-deeper。--accent-strong は白文字で
     4.08:1 しか出ずAAに届かないため使わない（上の実測表参照）。
============================================================ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;min-height:52px;border-radius:var(--pill);border:1.5px solid transparent;
  font-family:var(--font);font-weight:700;font-size:15px;line-height:1.4;cursor:pointer;text-align:center;
  transition:transform .3s var(--spring),box-shadow .3s var(--ease),background .25s var(--ease),
             color .25s var(--ease),border-color .25s var(--ease);}
.btn .ar{display:inline-flex;transition:transform .3s var(--spring);}
.btn:hover .ar{transform:translateX(4px);}
.btn-primary{background:var(--accent-deeper);color:#fff;box-shadow:var(--shadow-accent);}
.btn-primary:hover{background:var(--accent-darkest);transform:translateY(-1px);
  box-shadow:0 16px 34px -10px rgba(239,126,109,.62);}
.btn-ghost{background:var(--surface);color:var(--ink-2);border-color:var(--line-2);box-shadow:var(--shadow-sm);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink);transform:translateY(-1px);
  box-shadow:var(--shadow-md);}
.btn-lg{padding:16px 30px;min-height:58px;font-size:16px;}
.btn-sm{padding:10px 18px;min-height:42px;font-size:13px;}

/* LINEマーク */
.line-mark{display:inline-grid;place-items:center;flex:none;min-width:34px;height:21px;padding-inline:6px;
  border-radius:5px;background:#fff;color:var(--accent-deeper);
  font-family:var(--font-en);font-size:9px;font-weight:700;letter-spacing:.06em;}
.btn-ghost .line-mark{background:var(--accent-deeper);color:#fff;}
.btn-sm .line-mark{min-width:28px;height:18px;font-size:8px;}

/* CTAは必ず「LINE」と「フォーム」の2ボタンを並べる */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;}
.cta-row .btn{flex:1 1 240px;}
.cta-block{text-align:center;}
.cta-block .cta-row{justify-content:center;}
.cta-note{margin-top:14px;font-size:12.5px;color:var(--muted);}

.chip{display:inline-flex;align-items:center;gap:7px;padding:4px 13px;border-radius:var(--pill);
  background:var(--accent-tint);border:1px solid var(--accent-tint-2);
  font-size:12px;font-weight:700;color:var(--accent-ink);letter-spacing:.04em;}
.sec-tint .chip{background:var(--surface);}

/* ============================================================
   未確定項目のプレースホルダ（公開前に必ず全部消す）
   自然な文章で埋めない。画面上ですぐ見つかる状態を保つこと。
============================================================ */
.todo{display:inline-block;padding:3px 11px;border:1px dashed #a3760a;border-radius:6px;
  background:#fff3bf;color:#6b4c00;font-size:13px;font-weight:700;line-height:1.7;}
.todo-block{display:block;margin:0 0 22px;padding:14px 18px;border:2px dashed #a3760a;
  border-radius:var(--r);background:#fff3bf;color:#6b4c00;font-size:13px;font-weight:700;line-height:1.85;}
.todo-block b{display:block;font-size:14px;margin-bottom:4px;}
.todo-block code{padding:1px 6px;border-radius:4px;background:rgba(107,76,0,.14);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.94em;}

/* ============================================================
   ヘッダー（白。下境界にサーモン tint-2。ページ内アンカーのみ）
============================================================ */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--accent-tint-2);
  transition:box-shadow .4s var(--ease),background .4s var(--ease);}
.site-header.scrolled{background:rgba(255,255,255,.97);box-shadow:0 6px 24px -18px rgba(15,23,42,.5);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px;
  transition:height .4s var(--ease);}
.site-header.scrolled .nav{height:64px;}
.logo{display:flex;align-items:center;gap:12px;flex:none;}
.logo img{height:30px;width:auto;}
.logo span{padding-left:12px;border-left:1px solid var(--accent-tint-2);
  color:var(--accent-ink);font-size:10.5px;font-weight:700;letter-spacing:.08em;white-space:nowrap;}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto;}
.nav-links a{position:relative;padding:6px 0;font-size:13px;font-weight:700;
  color:var(--accent-ink);letter-spacing:.06em;transition:color .2s var(--ease);}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.nav-links a:hover{color:var(--accent-deeper);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-cta{flex:none;}

/* ============================================================
   フッター（コーポレート案Bと同じ濃色。ここだけ暗くして接地させる）
============================================================ */
.site-footer{position:relative;background:#0b1220;color:#94a3b8;
  padding:clamp(44px,6vw,66px) 0 34px;overflow:hidden;}
.site-footer::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-strong) 45%,transparent);}
.foot-grid{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;}
.foot-brand{max-width:28em;}
.foot-brand .logo{margin-bottom:14px;}
/* ロゴPNGは背景を透過に戻してあるので、濃色の上でもそのまま置ける
   （サーモン #D7796F on #0b1220 = 6.1:1）。反転フィルタは不要。 */
.foot-brand .logo span{color:rgba(255,255,255,.62);border-left-color:rgba(255,255,255,.2);}
.foot-brand p{font-size:13.5px;line-height:1.95;color:#94a3b8;}
.site-footer nav{display:flex;flex-wrap:wrap;gap:12px 24px;align-content:flex-start;}
.site-footer nav a{font-size:13.5px;color:#94a3b8;transition:color .2s var(--ease);}
.site-footer nav a:hover{color:#fff;}
.copy{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
  font-size:12px;color:#64748b;line-height:1.8;}

/* ============================================================
   追従バー（スマホ下部固定）。768px以下でだけ出す
============================================================ */
.sticky-cta{display:none;}

/* ============================================================
   お問い合わせフォーム
   マークアップは _parts/contact-form.html、挙動は _parts/contact-form.js
============================================================ */
.form-card{max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:clamp(24px,4vw,44px);}
.sec-tint .form-card{border-color:var(--accent-tint-2);}
.form-row{margin-bottom:20px;}
.form-row label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.form-row .req,.form-row .opt{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;
  padding:2px 9px;border-radius:var(--pill);vertical-align:2px;}
.form-row .req{background:var(--accent-deeper);color:#fff;}
.form-row .opt{background:var(--surface-3);color:var(--ink-3);}
.form-row input,.form-row select,.form-row textarea{width:100%;font-family:var(--font);
  font-size:16px;color:var(--ink);padding:13px 15px;border:1.5px solid var(--line-2);
  border-radius:12px;background:var(--surface);outline:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);}
/* ↑ font-size:16px は必須。これ未満だとiOS Safariが入力時に勝手にズームする */
.form-row textarea{min-height:130px;resize:vertical;line-height:1.8;}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 4px rgba(239,126,109,.22);}
.form-row input[aria-invalid="true"],.form-row textarea[aria-invalid="true"],
.form-row select[aria-invalid="true"]{border-color:#c0392b;background:#fdf4f3;}
.form-row input[aria-invalid="true"]:focus,.form-row textarea[aria-invalid="true"]:focus{
  box-shadow:0 0 0 4px rgba(192,57,43,.18);}

/* 項目直下のエラー文 */
.field-err{display:flex;align-items:flex-start;gap:7px;margin-top:8px;
  font-size:12.5px;font-weight:700;line-height:1.7;color:#b3271a;}
.field-err::before{content:"!";flex:none;display:grid;place-items:center;width:16px;height:16px;
  margin-top:.18em;border-radius:50%;background:#c0392b;color:#fff;font-size:11px;font-weight:800;}
.field-err[hidden]{display:none;}

/* honeypot：ボット用の見えないダミー項目。人には見せない */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

.form-actions{text-align:center;margin-top:26px;}
.form-actions .btn{width:100%;max-width:360px;}
.btn[data-busy="true"]{pointer-events:none;opacity:.72;}
.spinner{flex:none;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.38);border-top-color:#fff;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.form-note{margin-top:16px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.9;}
.form-note a{color:var(--accent-ink);font-weight:700;text-decoration:underline;}

.form-status{margin-top:18px;padding:14px 18px;border-radius:var(--r);text-align:left;
  font-size:13.5px;font-weight:700;line-height:1.85;}
.form-status.is-ok{background:#e7f6ee;border:2px solid #1f8a5b;color:#146043;}
.form-status.is-ng{background:#fdecea;border:2px solid #c0392b;color:#8f2318;}
.form-status.is-todo{background:#fff3bf;border:2px dashed #a3760a;color:#6b4c00;}
.form-status[hidden]{display:none;}

/* ============================================================
   スクロールリビール（コーポレート案Bと同挙動）
============================================================ */
/* JSが有効なときだけ隠す。JSが落ちた環境では最初から見える（白いページを見せない） */
.js .reveal{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);}
.js .reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.js .reveal,.js .reveal.in{opacity:1!important;transform:none!important;transition:none!important;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
}

/* ============================================================
   レスポンシブ（モバイルファースト前提。375pxで完成していること）
============================================================ */
@media(max-width:860px){
  .nav{height:auto;min-height:62px;flex-wrap:wrap;padding:10px 0 6px;gap:12px;}
  .site-header.scrolled .nav{height:auto;}
  .logo img{height:26px;}
  .logo span{display:none;}
  .nav-links{order:3;width:100%;gap:4px;padding:4px 0;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .nav-links::-webkit-scrollbar{display:none;}
  .nav-links a{flex:none;white-space:nowrap;padding:7px 9px;border-radius:var(--pill);
    border:1px solid var(--accent-tint-2);background:var(--accent-tint);font-size:12px;}
  .nav-links a::after{display:none;}
  html{scroll-padding-top:120px;}
}
@media(max-width:768px){
  :root{--sticky-h:88px;}
  .cta-row .btn{flex:1 1 100%;}

  .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:80;display:block;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.95);backdrop-filter:saturate(160%) blur(12px);
    border-top:1px solid var(--accent-tint-2);box-shadow:0 -8px 24px -18px rgba(15,23,42,.7);}
  .sticky-cta .note{margin:0 0 5px;font-size:10px;font-weight:700;color:var(--ink-3);
    text-align:center;line-height:1.4;}
  .sticky-cta .row{display:grid;grid-template-columns:1.35fr 1fr;gap:8px;}
  .sticky-cta .btn{min-height:46px;padding:10px 12px;font-size:13.5px;gap:6px;}
}
@media(max-width:560px){
  section{padding:60px 0;}
}
@media(max-width:400px){
  .wrap{padding:0 16px;}
  .sticky-cta .btn{font-size:12.5px;padding:10px 8px;}
  .sticky-cta .line-mark{display:none;}
}

/* ============================================================
   スマホのヘッダー：ハンバーガー＋ドロワー（2026-08-22）
   コーポレート側と同じ作法。JSが無ければ従来の横スクロールのピル型のまま。
============================================================ */
.nav-burger{display:none;}

@media(max-width:860px){
  .js .nav{flex-wrap:nowrap;min-height:60px;padding-block:9px;gap:10px;}
  /* ⚠️padding のショートハンドは .wrap の左右パディングを消す。必ず padding-block */
  .js .nav-burger{display:inline-flex;align-items:center;justify-content:center;flex:none;
    margin-left:auto;width:44px;height:44px;padding:0;   /* 44px＝タップ領域の下限 */
    border:1px solid var(--accent-tint-2);border-radius:var(--pill);
    background:var(--surface);color:var(--ink);cursor:pointer;}
  .nb-bars{display:grid;gap:4px;width:17px;}
  .nb-bars i{display:block;height:2px;border-radius:2px;background:currentColor;
    transition:transform .3s var(--ease),opacity .2s var(--ease);}
  .js .nav-burger[aria-expanded="true"]{border-color:var(--accent-strong);color:var(--accent-ink);}
  .js .nav-burger[aria-expanded="true"] .nb-bars i:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .js .nav-burger[aria-expanded="true"] .nb-bars i:nth-child(2){opacity:0;}
  .js .nav-burger[aria-expanded="true"] .nb-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  .js .nav-links{position:absolute;left:0;right:0;top:100%;z-index:59;
    order:0;width:auto;display:block;gap:0;padding:0;margin:0;overflow:hidden;
    background:var(--surface);border-bottom:1px solid var(--accent-tint-2);
    box-shadow:0 22px 44px -28px rgba(15,23,42,.5);
    max-height:0;opacity:0;visibility:hidden;
    transition:max-height .34s var(--ease),opacity .22s var(--ease),visibility .34s;}
  .js body.nav-open .nav-links{max-height:min(72vh,400px);opacity:1;visibility:visible;overflow-y:auto;}
  .js .nav-links a{display:block;padding:15px clamp(16px,5vw,40px);min-height:52px;
    border:none;border-radius:0;background:none;white-space:nowrap;
    border-top:1px solid var(--accent-tint-2);font-size:14.5px;color:var(--ink);}
  .js .nav-links a:first-child{border-top:none;}

  .nav-scrim{position:fixed;inset:0;z-index:55;background:rgba(15,23,42,.34);
    opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;}
  .js body.nav-open .nav-scrim{opacity:1;visibility:visible;}
  .js body.nav-open .site-header{background:rgba(255,255,255,.98);backdrop-filter:none;}
  .js body.nav-open{overflow:hidden;}
  html{scroll-padding-top:76px;}   /* ヘッダーが1段になったので詰める */
}
/* ⚠️メディアクエリを跨いで幅が変わると opacity/visibility がトランジションの
   途中値で取り残され、PC幅でナビが消える。861px以上で明示的に戻す。 */
@media(min-width:861px){
  .js .nav-links{max-height:none;opacity:1;visibility:visible;transition:none;}
  .nav-scrim{display:none;}
}
@media(max-width:860px) and (prefers-reduced-motion:reduce){
  .js .nav-links,.nav-scrim,.nb-bars i{transition:none;}
}