@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Courier+Prime:wght@400;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --paper:#f3eee9;
  --ink:#11110f;
  --red:#c94231;
  --muted:#746e68;
  --sidebar:220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Courier Prime",monospace;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.11;
  background:
    radial-gradient(circle at 12% 18%,rgba(60,40,25,.11) 0 1px,transparent 1.3px),
    radial-gradient(circle at 72% 58%,rgba(60,40,25,.08) 0 1px,transparent 1.3px);
  background-size:18px 18px,27px 27px;mix-blend-mode:multiply;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.sidebar{
  position:fixed;left:0;top:0;width:var(--sidebar);height:100vh;
  background:#101010;color:#fff;padding:30px 28px 22px;z-index:20;
  display:flex;flex-direction:column;
}
.logo{width:166px}
.logo-sub{font:500 11px/1 Inter,sans-serif;letter-spacing:.15em;margin-top:9px}
.seal{
  margin-top:18px;display:inline-block;align-self:flex-start;color:var(--red);
  border:1px solid var(--red);padding:4px 6px;font-size:10px;
}
.nav{
  margin-top:62px;display:grid;gap:19px;
  font:500 11px/1.25 Inter,sans-serif;text-transform:uppercase;
}
.nav a:hover,.nav a.active{color:var(--red)}
.nav a.active::after{content:"";display:block;width:48px;height:2px;background:var(--red);margin-top:8px}
.side-bottom{margin-top:auto;color:#aaa;font-size:9px}
main{margin-left:var(--sidebar)}

.hero{
  min-height:610px;display:grid;grid-template-columns:.95fr 1.05fr;
  border-bottom:1px solid rgba(17,17,15,.15);
}
.hero-copy{
  padding:72px 5vw 62px 6vw;display:flex;flex-direction:column;justify-content:center;
}
.eyebrow{
  font:700 11px Inter,sans-serif;text-transform:uppercase;
  letter-spacing:.13em;color:var(--red);margin-bottom:20px;
}
h1,h2,h3{margin:0}
h1{
  font:400 clamp(58px,6vw,92px)/.92 "Permanent Marker",cursive;
  letter-spacing:-.03em;
}
h1 em{color:var(--red);font-style:normal}
.title-line{width:90px;height:3px;background:var(--red);margin:22px 0 28px}
.hero-copy p{
  max-width:590px;font-size:17px;line-height:1.7;margin:0 0 26px;
}
.hero-proof{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;
}
.hero-proof div{
  border-top:1px solid rgba(17,17,15,.28);padding-top:11px;
}
.hero-proof strong{
  display:block;font:700 11px Inter,sans-serif;text-transform:uppercase;
  margin-bottom:5px;color:var(--red);
}
.hero-proof span{font-size:12px;line-height:1.4}
.hero-art{
  position:relative;
  background:
    linear-gradient(90deg,rgba(243,238,233,.5),rgba(243,238,233,0) 28%),
    url("assets/production.png") center/cover no-repeat;
  min-height:610px;
}
.hero-art::after{
  content:"精度と柔軟性";
  position:absolute;right:28px;bottom:38px;
  writing-mode:vertical-rl;color:var(--red);border:1px solid var(--red);
  padding:10px 8px;background:rgba(243,238,233,.78);
  font-size:18px;letter-spacing:.08em;
}

.scope{
  padding:98px 7vw 100px;
}
.scope-head{
  display:grid;grid-template-columns:280px 1fr;gap:60px;margin-bottom:48px;
}
.scope-head h2{
  font:400 38px/1 "Permanent Marker",cursive;
}
.scope-head h2::after{
  content:"";display:block;width:44px;height:2px;background:var(--red);margin-top:10px;
}
.scope-head p{
  max-width:780px;margin:0;font-size:16px;line-height:1.7;
}
.scope-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.scope-card{
  min-height:260px;border:1px solid rgba(17,17,15,.18);
  padding:26px 22px;position:relative;background:rgba(255,255,255,.18);
}
.scope-card::before{
  content:attr(data-num);position:absolute;right:17px;top:14px;color:var(--red);
  font:700 11px Inter,sans-serif;
}
.scope-card h3{
  font:400 25px/1 "Permanent Marker",cursive;margin-bottom:16px;
}
.scope-card p{font-size:13px;line-height:1.55;margin:0 0 14px}
.scope-card ul{padding-left:18px;margin:0;font-size:12px;line-height:1.55}
.scope-card li{margin:5px 0}

.integration{
  background:#111;color:#fff;padding:100px 7vw;
}
.integration-head{
  display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:54px;
}
.integration h2{font:400 40px/1 "Permanent Marker",cursive}
.integration-head p{margin:0;max-width:590px;color:#d7d2cc;font-size:14px;line-height:1.65}
.steps{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
}
.step{
  border-top:1px solid rgba(255,255,255,.26);padding-top:16px;min-height:180px;
}
.step strong{color:var(--red);font:700 11px Inter,sans-serif}
.step h3{font:400 21px/1 "Permanent Marker",cursive;margin:13px 0 11px}
.step p{font-size:12px;line-height:1.5;color:#d9d5cf;margin:0}

.work{
  padding:100px 7vw 105px;
}
.work-head{
  display:grid;grid-template-columns:270px 1fr;gap:58px;margin-bottom:44px;
}
.work h2{font:400 38px/1 "Permanent Marker",cursive}
.work h2::after{content:"";display:block;width:44px;height:2px;background:var(--red);margin-top:10px}
.work-head p{margin:0;max-width:740px;font-size:16px;line-height:1.7}
.work-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
}
.work-card{
  border:1px solid rgba(17,17,15,.18);
  padding:24px;min-height:225px;background:rgba(255,255,255,.2);
}
.work-card .tag{
  font:700 10px Inter,sans-serif;color:var(--red);text-transform:uppercase;letter-spacing:.08em;
}
.work-card h3{font:400 28px/1 "Permanent Marker",cursive;margin:16px 0 12px}
.work-card p{font-size:13px;line-height:1.55;margin:0 0 14px}
.work-card .role{
  font-size:11px;color:var(--muted);border-top:1px solid rgba(17,17,15,.14);padding-top:10px;
}

.formats{
  padding:98px 7vw;background:#ebe3da;
}
.formats-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start;
}
.formats h2{font:400 38px/1 "Permanent Marker",cursive}
.formats h2::after{content:"";display:block;width:44px;height:2px;background:var(--red);margin-top:10px}
.formats p{font-size:16px;line-height:1.7}
.format-list{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;
}
.format-item{
  border-top:1px solid rgba(17,17,15,.25);padding-top:14px;
}
.format-item strong{font:700 14px Inter,sans-serif;display:block;margin-bottom:6px}
.format-item span{font-size:12px;line-height:1.45;color:var(--muted)}

.why{
  padding:100px 7vw;
}
.why h2{font:400 38px/1 "Permanent Marker",cursive;margin-bottom:42px}
.why h2::after{content:"";display:block;width:44px;height:2px;background:var(--red);margin-top:10px}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why-item{border-top:1px solid rgba(17,17,15,.28);padding-top:18px}
.why-item h3{font:600 16px/1.3 Inter,sans-serif;margin-bottom:10px}
.why-item p{font-size:13px;line-height:1.55;margin:0}

.cta{
  background:#111;color:#fff;padding:82px 7vw;
  display:flex;justify-content:space-between;align-items:center;gap:50px;
}
.cta h2{font:400 clamp(40px,4.6vw,68px)/.95 "Permanent Marker",cursive}
.cta h2 em{color:var(--red);font-style:normal}
.cta p{max-width:570px;color:#d4d0ca;line-height:1.65}
.cta-btn{
  display:inline-block;background:var(--red);color:#fff;padding:17px 22px;
  font:700 11px Inter,sans-serif;text-transform:uppercase;white-space:nowrap;
}
footer{
  background:#111;color:#aaa;border-top:1px solid rgba(255,255,255,.12);
  padding:22px 7vw 30px;display:flex;justify-content:space-between;gap:25px;
  font:500 10px Inter,sans-serif;text-transform:uppercase;
}
footer a:hover{color:var(--red)}
.mobile-head{display:none}

@media(max-width:1100px){
  .hero{grid-template-columns:1fr}
  .hero-art{min-height:440px}
  .scope-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .work-grid{grid-template-columns:1fr}
  .formats-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  :root{--sidebar:0px}
  .sidebar{display:none}
  .mobile-head{
    display:flex;position:fixed;top:0;left:0;right:0;height:64px;z-index:40;
    background:#101010;padding:12px 18px;align-items:center;justify-content:space-between;
  }
  .mobile-head img{width:135px}
  .mobile-head a{color:#fff;font:600 11px Inter,sans-serif;text-transform:uppercase}
  main{margin-left:0;padding-top:64px}
  .hero-copy{padding:50px 24px 44px}
  h1{font-size:52px}
  .hero-proof{grid-template-columns:1fr}
  .scope,.integration,.work,.formats,.why{padding:70px 24px}
  .scope-head,.work-head{grid-template-columns:1fr;gap:20px}
  .scope-grid,.steps,.why-grid,.format-list{grid-template-columns:1fr}
  .integration-head{display:block}
  .integration-head p{margin-top:20px}
  .cta{padding:65px 24px;align-items:flex-start;flex-direction:column}
  footer{padding:22px 24px;flex-direction:column}
}


/* New top-navigation layout */
.sidebar,.mobile-head{display:none!important}
main{margin-left:0!important}