/* ==========================================================
   合同会社匠 TAKUMI G.K. — Corporate Site Style
   ========================================================== */

:root{
  --bg:        #14100f;
  --bg-alt:    #1c1614;
  --bg-card:   #211a17;
  --ink:       #f4ece2;
  --ink-soft:  #cabdae;
  --ink-mute:  #8f8275;
  --gold:      #b8935a;
  --gold-soft: #8d774f;
  --gold-line: rgba(184,147,90,0.28);
  --wine:      #7c1f2e;
  --wine-light:#a8384a;
  --wine-line: rgba(168,56,74,0.35);
  --serif:     'Shippori Mincho', 'Noto Serif JP', serif;
  --sans:      'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --accent-en: var(--serif); /* unified to one elegant serif — no second typeface */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; z-index:999;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition: opacity .9s var(--ease), visibility .9s var(--ease);
}
.loader-mark{
  font-family: var(--serif); color: var(--gold); font-size: 2.4rem;
  letter-spacing: .5em; padding-left: .5em;
  opacity:0; animation: loaderFade 1.6s var(--ease) forwards;
}
.loader-sub{
  display:block; font-family: var(--accent-en); font-style: normal;
  font-size: .7rem; letter-spacing: .4em; color: var(--ink-mute);
  margin-top: 16px; text-align:center;
  opacity:0; animation: loaderFade 1.6s .3s var(--ease) forwards;
}
@keyframes loaderFade{ to{ opacity:1; } }
.loader.done{ opacity:0; visibility:hidden; pointer-events:none; }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: .03em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3{ font-family: var(--serif); font-weight: 600; margin:0; }
ul{ margin:0; padding:0; list-style:none; }
.section-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 6vw;
}

/* ---------- Header ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 200;
  padding: 22px 0;
  transition: background .5s var(--ease), padding .4s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
  background: rgba(20,16,15,0.55);
}
/* backdrop-filter lives on a ::before layer, not on .site-header itself —
   a filter/backdrop-filter on .site-header would create a new containing
   block for its position:fixed descendants (the mobile .main-nav panel),
   collapsing it down to the header's own height instead of the full viewport */
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  opacity:0; transition: opacity .5s var(--ease);
  backdrop-filter: blur(10px);
}
.site-header.scrolled{
  background: rgba(20,16,15,0.94);
  padding: 12px 0;
  border-color: var(--gold-line);
}
.site-header.scrolled::before{ opacity:1; }
.header-inner{
  max-width: 1280px; margin:0 auto; padding: 0 6vw;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand-mark{
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--gold-line);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-size: 1.15rem; color: var(--gold);
  transition: height .4s var(--ease), width .4s var(--ease);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-name{ font-family: var(--serif); font-size: 1rem; letter-spacing:.16em; color: var(--ink); }
.brand-sub{
  font-family: var(--accent-en); font-size: .64rem; letter-spacing: .32em;
  color: var(--gold); font-style: normal; text-transform: uppercase;
}
.main-nav{ display:flex; align-items:center; gap: 30px; }
.main-nav a{
  font-size: .8rem; letter-spacing: .1em; color: var(--ink-soft);
  position: relative; padding-bottom: 4px; transition: color .3s;
}
.main-nav a:not(.nav-cta):after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--gold); transition: width .35s var(--ease);
}
.main-nav a:not(.nav-cta):hover,
.main-nav a.active{ color: var(--ink); }
.main-nav a:not(.nav-cta):hover:after,
.main-nav a.active:after{ width:100%; }
.nav-cta{
  border: 1px solid var(--wine-line);
  background: var(--wine);
  padding: 9px 20px !important;
  border-radius: 2px;
  color: var(--ink) !important;
}
.nav-cta:hover{ background: var(--wine-light); border-color: var(--wine-light); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:none; cursor:pointer; z-index:210;
}
.nav-toggle span{ width:100%; height:1px; background: var(--ink); transition: transform .35s var(--ease), opacity .3s; }

/* ---------- Hero (home) — sticky "curtain" hero: the next section
   scrolls up over it while it stays pinned, like megui-restaurant.com ---------- */
