@charset "utf-8";
/* =============================================================
南紀黒潮パートナーズ株式会社 公式サイト｜静的HTML本制作
components.css ─ 全ページで使い回す共通コンポーネント
1. スクロール進捗ライン
2. セクション見出し（eyebrow / sec-title / sec-head）
3. CTA・ボタン・テキストリンク
4. ヘッダー（ブランド・PCナビ・メニューボタン）
5. モバイルメニュー
6. ページヒーロー（下層ページ共通の先頭）
7. パンくず
8. お知らせ項目（TOP最新分・お知らせ一覧で共用）
9. お問い合わせCTA（全ページ末尾で共用）
10. 代表者ブロック（TOP・会社情報で共用）
11. 補足の注記
12. フッター
WordPress移行時の対応は README.md の対応表を参照。
ページ固有のセクションは pages/<ページ名>.css へ書く。
============================================================= */
/* -------------------------------------------------------------
1. スクロール進捗ライン（画面上端 2px）
------------------------------------------------------------- */
.scroll-progress{position:fixed;left:0;top:0;z-index:60;width:100%;height:2px;pointer-events:none}
.scroll-progress span{
display:block;width:100%;height:100%;background:var(--gold);
transform:scaleX(var(--progress,0));transform-origin:left;
}
/* -------------------------------------------------------------
2. セクション見出し
英字ラベル ＋ 金の縦罫 ＋ 日本語ラベル、その下に明朝の見出し。
------------------------------------------------------------- */
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px;color:var(--blue)}
.eyebrow .en{
font-family:var(--font-en);font-size:11px;font-weight:600;letter-spacing:.22em;line-height:1;
color:var(--gold-text);
}
.eyebrow .ja{
padding-left:14px;border-left:1px solid var(--gold);
font-size:12px;letter-spacing:.14em;line-height:1;color:var(--muted);
}
/* 濃紺・写真の上に置く場合 */
.eyebrow-light{color:var(--on-dark-soft)}
.eyebrow-light .en{color:var(--gold-light)}
.eyebrow-light .ja{color:var(--on-dark-soft);border-left-color:var(--gold-light)}
.sec-title{font-size:clamp(27px,3.9vw,49px);line-height:1.62;letter-spacing:.07em}
.sec-lead{font-size:clamp(17px,2vw,22px);line-height:1.95;letter-spacing:.07em}
/* 見出しと、右端のテキストリンクを同じ行に並べる */
.sec-head{
display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
margin-bottom:clamp(44px,5.5vw,76px);
}
/* 背景へ薄く敷く一文字（装飾。親へ position:relative と overflow:hidden が必要） */
.ghost-type{
position:absolute;right:-.08em;top:-.12em;
font-size:clamp(200px,30vw,420px);font-weight:500;line-height:1;
color:var(--gold);opacity:.09;pointer-events:none;user-select:none;
}
/* -------------------------------------------------------------
3. CTA・ボタン・テキストリンク
共通の言語は「テキスト ＋ 細い水平ライン ＋ 円のノード ＋ 小さな矢印」。
触れるとラインが伸び、ノードが少し進み、矢印が金に変わる。
強いグラデーション・ネオン・3D・大きな影は使わない。
------------------------------------------------------------- */
.flow-cue{position:relative;display:inline-flex;align-items:center;flex:0 0 68px;width:68px;height:32px;color:inherit}
.flow-line{
position:absolute;left:0;right:30px;top:50%;height:1px;background:currentColor;opacity:.6;
transform:scaleX(.7);transform-origin:left;
transition:transform var(--flow-time) var(--ease),opacity var(--flow-time) var(--ease);
}
.flow-node{
position:absolute;right:0;top:1px;display:grid;place-items:center;width:30px;height:30px;
border:1px solid currentColor;border-radius:50%;opacity:.6;
transition:transform var(--flow-time) var(--ease),opacity var(--flow-time) var(--ease);
}
.flow-node svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.button{
display:inline-flex;align-items:center;justify-content:space-between;gap:24px;
min-height:66px;padding:14px 24px;border-radius:2px;
background:var(--blue);color:#fff;
font-family:var(--font-ja);font-weight:500;font-size:15px;letter-spacing:.09em;line-height:1.6;
transition:background var(--flow-time) var(--ease),color var(--flow-time) var(--ease);
}
.button:hover{background:#1a5470}
.button-light{background:var(--white);color:var(--blue)}
.button-light:hover{background:var(--tint)}
.button-block{width:100%}
.button-lg{min-height:88px;padding:20px 26px;font-size:16px}
.text-link{
display:inline-flex;align-items:center;gap:16px;min-height:44px;
color:var(--blue);
font-family:var(--font-ja);font-weight:500;font-size:14.5px;letter-spacing:.08em;
}
.text-link .flow-cue{flex-basis:54px;width:54px;height:24px}
.text-link .flow-line{right:20px}
.text-link .flow-node{width:22px;height:22px;border-color:transparent;opacity:.9}
.text-link .flow-node svg{width:16px;height:16px}
.text-link-light{color:#fff}
/* 触れたときの共通挙動 */
:is(.button,.text-link,.nav-contact,.mobile-menu nav a,a.news-item):is(:hover,:focus-visible) .flow-line{
transform:scaleX(1);opacity:1;
}
:is(.button,.text-link,.nav-contact,.mobile-menu nav a,a.news-item):is(:hover,:focus-visible) .flow-node{
transform:translateX(5px);opacity:1;color:var(--gold);
}
:is(.button,.nav-contact):is(:hover,:focus-visible) .flow-node{border-color:var(--gold)}
/* 主要CTAは静止状態から矢印を金にする */
.button-primary-cue .flow-node{border-color:var(--gold);color:var(--gold);opacity:1}
/* 補助的な小さいリンク・ボタン */
.plain-link{font-size:12.5px;letter-spacing:.06em;text-decoration:underline;text-underline-offset:4px}
/* -------------------------------------------------------------
4. ヘッダー
data-mode="over" ：ファーストビューの上（透明・白文字）
data-mode="solid" ：オフホワイト・濃紺文字。下層ページは最初からこちら。
------------------------------------------------------------- */
.site-header{
position:fixed;left:0;top:0;z-index:50;
display:flex;align-items:center;justify-content:space-between;gap:24px;
width:100%;height:var(--header-h);padding-inline:var(--gutter);
transition:background .5s var(--ease),color .5s var(--ease),height .4s var(--ease),box-shadow .5s var(--ease);
}
.site-header[data-mode="over"]{background:transparent;color:#fff}
.site-header[data-mode="solid"]{
height:76px;background:rgba(248,248,244,.94);color:var(--ink);
box-shadow:0 1px 0 rgba(27,48,57,.1);backdrop-filter:blur(8px);
}
/* ブランド（symbolロゴ ＋ HTMLテキストの社名）。社名は画像化しない。 */
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:54px;height:46px;object-fit:contain;transition:filter .5s var(--ease)}
.site-header[data-mode="over"] .brand img{filter:brightness(0) invert(1)}
.brand-text{display:block}
.brand-name{display:block;font-size:17.5px;font-weight:700;letter-spacing:.09em;line-height:1.4}
.brand-co{font-size:11px;font-weight:500;letter-spacing:.04em;margin-left:5px}
.brand-text small{
display:block;margin-top:4px;
font-family:var(--font-en);font-size:8px;font-weight:500;letter-spacing:.2em;line-height:1.6;opacity:.72;
}
/* PCナビ。1024pxまでは横並びを維持する。 */
.desktop-nav{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:500;letter-spacing:.09em}
.desktop-nav a{position:relative;padding-block:6px}
.desktop-nav a:not(.nav-contact)::after{
content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
transform:scaleX(0);transform-origin:right;transition:transform .42s var(--ease);
}
.desktop-nav a:not(.nav-contact):is(:hover,:focus-visible)::after{transform:scaleX(1);transform-origin:left}
/* 現在地のページ（aria-current="page"）と、その配下の個別ページ（aria-current="true"）は下線を出したままにする */
.desktop-nav a[aria-current]:not(.nav-contact)::after{transform:scaleX(1);transform-origin:left;opacity:.55}
.nav-contact{
display:inline-flex;align-items:center;gap:16px;min-height:52px;padding:8px 18px;
border:1px solid currentColor;border-radius:2px;
transition:background var(--flow-time) var(--ease),color var(--flow-time) var(--ease);
}
.nav-contact .flow-cue{flex-basis:44px;width:44px;height:26px}
.nav-contact .flow-line{right:22px}
.nav-contact .flow-node{width:24px;height:24px}
.site-header[data-mode="solid"] .nav-contact:hover{background:var(--blue);color:#fff}
/* お問い合わせページでは、現在地として最初から塗りつぶす */
.site-header[data-mode="solid"] .nav-contact[aria-current="page"]{background:var(--blue);color:#fff}
.site-header[data-mode="over"] .nav-contact:hover{background:#fff;color:var(--blue)}
/* メニューボタン：一般的な3本線は使わず、長さの違う2本線。開くとcloseへ変形。 */
.menu-toggle,.menu-close{
display:none;flex-direction:column;align-items:center;justify-content:center;gap:7px;
width:48px;height:48px;flex:0 0 48px;line-height:1;
}
.menu-lines{position:relative;display:block;width:28px;height:16px}
.menu-lines::before,.menu-lines::after{
content:"";position:absolute;right:0;height:1px;background:currentColor;transform-origin:center;
transition:width .4s var(--ease),transform .4s var(--ease),top .4s var(--ease);
}
.menu-lines::before{width:28px;top:3px}
.menu-lines::after{width:18px;top:12px}
.menu-toggle-label,.menu-close-label{font-family:var(--font-en);font-size:8px;font-weight:600;letter-spacing:.14em}
.menu-toggle[aria-expanded="true"] .menu-lines::before,
.mobile-menu[data-state="open"] .menu-close .menu-lines::before{width:25px;top:8px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-lines::after,
.mobile-menu[data-state="open"] .menu-close .menu-lines::after{width:25px;top:8px;transform:rotate(-45deg)}
/* -------------------------------------------------------------
5. モバイルメニュー（右パネル型・画面を覆いきらない）
------------------------------------------------------------- */
.mobile-menu{
position:fixed;inset:0 0 0 auto;z-index:80;
width:min(354px,86vw);max-width:none;height:100dvh;max-height:100dvh;
margin:0;padding:20px 28px 36px;border:0;
background:var(--blue);color:#fff;
overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;isolation:isolate;
opacity:0;transform:translateX(26px);
transition:opacity .46s var(--ease),transform .46s var(--ease);
}
.mobile-menu[data-state="open"]{opacity:1;transform:translateX(0)}
.mobile-menu[data-state="closing"]{opacity:0;transform:translateX(26px);transition-duration:.34s}
.mobile-menu::backdrop{background:rgba(7,24,34,.5);opacity:0;transition:opacity .4s var(--ease)}
.mobile-menu[data-state="open"]::backdrop{opacity:1}
.menu-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}
.menu-logo{width:56px;height:44px;object-fit:contain;filter:brightness(0) invert(1)}
.menu-close{display:flex;margin-right:-6px;color:#fff}
.menu-section-label{
display:flex;align-items:baseline;gap:14px;margin:42px 0 14px;
font-family:var(--font-en);font-size:10px;font-weight:500;letter-spacing:.2em;color:#c6dce4;
}
.menu-section-label span{font-family:var(--font-ja);font-size:10.5px;letter-spacing:.08em}
.mobile-menu nav{position:relative;z-index:1;display:grid}
.mobile-menu nav a{
display:grid;grid-template-columns:26px 1fr 42px;align-items:center;gap:12px;
min-height:80px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.28);
font-weight:500;
opacity:0;transform:translateX(8px);
transition:opacity .3s var(--ease),transform .3s var(--ease);
transition-delay:calc(var(--menu-order) * .055s);
}
.mobile-menu nav a:first-child{border-top:1px solid rgba(255,255,255,.28)}
.mobile-menu[data-state="open"] nav a{opacity:1;transform:none}
.mobile-menu[data-state="closing"] nav a{transition-duration:.18s;transition-delay:calc((3 - var(--menu-order)) * .025s)}
.menu-number{font-family:var(--font-en);font-size:10px;font-weight:500;letter-spacing:.06em;color:var(--gold-light)}
.menu-item-label{font-size:19px;letter-spacing:.1em;white-space:nowrap}
.mobile-menu .flow-cue{flex-basis:42px;width:42px;height:26px}
.mobile-menu .flow-line{right:22px}
.mobile-menu .flow-node{width:24px;height:24px;border-color:rgba(255,255,255,.5)}
.mobile-menu .flow-node svg{width:15px;height:15px}
.menu-signature{position:relative;z-index:1;margin-top:46px}
.menu-signature p{font-size:19px;line-height:1.9;letter-spacing:.09em}
.menu-signature small{
display:block;margin-top:26px;
font-family:var(--font-en);font-size:8px;letter-spacing:.18em;color:#c0d6df;
}
/* 正式markを薄いwatermarkとして使う */
.menu-watermark{
position:absolute;z-index:-1;right:-92px;bottom:30px;
width:400px;max-width:none;height:340px;object-fit:contain;
filter:brightness(0) invert(1);opacity:0;transform:translateX(10px);pointer-events:none;
transition:opacity .44s var(--ease) .1s,transform .44s var(--ease) .1s;
}
.mobile-menu[data-state="open"] .menu-watermark{opacity:.07;transform:none}
.mobile-menu :is(a,button):focus-visible{outline:2px solid #d8ebee;outline-offset:5px}
/* 768px以下でPCナビとメニューボタンを入れ替える */
@media (max-width:768px){
.desktop-nav{display:none}
.menu-toggle{display:flex}
.site-header[data-mode="solid"]{height:66px}
}
/* -------------------------------------------------------------
6. ページヒーロー（下層ページ共通の先頭）
TOPのファーストビューとは別。濃紺で高さを抑え、ページ名を明朝で置く。
写真を使う場合は .page-hero-media を入れる（任意）。
------------------------------------------------------------- */
.page-hero{
position:relative;overflow:hidden;
padding:calc(var(--header-h) + clamp(52px,8vw,96px)) 0 clamp(52px,7vw,88px);
background:var(--deep);color:#fff;
}
.page-hero-media{position:absolute;inset:0;overflow:hidden}
.page-hero-media img{
position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;
translate:0 var(--py,0px);
}
/* 写真の有無にかかわらず、文字が読める濃さを確保する */
.page-hero-scrim{
position:absolute;inset:0;
background:
linear-gradient(180deg,rgba(6,26,35,.72) 0%,rgba(7,29,39,.58) 60%,rgba(7,29,39,.82) 100%),
linear-gradient(100deg,rgba(10,37,49,.8) 0%,rgba(10,37,49,.3) 72%);
}
/* 黒潮を思わせる流線（装飾） */
.page-hero-flow{
position:absolute;left:0;bottom:-10%;width:100%;height:78%;
fill:none;stroke:#cfe6ee;stroke-width:1;opacity:.22;
}
.page-hero-inner{position:relative;z-index:1}
.page-hero-title{
font-size:clamp(28px,4.6vw,54px);line-height:1.55;letter-spacing:.08em;
text-shadow:0 2px 26px rgba(4,20,28,.35);
text-wrap:balance; /* 2行になる長いページ名の行長をそろえる（対応ブラウザのみ） */
}
.page-hero-lead{
max-width:46em;margin-top:clamp(18px,2.6vw,28px);
font-size:15px;line-height:2.15;letter-spacing:.07em;color:var(--on-dark);
text-wrap:pretty;
}
@media (max-width:600px){
.page-hero-lead{font-size:13.5px;line-height:2.05}
}
/* -------------------------------------------------------------
7. パンくず
ページヒーローの直後に置く。TOPには置かない。
------------------------------------------------------------- */
.breadcrumb{background:var(--paper);border-bottom:1px solid var(--line)}
.breadcrumb ol{
display:flex;align-items:center;flex-wrap:wrap;gap:2px 12px;
padding-block:10px;
font-size:12px;letter-spacing:.06em;line-height:1.8;color:var(--muted);
}
.breadcrumb li{display:flex;align-items:center;gap:12px}
/* リンクと現在地は上下に余白を持たせ、クリック・タップの対象を24px以上にする。
その分 ol の上下余白を詰めてあるので、帯全体の高さは変わらない。 */
.breadcrumb :is(a,span){display:inline-block;padding-block:4px}
/* 項目の後ろに金の小さな山括弧を置く */
.breadcrumb li:not(:last-child)::after{
content:"";width:5px;height:5px;
border-top:1px solid var(--gold);border-right:1px solid var(--gold);
transform:rotate(45deg);
}
.breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}
.breadcrumb [aria-current="page"]{color:var(--ink)}
/* -------------------------------------------------------------
8. お知らせ項目
TOPの最新分と、お知らせ一覧ページで同じ見た目を使う。
1件＝日付 / 分類 / タイトル / 矢印
（Phase 2ではWordPressのループから template-parts/news-item.php として出力する）
0件＝
------------------------------------------------------------- */
.news-list{border-top:1px solid var(--line)}
.news-list li{border-bottom:1px solid var(--line)}
.news-item{
display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap;
padding:26px 4px;
transition:background .4s var(--ease);
}
a.news-item:hover{background:var(--paper)}
.news-date{font-family:var(--font-en);font-size:12.5px;font-weight:500;letter-spacing:.1em;color:var(--muted)}
.news-category{
padding:5px 14px;border:1px solid var(--line);border-radius:999px;
font-size:11.5px;letter-spacing:.1em;line-height:1.6;color:var(--blue);
}
/* タイトルは でも でも同じ見た目にする。幅が足りない場合は次の行へ回る */
.news-title{flex:1 1 240px;font-size:15px;font-weight:500;letter-spacing:.06em;line-height:1.8}
/* 右端の矢印（テキストリンクと同じ小さなライン＋ノード）。触れると伸びて金になる */
.news-arrow{flex:0 0 54px;width:54px;height:24px;margin-left:auto;color:var(--blue)}
.news-arrow .flow-line{right:20px}
.news-arrow .flow-node{width:22px;height:22px;border-color:transparent;opacity:.9}
.news-arrow .flow-node svg{width:16px;height:16px}
@media (max-width:600px){
.news-item{gap:10px 14px;padding-block:22px}
.news-title{flex-basis:200px;font-size:14.5px}
}
/* 0件のとき。TOP・一覧ページで共用。
カードにせず、一覧と同じ罫線の枠の中に文だけを置く（記事が入れば同じ枠が一覧になる）。 */
.news-empty{
padding:clamp(34px,4.4vw,56px) 4px;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.news-empty p{
font-size:clamp(15.5px,1.35vw,17px);font-weight:500;letter-spacing:.1em;line-height:2;
color:var(--ink);
}
/* 補足の一文（一覧ページのみ）。小さく、色を落として置く */
.news-empty .news-empty-sub{
margin-top:8px;
font-size:13px;font-weight:400;letter-spacing:.06em;line-height:2;color:var(--muted);
}
/* -------------------------------------------------------------
9. お問い合わせCTA（全ページ末尾で共用）
電話番号・料金・「無料相談」表記は置かない。
------------------------------------------------------------- */
.contact-cta{position:relative;overflow:hidden;padding-block:clamp(80px,10vw,148px);background:var(--contact)}
/* 右上の金の円弧 */
.contact-cta::before{
content:"";position:absolute;right:-190px;top:-150px;
width:470px;height:470px;border:1px solid rgba(176,141,78,.4);border-radius:50%;pointer-events:none;
}
.contact-cta-inner{
position:relative;
display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
gap:clamp(34px,5vw,72px);align-items:end;
}
.contact-cta .sec-title{font-size:clamp(29px,4.4vw,54px)}
.contact-cta-copy p{margin-top:1.7em;font-size:15px;line-height:2.15;color:var(--ink-soft)}
.contact-cta-action{display:grid}
@media (max-width:1024px){
.contact-cta-inner{grid-template-columns:1fr;align-items:start}
}
@media (max-width:600px){
.contact-cta .button-lg{min-height:76px;font-size:15px}
}
/* -------------------------------------------------------------
10. 代表者ブロック（TOPと会社情報で共用）
写真・氏名・個人の経歴。会社の提供業務と、代表者個人の経歴を
視覚的に分離するための部品。
------------------------------------------------------------- */
.company-photo{position:relative;overflow:hidden;margin:0;background:var(--tint)}
.company-photo img{width:100%;height:auto}
/* 写真は下から開くように見せる。
clip-path は figure ではなく img 側へ当てる（figureに当てると表示判定に影響するため）。 */
.js-motion .company-photo img{
clip-path:inset(0 0 100% 0);transform:scale(1.06);
transition:clip-path 1.1s var(--ease),transform 1.4s var(--ease);
}
.js-motion .company-photo.is-revealed img{clip-path:inset(0 0 0 0);transform:scale(1)}
.company-place{
margin-top:14px;
font-family:var(--font-en);font-size:10px;font-weight:500;letter-spacing:.24em;color:var(--muted);
}
.company-name{
display:flex;align-items:baseline;gap:16px;
margin-top:8px;padding-top:26px;border-top:1px solid rgba(176,141,78,.5);
}
.company-name span{font-size:12px;letter-spacing:.14em;color:var(--muted)}
.company-name strong{font-size:23px;letter-spacing:.16em}
.profile{margin-top:26px;padding:24px 26px;background:var(--tint);border-radius:2px}
.profile-label{margin-bottom:12px;font-size:11px;letter-spacing:.16em;color:var(--muted)}
.profile li{font-size:13.5px;line-height:2;letter-spacing:.05em;color:var(--ink-soft)}
/* -------------------------------------------------------------
11. 補足の注記（提携先・出典など）
------------------------------------------------------------- */
.note{font-size:13px;line-height:2;letter-spacing:.06em;color:var(--muted);text-wrap:pretty}
.note-boxed{
margin-top:clamp(26px,3vw,38px);padding:20px 24px;
border-left:1px solid var(--gold);background:var(--tint);
}
/* -------------------------------------------------------------
12. フッター
------------------------------------------------------------- */
.site-footer{padding-block:clamp(54px,6vw,80px) 34px;background:var(--deep);color:#e4edf1}
.site-footer .brand img{filter:brightness(0) invert(1)}
.footer-main{
display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.16);
}
.footer-main nav{display:flex;gap:clamp(18px,2.6vw,38px);flex-wrap:wrap;font-size:14px;letter-spacing:.08em}
.footer-main nav a{padding-block:4px;border-bottom:1px solid transparent;transition:border-color .4s var(--ease)}
.footer-main nav a:hover{border-color:currentColor}
.footer-bottom{
display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
margin-top:26px;font-size:12.5px;letter-spacing:.06em;color:rgba(228,237,241,.72);
}
.footer-bottom a:hover{text-decoration:underline;text-underline-offset:4px}
/* 補助ページへの小さなリンク（プライバシーポリシー／サイトマップ）を横に並べる */
.footer-sub{display:flex;flex-wrap:wrap;gap:8px clamp(18px,2.4vw,30px)}
/* -------------------------------------------------------------
13. ヘッダー・ブランドの縮小（狭い画面）
------------------------------------------------------------- */
@media (max-width:1180px){
.brand-name{font-size:16px}
.desktop-nav{gap:22px;font-size:13.5px}
}
@media (max-width:1024px){
.brand img{width:48px;height:42px}
.brand-name{font-size:14.5px;letter-spacing:.05em}
.brand-text small{font-size:7px;letter-spacing:.16em}
.desktop-nav{gap:16px;font-size:12.5px}
.nav-contact{gap:10px;min-height:48px;padding-inline:13px}
.nav-contact .flow-cue{flex-basis:32px;width:32px}
.nav-contact .flow-line{display:none}
}
@media (max-width:600px){
body{font-size:15px}
.brand img{width:42px;height:38px}
.brand-name{font-size:13.5px}
.brand-co{font-size:9px;margin-left:3px}
.brand-text small{font-size:6.5px}
}
@media (max-width:360px){
.brand img{width:37px}
.brand-name{font-size:12px}
.mobile-menu{padding-inline:22px}
.menu-item-label{font-size:17px}
.menu-signature p{font-size:17px}
}