/* ===== Base ===== */
:root{
  --navy:#0d2240;
  --navy-deep:#0a1b33;
  --navy-soft:#13315c;
  --ink:#1a1a1a;
  --gray:#666;
  --line:#e3e6ea;
  --bg:#fff;
  --bg-alt:#f4f6f8;
  --gold:#c8a96a;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP",sans-serif;
  color:var(--ink);
  line-height:1.9;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.bx{display:inline-block}
.eyebrow{
  font-family:"Montserrat",sans-serif;
  letter-spacing:.32em;
  font-size:.72rem;
  font-weight:600;
  color:var(--gold);
  display:block;
  margin-bottom:1rem;
}
.eyebrow.dark{color:var(--gold)}
.arrow{display:inline-block;margin-left:.6em;transition:transform .3s}
.btn-dark:hover .arrow,.btn-light:hover .arrow{transform:translateX(6px)}

/* ===== Header ===== */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  transition:background .4s,box-shadow .4s,padding .4s;
  padding:.4rem 0;
}
.header.scrolled{background:rgba(255,255,255,.97);box-shadow:0 2px 20px rgba(0,0,0,.08)}
.header-inner{
  max-width:1180px;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:.7rem;color:#fff;transition:color .4s}
.header.scrolled .brand{color:var(--navy)}
.brand-mark{display:flex;color:inherit}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-ja{font-weight:700;font-size:1.15rem;letter-spacing:.04em}
.brand-en{font-family:"Montserrat",sans-serif;font-size:.56rem;letter-spacing:.18em;opacity:.7}
.nav{display:flex;align-items:center;gap:1.9rem}
.nav a{
  font-size:.86rem;font-weight:500;color:#fff;transition:color .3s;position:relative;
}
.header.scrolled .nav a{color:var(--navy)}
.nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--gold);transition:width .3s;
}
.nav a:not(.nav-cta):hover::after{width:100%}
.nav-cta{
  background:var(--navy);color:#fff!important;padding:.7rem 1.5rem;border-radius:4px;
  font-weight:600;transition:background .3s;
}
.header.scrolled .nav-cta{background:var(--navy)}
.nav-cta:hover{background:var(--navy-soft)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{width:26px;height:2px;background:#fff;transition:.3s}
.header.scrolled .hamburger span{background:var(--navy)}

/* ===== Cinematic intro ===== */
.intro{
  position:fixed;inset:0;z-index:2000;background:#060d18;
  display:flex;align-items:center;justify-content:center;
}
.intro-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.intro-mark{color:var(--gold);opacity:0;transform:translateY(8px);animation:introFade 1s .2s ease forwards}
.intro-en{
  font-family:"Montserrat",sans-serif;letter-spacing:.42em;font-size:.82rem;font-weight:500;
  color:#cdd7e4;margin:1.4rem 0 1rem;opacity:0;animation:introFade 1.1s .8s ease forwards;
}
.intro-line{width:0;height:1px;background:var(--gold);animation:introLine 1.1s 1.1s cubic-bezier(.6,0,.2,1) forwards}
.intro-ja{
  font-size:1.45rem;font-weight:700;letter-spacing:.16em;color:#fff;
  margin-top:1.1rem;opacity:0;animation:introFade 1.1s 1.5s ease forwards;
}
@keyframes introFade{to{opacity:1;transform:none}}
@keyframes introLine{to{width:230px}}
/* intro exit */
body.cinematic-in .intro{animation:introOut 1.1s cubic-bezier(.6,0,.2,1) forwards}
@keyframes introOut{to{opacity:0;visibility:hidden;transform:scale(1.07)}}
.intro.intro-done{display:none}
body.intro-lock{overflow:hidden}

/* Letterbox bars */
.cine-bar{position:fixed;left:0;width:100%;height:13vh;background:#060d18;z-index:1900;pointer-events:none}
.cine-bar.top{top:0;transform:translateY(-100%)}
.cine-bar.bottom{bottom:0;transform:translateY(100%)}
body.cinematic-in .cine-bar{animation:barFrame 2.4s 1.15s cubic-bezier(.6,0,.2,1) forwards}
@keyframes barFrame{
  0%{transform:translateY(var(--from,-100%))}
  34%,60%{transform:translateY(0)}      /* slide in & hold — film framing beat */
  100%{transform:translateY(var(--from,-100%))} /* retract */
}
.cine-bar.bottom{--from:100%}

/* ===== Hero ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;
  background:url("https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?auto=format&fit=crop&w=1900&q=80") center/cover no-repeat;
  transform:scale(1.05);
  animation:kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.17) translateY(-1.5%)}}
.hero-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 120% at 48% 42%,transparent 52%,rgba(4,10,22,.6) 100%);
}
/* Cinematic hero text reveal (only when JS adds .cinematic) */
body.cinematic .hero-content>*{opacity:0;transform:translateY(34px);filter:blur(7px)}
body.cinematic-in .hero-content>*{animation:cineUp 1.2s cubic-bezier(.16,.7,.2,1) forwards}
body.cinematic-in .hero-eyebrow{animation-delay:.15s}
body.cinematic-in .hero-title{animation-delay:.42s}
body.cinematic-in .hero-lead{animation-delay:.78s}
body.cinematic-in .hero-badges{animation-delay:1.05s}
@keyframes cineUp{to{opacity:1;transform:none;filter:blur(0)}}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(8,22,43,.88) 0%,rgba(8,22,43,.55) 45%,rgba(8,22,43,.25) 100%);
}
.hero-content{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 28px;width:100%;color:#fff}
.hero-eyebrow{
  font-family:"Montserrat",sans-serif;letter-spacing:.32em;font-size:.78rem;font-weight:600;
  color:#dfe6ef;margin-bottom:1.5rem;
}
.hero-title{
  font-weight:900;font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.28;letter-spacing:.02em;margin-bottom:1.8rem;
  text-shadow:0 2px 24px rgba(0,0,0,.3);
}
.hero-title .accent{color:#fff}
.hero-lead{font-size:clamp(.95rem,1.5vw,1.15rem);line-height:2;max-width:34ch;margin-bottom:3rem;color:#eef2f7}
.hero-badges{list-style:none;display:flex;gap:2.6rem;flex-wrap:wrap}
.hero-badges li{display:flex;align-items:center;gap:.9rem}
.badge-icon{
  width:52px;height:52px;border:1.5px solid rgba(255,255,255,.55);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.badge-icon svg{width:24px;height:24px;fill:#fff}
.badge-text{display:flex;flex-direction:column;line-height:1.45}
.badge-text b{font-size:1rem;font-weight:700}
.badge-text small{font-size:.74rem;opacity:.78}

/* ===== About ===== */
.about{padding:6.5rem 0;background:var(--bg)}
.about-inner{
  max-width:1180px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center;
}
.about-title{
  font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;line-height:1.6;color:var(--navy);margin-bottom:1.8rem;
}
.about-body{color:#444;font-size:.96rem;line-height:2.1;margin-bottom:1.6rem}
.about-person{font-size:.92rem;color:#555;margin-bottom:2.2rem;font-weight:500}
.btn-dark{
  display:inline-flex;align-items:center;background:var(--navy);color:#fff;
  padding:1rem 2.4rem;border-radius:4px;font-weight:600;font-size:.92rem;transition:background .3s;
}
.btn-dark:hover{background:var(--navy-soft)}
.about-media{position:relative}
.about-img{
  width:100%;aspect-ratio:4/3;border-radius:4px;
  background:url("images/truck-wanhai.jpg") center/cover no-repeat;
  box-shadow:0 24px 60px rgba(13,34,64,.22);
}
.about-script{
  position:absolute;right:-10px;bottom:-26px;
  font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;
  font-size:clamp(2.4rem,4.5vw,3.6rem);line-height:1;color:rgba(13,34,64,.12);letter-spacing:.02em;
  pointer-events:none;text-align:right;
}

/* ===== Section heads ===== */
.section-head{text-align:center;margin-bottom:3.6rem}
.section-head .eyebrow{margin-bottom:.6rem}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:700;letter-spacing:.05em}
.section-head.light h2{color:#fff}
.section-head.dark h2{color:var(--navy)}

/* ===== Service ===== */
.service{padding:5.5rem 0 6rem;background:var(--navy);color:#fff}
.service-grid{
  max-width:1180px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
}
.service-card{background:var(--navy-deep);border:1px solid rgba(255,255,255,.07);border-radius:4px;overflow:hidden;transition:transform .35s,box-shadow .35s}
.service-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.service-img{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center}
.service-img.s1{background-image:url("https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?auto=format&fit=crop&w=900&q=80")}
.service-img.s2{background-image:url("https://images.unsplash.com/photo-1519003722824-194d4455a60c?auto=format&fit=crop&w=900&q=80")}
.service-img.s3{background-image:url("images/truck-lineup.jpg")}
.service-body{padding:1.8rem 1.6rem 2.2rem;text-align:center}
.service-body h3{font-size:1.2rem;font-weight:700;margin-bottom:.9rem}
.service-body p{font-size:.86rem;color:#c3cdda;line-height:1.95}

/* ===== Strength ===== */
.strength{padding:5.5rem 0 6rem;background:var(--bg-alt)}
.strength-grid{
  max-width:1080px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:2.8rem;
}
.strength-item{text-align:center}
.strength-num{
  font-family:"Montserrat",sans-serif;font-size:1.05rem;font-weight:700;color:var(--navy);display:block;margin-bottom:1rem;
}
.strength-icon{
  width:84px;height:84px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.4rem;
}
.strength-icon svg{width:34px;height:34px;fill:#fff}
.strength-text h3{font-size:1.18rem;font-weight:700;color:var(--navy);margin-bottom:.8rem}
.strength-text p{font-size:.88rem;color:#555;line-height:1.95;max-width:24ch;margin:0 auto}

/* ===== CTA ===== */
.cta{position:relative;padding:4.5rem 0;overflow:hidden}
.cta-bg{
  position:absolute;inset:0;
  background:url("https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1900&q=80") center/cover no-repeat;
}
.cta-overlay{position:absolute;inset:0;background:rgba(8,22,43,.9)}
.cta-inner{
  position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;color:#fff;
}
.cta-text{display:flex;align-items:center;gap:1.6rem}
.cta-icon{
  width:74px;height:74px;border:1.5px solid rgba(255,255,255,.5);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cta-icon svg{width:34px;height:34px;stroke:#fff}
.cta-text h2{font-size:clamp(1.4rem,2.6vw,1.85rem);font-weight:700;margin-bottom:.4rem}
.cta-text p{font-size:.94rem;color:#dbe2ec}
.btn-light{
  display:inline-flex;align-items:center;background:#fff;color:var(--navy);
  padding:1.15rem 2.6rem;border-radius:4px;font-weight:700;font-size:.95rem;transition:background .3s,color .3s;
}
.btn-light:hover{background:var(--gold);color:#fff}

/* ===== Footer ===== */
.footer{background:#fff;padding:4.5rem 0 0;border-top:1px solid var(--line)}
.footer-inner{
  max-width:1180px;margin:0 auto;padding:0 28px 3.5rem;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;
}
.brand-mark.dark{color:var(--navy);display:inline-flex}
.footer-name{font-size:1.2rem;font-weight:700;color:var(--navy);margin:.6rem 0 1rem}
.footer-addr,.footer-tel{font-size:.85rem;color:#555;line-height:1.8}
.footer-col h4{font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:1.1rem}
.footer-col ul{list-style:none}
.footer-col li{font-size:.85rem;color:#555;margin-bottom:.7rem}
.footer-col a{transition:color .3s}
.footer-col a:hover{color:var(--gold)}
.sns-icon{color:var(--navy);display:inline-flex;margin-bottom:.9rem;transition:color .3s}
.sns-icon:hover{color:var(--gold)}
.sns-note{font-size:.8rem;color:#666}
.copyright{border-top:1px solid var(--line);padding:1.6rem 28px;text-align:center}
.copyright p{font-size:.74rem;color:#999;font-family:"Montserrat",sans-serif;letter-spacing:.04em}

/* ===== Sample banner ===== */
.sample-banner{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
  z-index:90;display:inline-flex;align-items:center;gap:10px;
  background:rgba(10,18,33,.92);backdrop-filter:blur(10px);
  border:1px solid rgba(200,169,106,.55);color:#f1e6cf;
  padding:9px 16px 9px 14px;border-radius:999px;
  font-family:"Noto Sans JP",sans-serif;font-size:13px;font-weight:500;letter-spacing:.03em;white-space:nowrap;
  max-width:min(600px,calc(100vw - 24px));
  box-shadow:0 12px 32px rgba(0,0,0,.5);cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  animation:sb-in .6s 1s ease both;
}
.sample-banner:hover{
  transform:translateX(-50%) translateY(-3px);
  border-color:rgba(200,169,106,.95);
  box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 0 1px rgba(200,169,106,.25);
}
.sample-banner:hover .sb-arrow{transform:translate(2px,-2px)}
@keyframes sb-in{from{opacity:0}to{opacity:1}}
.sb-arrow{color:var(--gold);opacity:.85;transition:transform .22s ease}
.sb-dot{
  width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0;
  box-shadow:0 0 0 4px rgba(200,169,106,.18);animation:sb-pulse 2s ease-in-out infinite;
}
@keyframes sb-pulse{0%,100%{box-shadow:0 0 0 3px rgba(200,169,106,.22)}50%{box-shadow:0 0 0 6px rgba(200,169,106,.06)}}
.sb-tag{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.18em;
  color:#1a1205;background:var(--gold);padding:2px 8px;border-radius:5px;flex-shrink:0;
}
.sb-text{color:#f1e6cf}
@media(max-width:480px){
  .sample-banner{font-size:11px;padding:9px 16px;gap:8px;bottom:12px;white-space:normal;text-align:center;line-height:1.45;border-radius:16px;width:min(94vw,360px);justify-content:center;flex-wrap:wrap}
  .sample-banner .sb-text{font-size:11px}
  .sb-dot{display:none}
}

/* ===== Reduced motion ===== */
@media(prefers-reduced-motion:reduce){
  .intro{display:none}
  .cine-bar{display:none}
  .hero-bg{animation:none}
  body.cinematic .hero-content>*{opacity:1;transform:none;filter:none}
  .reveal{transition:none}
}

/* ===== Reveal animation ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ===== Responsive ===== */
@media(max-width:900px){
  .nav{
    position:fixed;top:0;right:0;height:100vh;width:75%;max-width:320px;
    background:var(--navy);flex-direction:column;justify-content:center;gap:2rem;
    transform:translateX(100%);transition:transform .4s;padding:2rem;
  }
  .nav.open{transform:translateX(0)}
  .nav a{color:#fff!important;font-size:1.05rem}
  .header.scrolled .nav a{color:#fff!important}
  .hamburger{display:flex;z-index:120}
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .header.scrolled .hamburger.open span{background:#fff}
  .about-inner{grid-template-columns:1fr;gap:3.5rem}
  .about-media{order:-1}
  .service-grid,.strength-grid{grid-template-columns:1fr;gap:2rem}
  .strength-grid{gap:3rem}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2rem}
  .cta-inner{flex-direction:column;text-align:center;align-items:center}
  .cta-text{flex-direction:column;text-align:center}
}
@media(max-width:560px){
  .hero-badges{gap:1.4rem}
  .hero-badges li{width:100%}
  .brand-ja{font-size:1rem}
  .footer-inner{grid-template-columns:1fr}
}