.hero{
  position: relative; min-height: 92svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(16,12,11,.5) 0%, rgba(16,12,11,.4) 45%, rgba(12,9,8,.92) 100%),
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,31,46,.35), transparent 60%),
    url('../images/hero-sommelier-window.jpg') center 25% / cover no-repeat;
}
.hero-pattern{
  position:absolute; inset:0; opacity:.35; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='145.4' viewBox='0 0 84 145.4'%3E%3Cg fill='none' stroke='%23e9d3ab' stroke-width='0.5' opacity='0.45'%3E%3Cpath d='M42 0 L84 24.2 L84 72.7 L42 96.9 L0 72.7 L0 24.2 Z'/%3E%3Cpath d='M42 0 L42 96.9 M0 24.2 L84 72.7 M84 24.2 L0 72.7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 110px 190px;
}
.hero-content{ position:relative; z-index:2; text-align:center; color: var(--ink); padding: 140px 20px 80px; }
.hero-eyebrow{
  font-family: var(--accent-en); font-style: normal; letter-spacing: .38em;
  font-size: .92rem; color: var(--gold); margin: 0 0 26px;
  text-transform: uppercase; opacity:0; animation: fadeUp 1s .4s var(--ease) forwards;
}
.hero-title{
  font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: .1em; line-height:1.3;
  opacity:0; animation: fadeUp 1.2s .7s var(--ease) forwards;
}
.hero-title .en{
  display:block; font-family: var(--accent-en); font-style: normal; font-weight:400;
  font-size: .32em; letter-spacing: .5em; color: var(--gold); margin-top: 18px;
}
.hero-tagline{
  margin: 30px auto 0; max-width: 620px; font-size: 1rem; color: var(--ink-soft);
  opacity:0; animation: fadeUp 1.2s 1s var(--ease) forwards;
}
.hero-cta{
  margin-top: 44px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  opacity:0; animation: fadeUp 1.2s 1.3s var(--ease) forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform: translateY(22px);} to{ opacity:1; transform:none; } }

.hero-scroll{
  position:absolute; left: 6vw; bottom:40px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  color: var(--ink-soft);
}
.hero-scroll .scroll-label{
  writing-mode: vertical-rl; font-family: var(--accent-en); font-style:normal;
  letter-spacing:.2em; font-size:.78rem; text-transform:uppercase;
}
.hero-scroll .scroll-line{ width:1px; height:64px; overflow:hidden; }
.hero-scroll .scroll-line span{
  display:block; width:1px; height:100%; background: var(--gold);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ transform: translateY(-100%);} 50%{ transform: translateY(0);} 100%{ transform: translateY(100%);}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding: 15px 36px;
  letter-spacing: .12em; font-size: .86rem; border-radius: 2px;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn-primary{ background: var(--wine); color: var(--ink); border: 1px solid var(--wine); }
.btn-primary:hover{ background: var(--wine-light); border-color: var(--wine-light); }
.btn-ghost{ border: 1px solid var(--gold-line); color: var(--gold); }
.btn-ghost:hover{ background: var(--gold); color: var(--bg); border-color: var(--gold); }

/* ---------- Page hero (inner pages) — same sticky "curtain" treatment ---------- */
.page-hero{
  position: sticky; top: 0; z-index: 0;
  min-height: 78svh; padding: 120px 6vw; text-align:center; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(124,31,46,.3), transparent 65%),
    var(--bg-alt);
}
/* photo variants — same dark overlay treatment as .hero, per-page background image */
.page-hero.photo-wine{
  background:
    linear-gradient(180deg, rgba(16,12,11,.55) 0%, rgba(16,12,11,.45) 45%, rgba(12,9,8,.9) 100%),
    url('../images/wine-cellar-corridor.jpg') center 45% / cover no-repeat;
}
.page-hero.photo-consulting{
  background:
    linear-gradient(180deg, rgba(16,12,11,.6) 0%, rgba(16,12,11,.45) 45%, rgba(12,9,8,.9) 100%),
    url('../images/restaurant-counter-glass.jpg') center 40% / cover no-repeat;
}
.page-hero.photo-about{
  background:
    linear-gradient(180deg, rgba(16,12,11,.6) 0%, rgba(16,12,11,.45) 45%, rgba(12,9,8,.9) 100%),
    url('../images/about-hero.jpg') center 55% / cover no-repeat;
}
.page-hero.photo-contact{
  background:
    linear-gradient(180deg, rgba(16,12,11,.6) 0%, rgba(16,12,11,.45) 45%, rgba(12,9,8,.9) 100%),
    url('../images/contact-hero.jpg') center 55% / cover no-repeat;
}
.page-hero.photo-menu{
  background:
    linear-gradient(180deg, rgba(16,12,11,.6) 0%, rgba(16,12,11,.45) 45%, rgba(12,9,8,.9) 100%),
    url('../images/menu-hero.jpg') center 50% / cover no-repeat;
}
.page-hero-en{
  position:relative; z-index:1;
  font-family: var(--accent-en); font-style: normal; letter-spacing:.32em;
  color: var(--gold); font-size: .82rem; text-transform:uppercase; margin: 0 0 20px;
}
.page-hero-ghost{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family: var(--serif); font-size: clamp(7rem, 26vw, 17rem);
  color: var(--gold); opacity:.06; white-space:nowrap; pointer-events:none;
  z-index:0; user-select:none; line-height:1;
}
.page-hero h1{
  position:relative; z-index:1;
  font-size: clamp(2.6rem, 8vw, 5rem); font-weight:500; letter-spacing:.06em;
}
.page-hero p{ position:relative; z-index:1; color: var(--ink-soft); max-width: 620px; margin: 24px auto 0; }
.breadcrumb{
  position:relative; z-index:1; font-size:.76rem; color: var(--ink-mute);
  letter-spacing:.05em; margin-bottom: 26px;
}
.breadcrumb a{ color: var(--gold); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Section common ---------- */
/* every section after the sticky hero needs an opaque background and a
   higher stacking position so it slides over the pinned hero as it scrolls */
section{ position: relative; z-index: 1; padding: 120px 0; background: var(--bg); }
.bg-alt{ background: var(--bg-alt); }

/* ---------- Giant title divider (large thin English heading + ghost watermark) ---------- */
.giant-title-wrap{
  position:relative; text-align:center; padding: 10px 0 30px; overflow:hidden;
}
.giant-title-wrap .ghost{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-52%);
  font-family: var(--serif); font-size: clamp(6rem, 22vw, 15rem);
  color: var(--gold); opacity:.05; white-space:nowrap; pointer-events:none;
  z-index:0; user-select:none; line-height:1;
}
.giant-title-wrap .giant-title{
  position:relative; z-index:1; margin:0;
  font-family: var(--accent-en); font-style: normal; font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 6rem); letter-spacing:.04em; color: var(--ink);
  line-height:1.05;
}
.giant-title-wrap .giant-sub{
  position:relative; z-index:1; display:block; margin-top:18px;
  font-size:.86rem; color: var(--ink-mute); letter-spacing:.06em;
}

/* ---------- Floating CTA (persistent, fixed — replaces to-top) ---------- */
.floating-cta{
  position:fixed; right: 24px; bottom: 24px; z-index: 250;
  width: 104px; height: 104px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; font-size:.7rem; letter-spacing:.03em; line-height:1.5;
  box-shadow: 0 16px 36px -12px rgba(0,0,0,.6);
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.floating-cta svg{ width:20px; height:20px; margin-bottom:6px; }
.floating-cta:hover{ transform: translateY(-4px); background: var(--wine); color: var(--ink); }
@media (max-width: 720px){
  .floating-cta{ width:84px; height:84px; font-size:.62rem; right:16px; bottom:16px; }
  .floating-cta svg{ width:17px; height:17px; margin-bottom:4px; }
}
.section-label{
  font-family: var(--accent-en); font-style: normal; color: var(--gold);
  letter-spacing: .32em; font-size: .8rem; text-transform: uppercase; margin: 0 0 18px;
}
.section-label::before{
  content:''; display:inline-block; width:26px; height:1px; background: var(--gold);
  margin-right:12px; vertical-align: middle;
}
.center-label::before{ display:none; }
.section-title{
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.6; color: var(--ink);
  letter-spacing: .06em;
}
.section-head.center{ text-align:center; margin-bottom: 60px; }
.lead{ color: var(--ink-soft); font-size: 1rem; }
.center-text{ max-width: 660px; margin: 22px auto 0; }
p{ color: var(--ink-soft); }

/* ---------- Intro / split ---------- */
.split-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items:center;
}
.split-visual{
  position:relative; aspect-ratio: 4/5; border-radius: 2px; overflow:hidden;
  border: 1px solid var(--gold-line);
  background:
    radial-gradient(circle at 30% 20%, rgba(184,147,90,.18), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(124,31,46,.4), transparent 55%),
    linear-gradient(160deg, #241b18, #170f0e 70%);
  display:flex; align-items:center; justify-content:center;
}
.split-visual .glyph{
  width: 46%; height: auto; opacity:.9;
}
.split-visual img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.split-text p{ margin: 0 0 20px; }
.split-text p:last-child{ margin-bottom:0; }

/* ---------- Service cards ---------- */
.card-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.service-card{
  background: var(--bg-card); border: 1px solid var(--gold-line); border-radius: 3px;
  padding: 46px 34px; text-align:center;
  transition: border-color .4s, transform .4s var(--ease);
}
.service-card:hover{ border-color: var(--gold); transform: translateY(-6px); }
.service-card .icon{
  width:56px; height:56px; margin: 0 auto 26px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border: 1px solid var(--wine-line); color: var(--wine-light);
}
.service-card .icon svg{ width:26px; height:26px; }
.service-card h3{ font-size: 1.1rem; letter-spacing:.06em; margin-bottom: 16px; }
.service-card p{ font-size: .92rem; margin: 0 0 24px; }
.service-card .more{
  font-family: var(--accent-en); font-style: normal; color: var(--gold);
  letter-spacing: .1em; font-size: .82rem; text-transform:uppercase;
  border-bottom: 1px solid var(--gold-line); padding-bottom: 4px;
}

/* ---------- Detail blocks (wine business) ---------- */
.detail-block{
  display:grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items:center;
  padding: 90px 0; border-top: 1px solid var(--gold-line);
}
.detail-block:first-of-type{ border-top:none; }
.detail-block.reverse{ direction: rtl; }
.detail-block.reverse > *{ direction: ltr; }
.detail-num{
  font-family: var(--accent-en); font-style: normal; color: var(--wine-light);
  font-size: 1rem; letter-spacing:.2em; margin-bottom: 14px; display:block;
}
.detail-block h3{ font-size: 1.4rem; letter-spacing:.06em; margin-bottom: 20px; }
.detail-block p{ margin: 0 0 16px; }
.detail-visual{
  aspect-ratio: 4/3; border-radius: 2px; border: 1px solid var(--gold-line);
  background:
    radial-gradient(circle at 25% 25%, rgba(184,147,90,.16), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(124,31,46,.42), transparent 55%),
    linear-gradient(160deg, #241b18, #170f0e 70%);
  display:flex; align-items:center; justify-content:center;
}
.detail-visual svg{ width: 34%; height:auto; opacity:.9; }
.detail-visual img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ---------- Stat / feature strip ---------- */
.feature-strip{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 64px;
}
.feature-item{
  border-top: 1px solid var(--gold-line); padding-top: 20px;
}
.feature-item .num{
  font-family: var(--accent-en); color: var(--gold); font-size: 1.8rem; display:block; margin-bottom:8px;
}
.feature-item p{ font-size: .84rem; margin:0; }

/* ---------- About table ---------- */
.about-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 7vw; align-items:start; }
.info-table{ width:100%; border-collapse: collapse; }
.info-table tr{ border-bottom: 1px solid var(--gold-line); }
.info-table th, .info-table td{
  text-align:left; padding: 20px 0; font-weight:300; vertical-align:top;
}
.info-table th{
  width: 30%; color: var(--gold); font-size: .84rem; letter-spacing:.08em; font-weight:400;
}
.info-table td{ color: var(--ink-soft); font-size: .94rem; }
.placeholder-note{
  display:inline-block; margin-top:6px; font-size:.74rem; color: var(--wine-light);
  letter-spacing:.03em;
}
.profile-card{
  background: var(--bg-card); border:1px solid var(--gold-line); border-radius:3px; padding: 34px;
}
.profile-photo{
  width: 120px; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px;
  border: 1px solid var(--gold-line); display:block; margin-bottom: 24px;
}
.profile-name{ font-size:1.2rem; letter-spacing:.08em; margin-bottom:6px; }
.profile-role{ font-family: var(--accent-en); font-style:normal; color: var(--gold); font-size:.82rem; letter-spacing:.1em; margin-bottom:20px; display:block; }
.profile-cert{
  display:inline-block; margin-top:18px; padding: 6px 16px; border:1px solid var(--wine-line);
  color: var(--wine-light); font-size:.76rem; letter-spacing:.08em; border-radius:20px;
}

/* ---------- Timeline / process ---------- */
.process-list{ counter-reset: step; margin-top: 20px; }
.process-item{
  position:relative; padding: 30px 0 30px 64px; border-top: 1px solid var(--gold-line);
}
.process-item:first-child{ border-top:none; }
.process-item::before{
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position:absolute; left:0; top: 28px; font-family: var(--accent-en); font-style:normal;
  color: var(--wine-light); font-size:1.3rem;
}
.process-item h4{ font-size:1.02rem; letter-spacing:.05em; margin-bottom:10px; color: var(--ink); font-family: var(--serif); }
.process-item p{ margin:0; font-size:.92rem; }

/* ---------- CTA band ---------- */
.cta-band{
  background: linear-gradient(160deg, #241014, #14100f 75%);
  border-top: 1px solid var(--wine-line); border-bottom: 1px solid var(--wine-line);
  text-align:center;
}
.cta-band h2{ font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 20px; }
.cta-band p{ max-width: 560px; margin: 0 auto 36px; }
.cta-buttons{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items:start; }
.info-row{
  display:grid; grid-template-columns: 96px 1fr; gap: 18px;
  padding: 18px 0; border-bottom: 1px solid var(--gold-line);
}
dl{ margin:0; }
dt{ color: var(--gold); font-size: .82rem; letter-spacing: .1em; padding-top:2px; }
dd{ margin:0; color: var(--ink-soft); font-size:.94rem; }
dd a:hover{ color: var(--gold); }
.contact-form{
  background: var(--bg-card); border:1px solid var(--gold-line); border-radius:3px; padding: 40px;
}
.form-row{ margin-bottom: 22px; }
.form-row label{ display:block; font-size:.82rem; color: var(--gold); letter-spacing:.06em; margin-bottom:10px; }
.form-row input, .form-row textarea, .form-row select{
  width:100%; background: var(--bg-alt); border: 1px solid var(--gold-line); border-radius:2px;
  color: var(--ink); padding: 13px 14px; font-family: var(--sans); font-size:.92rem;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  outline:none; border-color: var(--gold);
}
.form-row textarea{ resize: vertical; min-height: 130px; }
.form-note{ font-size:.78rem; color: var(--ink-mute); margin-top: -8px; margin-bottom: 26px; }
.submit-btn{
  width:100%; background: var(--wine); border:1px solid var(--wine); color: var(--ink);
  padding: 15px; border-radius:2px; font-family: var(--sans); font-size:.92rem;
  letter-spacing:.1em; cursor:pointer; transition: background .3s var(--ease);
}
.submit-btn:hover{ background: var(--wine-light); }
.submit-btn:disabled{ opacity:.6; cursor:not-allowed; }
.form-status{ display:none; margin-top:18px; font-size:.86rem; line-height:1.6; }
.form-status.show{ display:block; }
.form-status.success{ color: var(--gold); }
.form-status.error{ color: var(--wine-light); }

/* ---------- Footer ---------- */
.site-footer{ background: #0f0b0a; position:relative; }
.footer-wave{ display:block; width:100%; height:auto; }
.footer-inner{
  background: linear-gradient(180deg, #2a0f14, #14090a);
  text-align:center; padding: 20px 6vw 50px;
}
.footer-brand{
  font-family: var(--serif); font-size: 1.3rem; letter-spacing:.3em; padding-left:.3em;
  color: var(--ink); margin-bottom: 22px;
}
.footer-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 22px 30px;
  margin-bottom: 34px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-nav a{ font-size:.82rem; color: var(--ink-soft); letter-spacing:.04em; }
.footer-nav a:hover{ color: var(--gold); }
.footer-meta{ color: var(--ink-mute); font-size:.82rem; margin: 4px 0; }
.copyright{ margin-top: 22px; font-size:.72rem; letter-spacing:.05em; color: var(--ink-mute); }

/* ---------- Responsive ---------- */
.sp-only{ display:none; }

@media (max-width: 980px){
  section{ padding: 90px 0; }
  .split-grid, .about-grid, .contact-grid{ grid-template-columns: 1fr; gap: 46px; }
  .card-grid{ grid-template-columns: 1fr 1fr; }
  .detail-block, .detail-block.reverse{ grid-template-columns:1fr; direction:ltr; gap: 34px; }
  .detail-block.reverse > *{ direction: ltr; }
  .detail-visual{ order:-1; }
  .feature-strip{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  .sp-only{ display:inline; }
  .main-nav{
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    background: var(--bg-alt); flex-direction:column; align-items:flex-start;
    justify-content:center; gap: 26px; padding: 0 44px;
    transform: translateX(100%); transition: transform .5s var(--ease);
    border-left: 1px solid var(--gold-line);
  }
  .main-nav.open{ transform: translateX(0); }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
  .nav-cta{ order: 10; }

  .card-grid{ grid-template-columns: 1fr; }
  .feature-strip{ grid-template-columns: 1fr 1fr; }
  .page-hero{ padding: 150px 6vw 70px; }
}